Taking the chaos out of styling!
# clone the repository
git clone https://github.com/chaoswebdev/chaos-scss.git
# navigate to the project directory
cd chaos-scss
# install dependencies
npm installnpm i chaos-scssThen import it in your SCSS file:
@use "chaos-sass" as *;Including this library will automatically set the following:
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}Import the main entry point of your SCSS file:
@use "chaos-sass" as *;You can overwrite variables (see Classes or Variables or Themes) to adjust utilities and theme styles.
- 🔧 Modular architecture (base, components, layout, themes, utilities)
- 🎨 CSS custom property support with light/dark themes
- ⚙️ SCSS map-based utilities
- 🧩 Simple, consistent utility class generation
- 🤝 Built to integrate easily with custom or existing stylesheets
- 🪶 Lightweight and framework-agnostic
Chaos-SCSS generates a number of utility classes using SCSS maps and mixins. These classes can be used directly or @extended in your custom styles.
.font-[name]— sets font family.text-[weight]— font weight (e.g.text-bold).text-[style]— font style (e.g.text-italic).text-[decoration]— text decoration.text-[transform]— text transform (e.g.text-uppercase).text-[alignment]— text alignment.text-[size]— font size.leading-[size]— line height.tracking-[size]— letter spacing
.row,.column— flex containers.flex-row,.flex-column— alias classes.align-[start|center|end|stretch].justify-[start|center|end|between|around|evenly].gap-[sm|md|lg|xl]
.cursor-pointer.clickable
.relative,.absolute,.fixed,.sticky.z-[level]— z-index classes.overflow-[auto|hidden|scroll|visible].whitespace-[nowrap|normal|pre]
All utility classes are generated from SCSS maps, and you can extend or customize them by modifying the maps in your config.
All variables can be overridden in your configuration
--fontSize, --bodyBG, --bodyFG, --navBG, --navFG, --navHoverBG, --navHoverFG, --borderColor, --important, --alert, --goodIf you want to use the chaos-scss <form> styling, add the class cs to it: <form class='cs'>
<form>
<fieldset>
<legend>Legend</legend>
<label for="x">X</label>
<input type="text" name="x" id="x" />
...
</fieldset>
</form>.col-2 or .full-width spreads a full row inside the fieldset in case you want a custom row outside of the fieldset's 2-column grid.
Themes can be set in your opening <html> tag.
The default theme is applied to <html> (light theme).
To enable dark mode, use: <html data-theme="dark">
You can set a javascript toggle script as:
document.documentElement.setAttribute("data-theme", "dark");
// or
document.documentElement.setAttribute("data-theme", "light");It will also try and use your browser's default:
@media (prefers-color-scheme: dark) {
:root {
@include apply-theme($dark-theme);
}
}- Fork the repository
- Create a new branch:
git checkout -b feature/your-feature - Commit your changes
git commit -am 'Add your feature' - Push to the branch
git push origin feature/your-feature - Create a new Pull Request
Chaos-SCSS is open-source software licensed under the MIT License.