Getting started

Install

Explore various ways to integrate Sugar.css.

• Customize online and download
• npm install sugar-css-framework
• Command line npx sugar-css-framework (this way grid column width can be modified)
• Access via CDN:

Usage

Browser Support

Sugar.css is optimized for use with modern browsers. The features employed by Sugar CSS enjoy widespread support, exceeding 90% in the latest versions of Chrome, Safari, Firefox, and numerous Chromium-based browsers. Verify the current browser support for specific CSS features such as :has(), :with(), aspect-ratio, color-mix(), @container queries, and CSS grid.

Mindset

With the exception of classes like .s-dark, .s-light, .s-outline, .s-secondary, .s-grid, .s-fixed, and .s-container, Sugar.css can be viewed as a CSS reset. All styles applied by Sugar.css utilize the :where() pseudo-selector, avoiding specificity issues. There's no need to move Sugar.css into a separate layer; you can seamlessly overwrite styles without additional complexity. The emphasis is on simplicity, keeping the size compact at 7.5 kB when minified.

Sugar.css tries to be as simple as possible and keep its size down (7.5 kB minified).

Use cases

Sugar.css is well-suited for projects where::

• Design adheres to defined rules rather than subjective aesthetics.
• Readability and accessibility take precedence over intricate design elements.
• Consistent rules are favored over numerous exceptions.

It's not limited to small projects; Sugar.css can serve as a foundational layer even for substantial endeavors. For extensive projects, consider modifying not only the provided custom properties but also the source code of Sugar.css.