Mastering Responsive Web Design

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. ...