Manhattan
GITHUB

A powerful, mobile-first responsive framework built on Bourbon Neat.

Grid System

Manhattan includes a responsive, mobile-first fluid grid system similar to Bootstrap 3 but built on Bourbon Sass. It includes predefined classes for easy layout options as well as powerful mixins for generating more semantic layouts.

Unlike Bootstrap 3, Manhattan uses margin's rather than padding to accomplish column spacing. Unlike BS3, you can accomplish fluid, margin-less columns also (explained later).

Responsive Patterns

Manhattan is very similar to BS3 in structure. The grid system is built around a mobile-first approach and includes 4 primary column sizes:

Examples

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-4
.col-md-8
.col-md-6
.col-md-6

Omega Helper

Responsive omega helpers allow you to dynamically shift the omega of the grid based on screen size. Omega is the removal of the column margin, learn more on the Bourbon Neat docs. You can use the following omega helpers:

Apply the omega helper to the wrapper element:

.row.omega-sm-2.omega-md-3.omega-lg-4
.col-lg-3.col-sm-6.col-xs-12.col-md-4
.col-lg-3.col-sm-6.col-xs-12.col-md-4
.col-lg-3.col-sm-6.col-xs-12.col-md-4
.col-lg-3.col-sm-6.col-xs-12.col-md-4
.col-lg-3.col-sm-6.col-xs-12.col-md-4
.col-lg-3.col-sm-6.col-xs-12.col-md-4
.col-lg-3.col-sm-6.col-xs-12.col-md-4
.col-lg-3.col-sm-6.col-xs-12.col-md-4

Collapse Helper

Sometimes you want a grid layout without margins, each column pressed against each other without a gap. To accomplish this, simply use the collapse helper. It's as simple as creating a regular column for whatever size and adding collapse in the class.

.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-3
.col-sm-collapse-6
.col-sm-collapse-6
.col-sm-collapse-4
.col-sm-collapse-4
.col-sm-collapse-4

This simply takes advantage of Bourbon Neat's span-column mixin. Take a look at the Bourbon Neat docs for more details.

Centering

.col-md-6.col-md-centered

Offsetting Columns

Move columns left and right with a variety of classes

.col-md-2
.col-md-8.col-md-offset-2
.col-md-4
.col-md-4.col-md-offset-4

Column Ordering

Similar to BS3, there is a built-in class for reodering columns.

.col-md-4 .col-md-push-8
.col-md-8 .col-md-pull-4
(1) .col-md-3.col-md-push-9
(2) .col-md-4.col-md-push-2
(3) .col-md-5.col-md-pull-7

Nesting

Nest as much as you'd like.

.col-sm-12
.col-sm-8.col-sm-offset-3
.col-sm-4 .padless
.col-sm-6
.col-sm-6
.col-sm-8 .padless
.col-sm-6
.col-sm-6

Notice the .padless class will allow you to remove the padding from a column or row

Responsive Mixins

Easy-to-use mixins for making responsive customizations

        
          +media-xs
            // css for > xs breakpoint only

          +media-sm
            // css for > sm breakpoint

          +media-xs-sm
            // css for < md breakpoint

          +media-sm-only
            // css for > sm, < md

          +media-sm-md-only
            // css for > sm, < lg
            
          +media-md
            // css for > md
            
          +media-lg
            // css for > lg