fedup-responsive-grid
v1.0.0
Published
A super flexible grid utilising classes in the markup.
Downloads
2
Readme
responsive-grid
We use a responsive grid component to build all of the layouts on the site. This grid is used entirely with classes in the markup. This means we can keep the layout of pages separate from from the other modules.
Installation
component install fed-up/responsive-grid
Usage
The grid is made up of these parts:
- Grid classes
- Size classes
- Visibility classes
- Spacing classes
With these it is possible to create layouts for any device without needing to write any new CSS. This means the CSS will scale regardless of how many new pages are added.
The Grid
The grid itself consists of 12 columns with a max width of 960px. The grid has no gutters and the columns sit flush against each other. The reason for this is that we can use fixed percentages for the widths of columns, for example, with 2 columns, each column is 50%. Using percentages this way means the grid is responsive. The width of the grid can change, but those two columns will always be 2 columns.
This is possible because of the box-sizing:border-box
property. This allows us to then add padding and border to the columns without making the columns wider.
Class Prefixes
Every class in this package is prefixed with rg-
. This is just a namespace for the classes so they are easily identifable.
Breakpoints
The grid has 5 breakpoints.
- up to 320px (4 columns)
- 480px (6 columns)
- 640px (8 columns)
- 800px (10 columns)
- 960px (12 columns)
These aren't based on devices, they all fall on columns on the grid. The breakpoints are all set in em units so they are relative to the font size.
As the window size decreases there are few columns available. This means that at 960px and above, we're using a 12 column grid, at 800px we're using a 10 column grid and so forth.
Size Classes
The main layout classes are based on the grid columns:
<div class="rg-1of12"></div>
This will make the div 1 column wide when there are 12 columns available. If we change this:
<div class="rg-2of10"></div>
This will no be 2 columns wide when there are 10 columns available. This is between 800px and 960px.
These classes are available for each breakpoint, for example:
.rg-1of4
.rg-1of6
.rg-1of8
.rg-1of10
.rg-1of12
etc...
Mobile First
The sizing classes are all mobile-first. What this means is that if you apply a class of .rg-2of4
(50%) this will work at every breakpoint above it, so you don't need to do this:
<div class="rg-1of4 rg-3of6 rg-4of8 rg-5of10 rg-6of12"></div>
Instead, you can do this:
<div class="rg-1of4 rg-3of6"></div>
And this will be carried up to each higher breakpoint. It will be 1 column at 4 columns wide (320px) and 2 columns wide at 6 columns and higher.
Grid Units
You obviously need more than just widths. You want these columns to sit next to each other. For this you need to setup a few classes:
<div class="rg-Grid">
<div class="rg-Unit rg-3of6"></div>
<div class="rg-Unit rg-3of6"></div>
</div>
The rg-Unit
class makes the element inline-block and the rg-Grid
class makes them sit flush next to each other. Think of rg-Grid
as a row of columns. We structure it like this so that nesting of grids is possible. This allows an infinite number of layouts.
Page Class
Most of the time you don't want the grid sitting on the left of the screen. For this you want to center everything in the middle of the page and set the max width of the grid.
<div class="rg-Page"> <!-- Centers the grid -->
<div class="rg-Grid"> <!-- Aligns the grid units -->
<div class="rg-Unit rg-3of6"></div> <!-- A grid unit -->
<div class="rg-Unit rg-3of6"></div>
</div>
</div>
Visibility Classes
Showing and hiding elements at breakpoints
With responsive design there are often times when you want to show and hide elements at different breakpoints. There are visibility classes for this:
<div class="rg-Grid">
<div class="rg-Unit rg-3of6 rg-invisibleAt4 rg-visibleAt12">
Only shown at 12 columns or higher
</div>
<div class="rg-Unit rg-3of6 rg-invisibleAt12">
Only shown below 12 columns
</div>
</div>
There are two types of classes rg-invisibleAtX
and rg-visibleAtX
.
Spacing Classes
One of the key parts of writing maintainable CSS is separating the layout from the decoration. Having spacing classes in our html as part of the layout means that our other CSS modules don't need to include padding or margin, making them even more flexible.
The spacing classes are used to add padding and margin at different breakpoints. Just like the size classes they are mobile first.
<div class="rg-mx3at4"></div>
<div class="rg-pt4at4"></div>
There are two types of spacing classes - margin and padding. Then spacing can be applied on all sides, top, left, bottom, right, horizontally (left and right) and vertically (top and bottom).
They can then be multiple sizes: 0px, 5px, 10px, 20px, 40px, 60px
.
Finally, they can be applied at specific breakpoints.
Using these factors we can build up the classes we need. For example, if we want 20px padding on the top only at 12 columns wide:
rg-pt4at12
Lets break it down:
pt
- Padding top4
- 4th largest size (20px)at12
- Only at 12 columns
Here are some examples of the various sizes you can choose:
p
- This will apply padding on all sidespt
- Padding on the toppr
- Padding on the rightpb
- Padding on the bottompl
- Padding on the leftpx
- Padding on the left and rightpy
- Padding on the top and bottom
You can replace the p
in all these examples to use margin instead of padding.
Mobile First
As with the sizing classes, these are mobile first, so you don't need to apply spacing at every breakpoint, just at the lowest point.
For example, if you wanted 20px padding on all sides at every breakpoint, just apply it at 4 columns: rg-p4at4
. This will affect every breakpoint above it.
Development & Testing
If you want to work on this project, don't edit the CSS file directly. Edit the Sass files and rebuild the CSS file. To build it you can run this:
component install --dev && make build