Core Concepts

Shilp CSS is an intent-first, CSS-centic styling engine and framework. it help you to build systems means to last.

Browser Compatibility

Shilp CSS has a clear default baseline, full support for browsers available since January 31, 2023.

The Shilp CSS baseline covers chrome, safari, firefox and edge only.

The baseline is enforced intentionally via Lightning CSS and carefully selected selectors (mixins), properties and values.

warning

You can opt-in newer features manually. By doing this, you’ll step outside the Shilp CSS baseline.

Read More: Browser Compatibility

Styling With Intent

At the core, Shilp CSS is intent-based styling engine. When you style an element, you don’t think in terms of atomic classes. You think in terms of responsibility.

Each responsibility is expressed through a dedicated intent. This keeps related decisions together and prevents it from being scattered across templates.

Read More: Styling With Intent

Colors

Shilp CSS includes a vast, beautiful color palette out of the box, carefully crafted by Tailwind CSS and suitable for a wide range of different design styles.

All the colors are in oklch format and looks more vivid on supported displays.

Shilp CSS also added oklch color format for all the Native HTML Colors like orange, white, green, blue, gold, etc.

Read More: Colors

Dark Mode

Dark mode is essential requirement in modern designs.

Users spend hours staring at the screens, sometimes working, sometimes lost, sometimes just tired, sometimes figuring out life.

Give their eyes a little mercy. Add dark mode styles and toggle with a dark class on html. Blessings guaranteed.

Read More: Dark Mode

Responsive Design

Design must adapt as per screen sizes. There's no escape. Everyone expects pixel perfect view.

Shilp CSS comes with small set of predefined breakpoints and some basic steps to help you achieve responsiveness in your design.

warning

JUST DO NOT FORGET TO TEST IT FOR THAT ONE ODD SCREEN.

Read More: Responsive Design

Theming

Shilp CSS includes a vast, predefined set of default styles that can be used to build beautiful custom design systems.

Possibilities are endless with Shilp CSS. From basic colors, fonts to building a component libray or a full design system.

Sounds too much of a work? Don't worry.

Shilp CSS comes with a basic design system tokens, just configure / override it. piece of a cake. REALLY.

Read More: Theming

Writing Shilp CSS

Shilp CSS uses traditional CSS model, styles are applied through named classes.

It does not enforce a naming scheme. There are no required patterns, prefixes, or formats.

Guessing the name for class is hard. actully tough. takes ages. acknowledged.

To help with that, Shilp CSS provides clear recommendations (not rules), for naming styles in a way that scales.

It is easy and simple. TRUST ME BRO. 🫣

Read More: Best Practices: Writing Shilp CSS