Settings for Your Grid Set
You can set some specific options for your grid in the Downloads section:
- 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
.wrapperclass 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:
- Embedded CSS Link
- Add this CSS link to your page’s
headto 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
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 firstname.lastname@example.org and we will reset it for you. Here is what you get:
- 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.
- 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.
- Gridset generates an
.scssfile 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.
- 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.