A pretty awesome responsive grid framework. How's this different from other frameworks? Well, this one builds breakpoints based on a grid. Lets say you have a 12 column grid, 960px wide, we can create breakpoints at columns 4, 6, 8, 12. The framework will generate classes for building layouts, spacing classes and comes with a bunch of mixins as well.
- Build a fluid grid based on variables
- Mobile-first
- Divide the grid at columns in breakpoints
- Build responsive layouts entirely with classes
- Use customizable and responsive spacing classes
- Mixins and functions for building layouts in Sass
- Fallbacks for browsers with no media query support
- All based on percentages and ems
- Responsive visiblity helper classes to show/hide content at breakpoints
- Expose breakpoints to allow the JS modules to emit events at breakpoints
- Multiple ways to provide fallbacks
- Really simple API
bower install fonzie-responsive-grid
@import "./components/fonzie-responsive-grid/index";
Or if you add an import path to ./components/fonzie-responsive-grid you can just do:
@import "responsive-grid";
You'll need to setup your grid: (These are the defaults)
// The maximum grid width
$rg-width: 960px;
// The grid font size. This is how we use ems
$rg-font-size: 16px;
// The total number of columns
$rg-columns: 12;
// The columns at which breakpoints will occur
$rg-breakpoints: 4 6 8 10 12;The responsive-grid include will create a bunch of classes for constructing
grids using just the HTML.
@include responsive-grid;
You can also pass through a couple of variables:
@include responsive-grid($spacing: 5px 10px 20px, $layout: false);
This will use 5px, 10px and 15px as the spacing sizes and disable the layout classes. Check index.scss for the rest of the parameters.
If there is only a single breakpoint, we'll assume that it's a fallback. So make a seperate stylesheet for browsers that don't do media queries and set the breakpoints to just one point.
$rg-breakpoints: 12;