Adding the Gridset CSS
When you are ready to use your grids on your site, you have two options for adding your set’s CSS to your site. You can either add the Embeddable CSS Link to your site, or you can download your CSS files and host them on your server. In this section, we will go over how to implement both, and the unique benefits of each.
Embeddable CSS Link
You will find your CSS link in the Downloads section for your grid set, under the heading Quick Prototyping Links. Just copy the entire
link tag and paste it within the
head tag on your HTML pages. You will have immediate access to your grid CSS as long as you have a internet connection.
<head> <meta charset="utf-8"> <title>Gridset Demo</title> <link href="https://get.gridsetapp.com/216/" rel="stylesheet" /> </head>
All files served from our servers are automatically compressed (gzipped), and our server will detect the browser of the user visiting your site to automatically serve either the regular CSS, or the IE specific grid(s).
This CSS file is served from get.gridsetapp.com and has a limit of 500 page views per hour, meaning that while this is a very quick and useful way to start building your layouts, the Embeddable CSS Link is recommended only for prototyping and development, not live sites.
Downloading your CSS
You can also download all of your grid set’s CSS files in the Downloads section. In your download ZIP file, you will find a folder named css that will contain all of your CSS files, with alternate versions for Internet Explorer (IE). The folder will also contain an .htaccess file that will automatically gzip your CSS on request. If you are already using .htaccess to gzip files on your site (as HTML5 Boilerplate and other frameworks do), you will want to delete this file.
If you have a grid of 14 columns or more, you will see additional files in your folder. These files are imported into the full gridset-ie.css in order to work around IE’s selector limitations. Regardless of how many files you have, the implementation should work the same.
Copy the entire CSS folder to your project and call the CSS files as you would any other CSS file.
<head> <meta charset="utf-8"> <title>Gridset Demo</title> <link href="./css/gridset.css" rel="stylesheet" /> </head>
By default, your ZIP download should contain a demo.html file that is already linked up. This file also has examples of how to use your grid set’s generated CSS classes.
The downloaded CSS does not automatically switch based on your browser, so you will want to make sure to also link your IE CSS files in an IE conditional comment. A full implementation of the downloadable CSS could look like so:
<head> <meta charset="utf-8"> <title>Gridset Demo</title> ><!--[if (!IE) | (gt IE 9)]><!--> <link rel="stylesheet" href="./css/gridset.css" /> <!--<![endif]--> <!--[if IE 9]> <link rel="stylesheet" href="./css/gridset-ie-9.css" /> <![endif]--> <!--[if lte IE 8]> <link rel="stylesheet" href="./css/gridset-ie-lte8.css" /> <![endif]-->
Refer to your demo.html file for the exact setup you will need for your set. For more about how these conditionals work with Gridset, read Smarter IE conditionals, v1.2.
Adding the Overlay Script
Also found in Downloads, you can easily add the Gridset Overlay Script to your site’s pages by copying the entire script and pasting it just before the end of your
… … <script src="https://get.gridsetapp.com/216/overlay/"></script> </body>
Once this has been added, you can pull up an overlay of your set’s grids on your pages by either hitting Cmd + g (Ctrl + g in Windows), or you can just add
?gridset=show to the end of your page’s URL.
To align the overlay with your content, set your Container Class in Settings to the same
class you are using to define the
max-width) of your content. This is set to
.wrapper by default.
Fluid grids are applicable anywhere, within any element on a page, and you can apply a grid’s overlay anywhere you like, as well. By adding a
* is the prefix of the grid you want) to the element in which you want the grid overlay to apply, your grids will show up where you want them, rather than overlaying the entire page. Note: You do not need the
*-showgrid class to use the grid; this class only controls where the grid overlay is shown.
Read more about Gridset classes to get the most out of your grids and overlays.