With Module Bundler

Secure/Obsfucated Versions

For enhanced security, ScarCSS also provides obfuscated versions that protect the core code:

<!-- Secure version with code protection -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/scarcss.secure.min.js"></script>

<!-- Highly obfuscated version -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/scarcss.obfuscated.min.js"></script>

These versions provide the same functionality but with obfuscated code that makes it difficult to reverse engineer the core implementation.

With Module Bundler

import ScarCSS from 'scarcss';

// Initialize (optional, auto-initializes)
const scarCSS = new ScarCSS();

Unique Utility Classes

ScarCSS includes unique utility classes not found in other frameworks:

Magic Gradients

• bg-magic - Purple to blue gradient
• bg-fire - Pink to red gradient
• bg-ocean - Blue gradient
• bg-sunset - Pink gradient
• bg-forest - Green gradient

Text Effects

• text-glow - Subtle text glow
• text-shadow - Classic text shadow
• text-3d - 3D text effect
• text-neon - Neon text effect

Shapes

• shape-circle - Perfect circle
• shape-blob - Organic blob shape
• shape-star - Star shape
• shape-heart - Heart shape

Animations

Entrance Animations

• animate-fade-in - Fade in effect
• animate-slide-up - Slide from bottom
• animate-slide-down - Slide from top
• animate-slide-left - Slide from right
• animate-slide-right - Slide from left
• animate-bounce-in - Bounce in effect
• animate-zoom-in - Zoom in effect

Continuous Animations

• animate-pulse - Gentle pulsing
• animate-bounce - Bouncing effect
• animate-spin - Continuous spinning
• animate-ping - Ping effect

Exit Animations

• animate-fade-out - Fade out effect
• animate-slide-up-out - Slide up and out
• animate-slide-down-out - Slide down and out
• animate-slide-left-out - Slide left and out
• animate-slide-right-out - Slide right and out
• animate-bounce-out - Bounce out effect
• animate-zoom-out - Zoom out effect

Hover Effects

• hover-pop - Scale up on hover
• hover-float - Float up on hover
• hover-glow - Add glow on hover
• hover-tilt - Tilt on hover

JavaScript Actions

Trigger 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>

Examples

Card Component

<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>

Animated Button

<button @scar="bg-fire text-white py-3 px-6 rounded-lg hover-pop animate-pulse shadow-lg">
  Animated Button
</button>

Responsive Grid

<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>

API

Utility Classes

ScarCSS provides utility classes for:

• Layout - Display, position, flexbox, grid
• Spacing - Padding, margin
• Sizing - Width, height
• Typography - Font size, weight, color
• Backgrounds - Colors, gradients
• Borders - Width, color, radius
• Effects - Shadows, opacity, filters
• Interactivity - Cursor, pointer events
• Transitions - Transition properties
• Transforms - Scale, rotate, skew
• Animations - Built-in animations

JavaScript Actions

• alert(message) - Show browser alert
• menuToggle(selector) - Toggle visibility of element
• modalOpen(selector) - Show modal element
• modalClose(selector) - Hide modal element
• copyToClipboard(text) - Copy text to clipboard

Browser Support

ScarCSS works in all modern browsers that support:

• ES6 JavaScript features
• CSS3
• DOM APIs

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a pull request

License

MIT License

Author

Zawiyar Awan

Keywords

css, framework, utility, frontend, scar, attributes, tailwind, bootstrap