Gridset CSS Optimization

How to use Gridset’s tools to optimize your CSS for better performance.

Custom CSS Using Cheat Sheets

Your grid set’s Cheat Sheets will give you every possible measurement for your grid, allowing you to write completely custom CSS for absolute optimization. By using this technique, your pages will load only what your layout needs, rather than loading every possible combination of spans and offsets.

Grid set cheat sheet

It is best to use the full CSS files provided to give you flexibility when building prototypes and finding the best layouts for your content, but once the layout has been decided, pull up your grid set’s Cheat Sheets and start going through every element that uses a Gridset class in your HTML. Find the corresponding class in your Cheat Sheet, copy the width and/or margin-left offset and apply it to the appropriate, semantic selector into your own custom CSS file. Then go ahead and remove the Gridset classes and CSS links from your HTML.

Gridset and Sass

Along with your downloaded CSS, Gridset provides a gridset.scss file complete with Sass mixins and functions derived from your grid set measurements. The Gridset Sass output will allow you to keep your CSS semantic and use only the measurements and styles you need to build your own custom layout CSS.

Learn more about Gridset Sass functions & mixins ]