EDX Grid Pattern

A customisable, fully responsive grid system with multiple breakpoints that we use for multiple Erskine projects.

For implementing this module into a project take a look at the docs.

Features

• Fluid grid with fixed gutters.
• Multiple breakpoints for fine control over responsive components.
• Breakpoint specific grid columns.
• Push grid columns left or right and center smaller columns.
• No .clear, .start, .end or .last classes.

Dependencies

• Sass
• Compass
• Breakpoint

Additions to be made

• [] Add support for older browsers that don’t parse REM units with Compass.
• Use the latest release of Breakpoint.
• Set breakpoints with Sass maps. This way we won’t need to loop over the respond-to mixin over and over again.
• Set colors to specific breakpoints (ie. medium == red, large == blue, etc.)
• Shorten the length of grid column class names to g--12--medium.
• Place underscores in front of variables / mixins that are not global.
• Need to turn off certain parts of the grid system by default. We need some kind of directory structure for a module’s settings, config and imports.

Acknowledgements

• Griddle by Nicholas Gallagher
• csswizardry-grid by Harry Roberts
• Better, simpler grid systems by Phil Walton