Welcome to Sysinfocus Dynamic CSS (DCSS)

Dynamic CSS (dcss.js) is a lightweight JavaScript utility that enables developers to create and manage inline styles, element-level styles, and CSS classes dynamically using custom HTML attributes. It streamlines styling logic directly in the markup, removing the need for manually updating or managing external stylesheets in fast-paced, component-driven applications. It is similar to Tailwind CSS but more compact with re-usability factor built-in.

Features

• dc → Dynamic Class: Define reusable styles as named classes.
• de → Dynamic Element Styles: Apply inline styles scoped to a specific element.
• ds → Dynamic Styles: Insert global styles directly from HTML.
• 💡 Also supports responsive breakpoints like lg-ds, xl-ds, etc., for device-based styling!

🔥 Why Dynamic CSS?

Traditional CSS can become rigid and unscalable in modern component-driven workflows. `dcss.js` allows developers to:

• ✅ Style without creating external CSS files
• ✅ Write scoped, atomic styles inline or dynamically
• ✅ Create reusable design tokens using HTML attributes
• ✅ Prototype rapidly and keep style logic near the component
• ✅ Manage responsive styling without media query clutter

Perfect for

• Single File Components
• Web Components
• SPAs and PWAs
• Prototypes and demos
• CodePen/JSFiddle playgrounds

📦 Installation

Include the script:

✨ Samples

See a demo of GitHub Spark design using DCSS