Use these guidelines for customizing webpages and adhering to the defined grid.
MCC's uses the Bourbon Neat responsive grid framework on a 16-column grid with a gutter of 20px between columns. The column grid changes depending on which of four breakpoints the viewport is using.
MCC uses scalable units like ems instead of fixed-sized units like pixels.
Breakpoints
Breakpoints
| Name |
Value |
| Break Small |
20 em width or less |
| Break Medium |
Between 20 and 45 em |
| Break Large |
Between 45 and 70 em |
Tweakpoints
Tweakpoints
| Name |
Value |
| Tweak Medium |
Between 33.75 and 68 em |
| Tweak Large |
Greater than 68 em |
Helper Classes
Structure
Structure Helper Classes
| Class |
Description |
.clearfix |
Clears any floats that might disrupt a layout (HTML5 Boilerplate) |
Visibility
Visibility Helper Classes
| Class |
Description |
.hide-small |
Hides item in the small breakpoint |
.hide-medium |
Hides item in the medium breakpoint |
.hide-large |
Hides item in the large breakpoint |
.hide-xl |
Hides item in the XL breakpoint |
.hiddenFields |
Hides item generated by Low Googlesearch plugin |
.hidden |
Hides item visually and from screen readers (HTML5 Boilerplate) |
.visuallyhidden |
Hides item visually but available for screen readers (HTML5 Boilerplate) |
.invisible |
Hides item visually and from screen readers but maintains layout (HTML5 Boilerplate) |
