Savvy CSS

A Lightweight & Highly-Composable Modular CSS Framework.

Usage

Installation

yarn add --dev @savvy-css/savvy

Getting Started

This project includes all of the modules that comprise Savvy CSS. You can install it using the command above. (Our examples use yarn, but npm will also do.)

For more modular usage, you can also install individual packages.

yarn add --dev @savvy-css/utilities @savvy-css/garnishes

Design Goals

The Savvy approach to CSS favors:

• Expressivity: Classes that communicate visual styling.

• Separation of Concerns: Clearly defined "namespace" prefixes to indicate the kind of effect a class is trying to have.

• Utility: Focused classes that keep CSS DRY.

• Reusability & Maintenance: A common (i.e.: composition-based) approach for styling basic and more-sophisticated components.

• Responsive design: Lightweight styles that assume small-screen (i.e.: mobile) interfaces as their default.

• Learnability: Designing systems that are easy for developers and designers to learn and use.

• Performance: Delivering a super-small amount of CSS to devices, browsers, and users.

• Adherence to the [principles of motion design. (More on this coming soon!)

Check out thedocumentation folder for more details.

Benefits

• Smaller, Simpler, DRY CSS... which stays that way thanks to its composability
• Easier layout refactoring and experimentation
• Designed for scalability
• Designed for portability (contribute to the project directly... or fork it as the starting point for your own)
• Clean foundational defaults for HTML elements