Creating a custom CSS grid
Since we're mastering RWD, we have the luxury of creating our own CSS grid. However, we need to work smart, not hard. So what we're going to do is leverage the Variable Grid System app and combine its result with our own approach, making a mobile-first, fluid, custom build, and solid CSS grid from which we can create robust responsive designs.
Let's lay out our CSS grid requirements:
It should have 12 columns.
It should be 1200px wide to account for 1280px screens.
It should be fluid, with relative units (percentages) for the columns and gutters.
It should use the mobile-first approach.
It should use the SCSS syntax.
It should be reusable for other projects.
It should be simple to use and understand.
It should be easily scalable.
Here's what our 1200 pixel wide and 12-column width 20px grid looks like:
The left and right padding in black are 10px each. We'll convert those 10px into percentages at the end of this process.
Doing the math
We're going to use the RWD magic formula...
