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.

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

Using variables

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>

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

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.