Sally is the leanest, meanest Flexbox grid

Download Sally.css Download Sally.sass
Who is Sally meant for?

If you're a developer looking for an ultra lightweight, easily customizable, fully responsive grid for your next project, Sally is for you. Sally avoids the weight of larger grid frameworks, while adding all-new, amazing features that existing grids currently don't have.

The Grid

The grid is a 12-column fluid grid, based on the Flexbox model. Columns scale gracefully across four breakpoints, and are easily customized with one line of SASS. Say goodbye to floating divs snapping into place.

one
eleven
two
ten
three
nine
four
eight
five
seven
six
six
Nesting

Sally provides intuitive nesting elements, just like you've come to expect from Bootstrap and other frameworks.

<div class="row"> <div class="col-xs-12 col-lg-4"> <div class="row"> <div class="col-xs-3"></div> <div class="col-xs-9"></div> </div> </div> <div class="col-xs-12 col-lg-8"> <div class="row"> <div class="col-md-4"></div> <div class="col-md-8"> <div class="row"> <div class="col-sm-6"></div> <div class="col-sm-6"></div> </div> </div> </div> </div> </div>
Flexbox magic

Flexbox was chosen for maximum versatility, and because frankly, it's the future. It works in all browsers, with the exception of IE10- (though it will work in 10 with the addition of ms- prefixes). Let's start with the first benefit: your columns can finally align themselves vertically. Just tell a row to .align-middle or .align-bottom to put your columns into position.

.align-middle
.align-bottom
<!-- Holy cow, you can align nested elements? --> <div class="row"> <div class="col-sm-6"> <div class="row align-middle"> <div class="col-xs-2"></div> <div class="col-xs-10">.align-middle</div> </div> </div> <div class="col-sm-6"> <div class="row align-bottom"> <div class="col-xs-2"></div> <div class="col-xs-10">.align-bottom</div> </div> </div> </div>

You can even align horizontally (not a particular challenge, but Sally makes it extra easy), completely eliminating the need for offset columns in most use-cases. Flexbox magic.

.align-left
.align-center
.align-right
<div class="row align-left"> <div class="col-xs-5">.align-left</div> </div> <div class="row align-center"> <div class="col-xs-5">.align-center</div> </div> <div class="row align-right"> <div class="col-xs-5">.align-right</div> </div>
Media Queries & Responsiveness

Sally uses media queries to serve its scalable grid, using device-width. Styling is added from the smallest sizes up, to preserve processing power on smaller devices. Four break points are included, and each is easily customizable. Go ahead and play around.

Extra small Small Medium Large
Width 0-479px 480-800px 801-1000px 1001px +
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
Container width None (auto) None (auto) None (auto) 970px
Font size 10px 12px 14px 14px
Installation

Call me a hipster, but you shouldn't need to install a ruby gem to get started on your next project. I want you to see and modify the code directly. Just copy and paste all 67 lines of Sally into your next project.

Built Open

Sally is meant to be truly open source. Use it freely under the MIT License any way you'd like. If you'd like to support this project, please share Sally with the world.