Integrating with Your HTML

How to set up and use your grid set on your website.

Gridset provides a couple of different ways to use your sets in your site’s HTML. You can either use our Quick Prototyping Links to get started straightaway, or you can download your assets and host the files yourself. This section will teach you how to get both up and running, as well as when it is recommended to use either method.

Adding the Gridset CSS

Add your Embeddable CSS Link to the head of your site, or download and host your set’s CSS on your own server. Learn which method is best for the different phases of your process.

Adding the Overlay Script

Gridset’s overlay script is a quick and useful reference for building your layouts or prototypes. Learn how to apply the script and toggle your grid overlays on and off.

Using the CSS Classes

Your CSS will give you every class you could need for building layouts with your grids. Learn the Gridset class syntax and the benefits of each generated classes for your set.

Sass functions & mixins

Gridset generates an .scss file to make working with your grids much easier, and allow you to create smaller, more performant layout CSS.

CSS Optimization

Learn how to use Gridset’s Cheat Sheets or Sass output to build a custom grid CSS using only what you need.

Get started by first adding your grid set CSS ]