Set Assets

In-depth specifications on each of the assets available for your grid set.

Settings for Your Grid Set

You can set some specific options for your grid in the Downloads section:

Grid set settings
Grid interface
Displays the current version of the interface used for this grid. If we make major updates and changes the interface, we will allow you to keep older versions for previously made grid sets. You can update a set to the latest interface any time in this area.
Content container class
Enter the class name you are using for any content wrappers/containers here. This will allow Gridset’s overlay to line up with your site’s grid. For example, you might have a .wrapper class that centers your content on the page. By adding that class here, your grid overlay will match up with your content. This will not affect your CSS output.
Grid(s) to serve to IE 8 and below
Versions of Internet Explorer earlier than 9 do not read media queries, so if you have more than one grid width you need to select a grid (or multiple grids) to use for IE 8 and below. You will only see this option if you have more than one grid at different widths.

Rapid Prototyping Helpers

Gridset provides embeddable assets to help you quickly start building prototypes with your grids. Here is what you get:

Grid set embeds
Embedded CSS Link
Add this CSS link to your page’s head to have your grid’s CSS compressed and served directly to your site. This link will also automatically serve your IE grids to older versions of IE (by detecting the user agent), so you don’t need to worry about writing any conditional IE comments.
Please note: This link is limited to 500 page views per hour, and could be subject to momentary downtime, so we highly recommend that this link is only used in development, not on sites that are live to the public.
Overlay Script
The overlay script allows you to overlay your grids on your site, so that you can make sure everything stays on grid, and you can have a quick reference to your classes. Just copy the script tag as provided, and paste it just inside the end of your body tag. There is no limit to the number of page views for this script. Read more about it in Adding Gridset CSS and Javascript. Grid set overlay

Downloads

You can also download a zip file of any assets you need. If you have made a Pay as You Go purchase of your set, you will be limited to five downloads. If you have any troubles with your download please email support@gridsetapp.com and we will reset it for you. Here is what you get:

Grid set downloads
PNGs for Raster Output
PNGs are perfect for porting your grids to Adobe Photoshop, Adobe Fireworks, or any raster-based application. You will receive one PNG for each grid.
CSS
Gridset generates all the CSS you could need, with every measurement and class ready to go, making it perfect for rapid prototyping. You will receive a folder with the CSS and versions, along with versions for different IE versions. Read more about the CSS files in Adding the Gridset CSS.
Sass
Gridset generates an .scss file to make working with your grids much easier, and allow you to create smaller, more performant layout CSS. Read more about the Sass ouput in Sass functions & mixins.
Overlay Javascript
The overlay script allows you to overlay your grids on your site, so that you can make sure everything stays on grid, and you can have a quick reference to your classes. Read more about it in Adding Gridset CSS and Javascript.
Demo HTML for Quicker Development
We provide a demo.html page to help you quickly get started with all of these assets. The demo page shows you how to properly link up the files, and how to apply classes.

Now learn how to cheat at math using Gridset ]