SASS-ZERO

SASS-ZERO is a css framework that mixes concepts from Tailwind CSS, Milligram, BEM, Refactoring UI, and Shape UP.

Installation

bundle add sassc-rails
bundle add sass-zero

Usage

Add these lines to your application.css:

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

Variables

Essential

• Border
• Colors
• Effects
• Flex
• Grid
• Height
• Sizing
• Typography
• Width

Others

• Breakpoints
• Filters
• Transform
• Transition
• Z-Index
• Mixins

Utility classes

• Align
• Animation
• Border
• Container
• Flex Utilities
• Layout Utilities
• List Utilities
• Margin Pull
• Margin Push
• Margin Reset
• Padding
• Padding Reset
• Position Utilities
• Text Utilities

Breadboard

This is an optional black-and-white theme that you can use as design foundation.

• Breadboard
• Screenshot
• Example

Using variables

Create some stylesheet using BEM and SASS-ZERO Variables:

@import "sass-zero/variables";

.block {
  color: $rose-500;

  &__element_one {
    color: $fuchsia-500;
  }

  &__element_two {
    color: $purple-500;
  }

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

<div class="block block--modifier">
  <div class="block__element_one" />
  <div class="block__element_two" />
</div>

Editor setup

Visual Studio Code

1. Copy .sass-zero-references.scss to the root of your application.
2. Install SCSS IntelliSense.

Pulsar/TextMate

1. Copy .sass-zero-references.scss to the root of your application.

Customization

Breadboard

When you are sure about the style of your application you should make a copy of breadboard.scss and customize fonts, borders, and colors.

You will need to remove the breadboard from application.css:

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

Variables

Instead of using the default variables you can add or change variables, I recommend you make a copy of _variables.scss to your application and change it as you want.

@import "sass-zero/variables/border";
@import "sass-zero/variables/breakpoints";
@import "design-system/colors";
...

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.