Sugar.css

Semantic, accessible, lightweight CSS framework

Sugar.css is freshly baked, currently in beta. Please leave feedback in the form of an issue at GitHub.


Semantic

Except 7 classes, all styles are applied based on semantic HTML and aria attributes. This way, accessible and easy to read HTML is encouraged.

Customizable

You can easily adjust look and feel of your very own build of Sugar.css

Customize your Sugar.css

Lightweight

Whole solution is 7.5 kB g-zipped. Including advanced grid system and custom properties to customize.


Sugar = cutting edge CSS

In most cases cutting edge technology is desired and endorsed. Unfortunately it is not that easy to say about CSS. On one hand, newest CSS brings more features and less code to achieve it. On the other hand, it brings worse browser support. If your app is not ready to use some of the following CSS features today, you should consider using some more conservative CSS framework. All features used by Sugar CSS has support 90% +:

  • :has()
  • :with()
  • aspect-ratio
  • color-mix()
  • @container queries
  • CSS grid

Modal title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rerum harum laborum quo vero veritatis eaque similique fuga quae, repudiandae, necessitatibus dolorem facere obcaecati beatae architecto expedita laboriosam cumque numquam inventore.

Dialog title

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Asperiores vitae officia, voluptatem modi quos quisquam similique tenetur voluptatum, ratione suscipit numquam dolore aperiam molestiae impedit. Ut, maiores? Alias, quos facilis.