A lightweight, utility-first frontend framework for styling and interactions using custom attributes. ScarCSS provides unique utilities and animations not found in other frameworks.
A lightweight, utility-first frontend framework for styling and interactions using custom attributes. ScarCSS provides unique utilities and animations not found in other frameworks, with a familiar syntax that's easy to learn and use.
npm install scarcss
<script src="https://cdn.jsdelivr.net/npm/scarcss@1.0.0/dist/scarcss.min.js"></script>
Download the latest release from the releases page and include it in your project.
Include ScarCSS in your project:
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/scarcss@1.0.0/dist/scarcss.min.js"></script>
</head>
<body>
<h1 @scar="text-3xl text-blue-500 text-glow">Hello ScarCSS!</h1>
<button @scar="bg-magic text-white py-2 px-4 rounded hover-pop"
@action="{alert:'Hello from ScarCSS!'}">
Click Me
</button>
</body>
</html>
import ScarCSS from 'scarcss';
// Initialize (optional, auto-initializes)
const scarCSS = new ScarCSS();
ScarCSS includes unique utility classes not found in other frameworks:
bg-magic - Purple to blue gradientbg-fire - Pink to red gradientbg-ocean - Blue gradientbg-sunset - Pink gradientbg-forest - Green gradienttext-glow - Subtle text glowtext-shadow - Classic text shadowtext-3d - 3D text effecttext-neon - Neon text effectshape-circle - Perfect circleshape-blob - Organic blob shapeshape-star - Star shapeshape-heart - Heart shapeanimate-fade-in - Fade in effectanimate-slide-up - Slide from bottomanimate-slide-down - Slide from topanimate-slide-left - Slide from rightanimate-slide-right - Slide from leftanimate-bounce-in - Bounce in effectanimate-zoom-in - Zoom in effectanimate-pulse - Gentle pulsinganimate-bounce - Bouncing effectanimate-spin - Continuous spinninganimate-ping - Ping effecthover-pop - Scale up on hoverhover-float - Float up on hoverhover-glow - Add glow on hoverhover-tilt - Tilt on hoverTrigger JavaScript behaviors using the @action attribute:
<!-- Show alert -->
<button @action="{alert:'Hello World'}">Click Me</button>
<!-- Toggle menu -->
<button @action="{menuToggle:'#mobileMenu'}">Toggle Menu</button>
<!-- Open/close modal -->
<button @action="{modalOpen:'#myModal'}">Open Modal</button>
<button @action="{modalClose:'#myModal'}">Close Modal</button>
<!-- Copy to clipboard -->
<button @action="{copyToClipboard:'Text to copy'}">Copy Text</button>
<div @scar="bg-white rounded-lg shadow-xl p-6 max-w-sm mx-auto">
<div @scar="bg-magic shape-circle w-16 h-16 mx-auto mb-4"></div>
<h3 @scar="text-xl font-bold text-center mb-2">Card Title</h3>
<p @scar="text-gray-600 text-center mb-4">This is a card component styled with ScarCSS.</p>
<button @scar="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 w-full">
Action Button
</button>
</div>
<button @scar="bg-fire text-white py-3 px-6 rounded-lg hover-pop animate-pulse shadow-lg">
Animated Button
</button>
<div @scar="grid grid-cols-1 md:grid-cols-3 gap-4">
<div @scar="bg-ocean text-white p-4 rounded text-center animate-fade-in">Column 1</div>
<div @scar="bg-sunset text-white p-4 rounded text-center animate-fade-in">Column 2</div>
<div @scar="bg-forest text-white p-4 rounded text-center animate-fade-in">Column 3</div>
</div>
ScarCSS provides utility classes for:
alert(message) - Show browser alertmenuToggle(selector) - Toggle visibility of elementmodalOpen(selector) - Show modal elementmodalClose(selector) - Hide modal elementcopyToClipboard(text) - Copy text to clipboardScarCSS works in all modern browsers that support:
git checkout -b feature/AmazingFeature)git commit -m 'Add some AmazingFeature')git push origin feature/AmazingFeature)MIT License
Zawiyar Awan
css, framework, utility, frontend, scar, attributes, tailwind, bootstrap
FAQs
A lightweight, utility-first frontend framework with Widget System. Pre-built SEO-optimized components, SPA navigation, and 500+ utility classes. Bug fixes for installation issues and default styles.
The npm package scarcss receives a total of 0 weekly downloads. As such, scarcss popularity was classified as not popular.
We found that scarcss demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ENISA’s new package manager advisory outlines the dependency security practices companies will need to demonstrate as the EU’s Cyber Resilience Act begins enforcing software supply chain requirements.
Research
/Security News
We identified over 20 additional malicious extensions, along with over 20 related sleeper extensions, some of which have already been weaponized.
Security News
TC39’s March 2026 meeting advanced eight ECMAScript proposals, including Temporal reaching Stage 4 and securing its place in the ECMAScript 2026 specification.