sc

savvy-css

Savvy, Focused, Modular, Functional CSS Framework

Showing:

Popularity

Downloads/wk

12

Maintenance

No Maintenance Data Available

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Deprecated!
savvy-css has been moved to the "savvycss" namespace. Please install with "npm install savvycss", and visit "https://github.com/echobind/savvy-css" for more info

Readme

savvy-css

npm version

A Lightweight & Highly-Composable Modular CSS Framework

Clean, focused, and mobile-ready, Savvy is a collection of foundational styles and classes for authoring beautifully simple, highly effective CSS in any type of project, at any scale.

Design Goals

The Savvy approach to CSS favors:

  • Responsive design: Lightweight styles that assume small-screen (i.e.: mobile) interfaces as their default
  • Expressivity: Classes that communicate visual styling
  • Reusability & Maintenance: A common (i.e.: composition-based) approach for styling basic and more sophisticated components.
  • Utility: Focused classes that keep CSS DRY
  • 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.
  • BEM Syntax: Conventional Block > Element > Modifier methodology aligns perfectly the class naming structure meant to follow Savvy's Concern prefixes. See the full Syntax Guide for more details.
  • Adherence to the principles of motion design

Architectural and technical details related to a specific concern can be found in its source file's readme.

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

Usage

Installation

npm install savvy-css

Savvy is currently being developed, iterated upon, and tested for production usage, and thus, a 1.0 release is still forthcoming.

That said, it's very much in the "Release Candidate" stage. I haven't been able to put an official roadmap together yet, but as of 0.10.1, things are significantly stable.

Additionally, the best way to become familiar with Savvy is by reading the (very-much-still-in-progress) guides, reading through rules being developed in the source code, and tracking its progress through the changelog.

Development

Contributions are welcome, but Savvy's overall architecture and requirements are still being fleshed out -- so it may be a bit challenging to accept PRs. With that said, to hack on Savvy:

Clone the repository, then cd into its directory and install dependencies with npm:

cd savvy && npm install

Development tasks are currently managed with Gulp:

gulp lint

Savvy ships with a linting configuration which is passed to Stylelint. The lint task will examine all CSS files in the source directory, and output any linting errors to the command line via postcss-reporter.

gulp build

Passes all source CSS files through a series of POSTCSS processor gulp-postcss. This transforms source CSS custom properties to their computed values and minifies the output, resulting in a savvy.min.css file.

More development tasks (continuous compilation, watchers, etc) will be integrated shortly.

Inspiration

Savvy is a progression on many outstanding architectural concepts that have come to fruition in CSS in recent years. Its underpinnings have been heavily influenced by projects such as BassCSS, Tachyons, and many others that I'm surely leaving out.

__

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100