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.

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.

Tailwind CSS

"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

• Example
• Breadboard

Variables

• Border
• Breakpoint
• Colors
• Effects
• Filters
• Flex
• Grid
• Sizing
• Transform
• Transition
• Typography
• Width
• Height
• Z-Index

Utilities

• Align
• Animation
• Border
• Container
• Margin Push
• Margin Pull
• Margin Reset
• Padding
• Padding Reset
• Text Utilities
• Layout Utilities
• Flex Utilities
• Position Utilities
• List 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;

  &__element {
    color: $red-400;
  }

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

<div class="block block--modifier">
  <div class="block__element" />
</div>

References

• SASS
• Tailwind CSS
• Milligram
• BEM
• Refactoring UI
• Shape UP
• Boxicons

Development

To release a new version, update the version number in version.rb, and then run bundle exec rake release, which will create a git tag for the version, push git commits and the created tag, and push the .gem file to rubygems.org.

License

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