Project

sass-zero

0.01
The project is in a healthy, maintained state
A CSS framework for rapid UI development based on tailwindcss, miligram and BEM.
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
 Dependencies
 Project Readme

SASS-ZERO

SASS-ZERO is a css framework that brings concepts from tailwindcss and milligram but with ideas from BEM, Refactoring UI and Shape UP.

screenshot

Milligram

"Programmers don’t need a pixel-perfect design to start implementing. All they need are endpoints: input elements, buttons, places where stored data should appear. These affordances are the core of a user interface design." - Shape UP.

SASS-ZERO comes with a basic grayscale theme that help you to bring your ideas to life, questions about font, color, spacing and layout can be resolved after the raw affordances.

Tailwindcss

"Instead of hand-picking values from a limitless pool any time you need to make a decision, start with a smaller set of options." - Refactoring UI.

SASS-ZERO use font, color, spacing, border and etc from tailwindcss but instead the utility-first approach we use sass variables.

BEM

I believe that html is code, therefore it should be named and scoped as well. Developers need to be good with naming things, css is another oportunity to practice.

Shape UP

SASS-ZERO comes with a implict flow from Shape UP, Find Elemens -> Create Affordance -> Make it Beautiful.

Refactoring UI

Developers should be able to produce your own design, Refactoring UI is the book for that.

Breadboard Theme

Variables

Utilities

Installation

Add this to your application's Gemfile:

gem 'sass-zero'

Usage

Add this line to your application.css:

 *= require sass-zero/base
 *= require sass-zero/utilities
 *= require sass-zero/breadboard

Create some stylesheet using BEM and SASS-ZERO Variables:

@import "sass-zero/variables";

.block {
  color: $red-300;

  &__elem {
    color: $red-400;
  }

  &--mod {
    color: $red-500;
  }
}

References

License

The gem is available as open source under the terms of the MIT License.