Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Frank Browne
Frank Browne
Courses Plus Student 834 Points

Gridulator - how to download

When I saved the filre in my css folder it presented differently in sublime text than the instructor's did in the treehouse demonstration. I see the following in sublime text for my grid.css file = ???

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!-- saved from url=(0022)http://gridulator.com/ --> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" class=" js canvas canvastext geolocation crosswindowmessaging websqldatabase indexeddb hashchange historymanagement draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache svg smil svgclippaths fontface"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Gridulator: Make pixel grids, lickety-split</title>
<meta name="description" content="A quick and easy grid calculator for pixel pros (and novices).">
<link rel="stylesheet" href="./grid_files/styles.css" type="text/css" media="all">
<!--[if lt IE 8]><link rel="stylesheet" href="css/ie-lt-8.css?20101005" type="text/css" media="all" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="css/ie-8.css?20101005" type="text/css" media="all" /><![endif]-->
<link rel="shortcut icon" href="http://gridulator.com/favicon.ico">
<link rel="apple-touch-icon" href="http://gridulator.com/apple-touch-icon.png">
<script type="text/javascript" async="" src="./grid_files/ga.js"></script><script src="./grid_files/jquery.min.js" type="text/javascript"></script>
<script src="./grid_files/modernizr.js" type="text/javascript"></script>
<script src="./grid_files/core.js" type="text/javascript"></script>
<script src="./grid_files/saved_resource" type="text/javascript"></script><script type="text/javascript" src="./grid_files/saved_resource(1)"></script>

<script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-24729072-2']); _gaq.push(['_trackPageview']); (function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> </head> <body id="www-gridulator-com">

<div id="header"> <div id="badge"><a href="http://www.stuntbox.com/" title="Stuntbox">From Stunbox, with love.</a></div> <div id="header-outer"> <div id="header-inner"> <h1>Gridulator</h1> <h2>Make pixel grids, lickety-split.</h2> <div id="calculator"> <fieldset class="width"> <label for="width">Overall Width</label> <input type="text" name="width" id="width" value="960"> <button id="increase-width" class="increase">Increase Width</button><button id="decrease-width" class="decrease">Decrease Width</button></fieldset> <fieldset class="columns"> <label for="columns"># of Columns</label> <input type="text" name="columns" id="columns" value="8"> <button id="increase-columns" class="increase">Increase Columns</button><button id="decrease-columns" class="decrease">Decrease Columns</button></fieldset> </div> </div> </div> </div><table id="results" summary="Possible grid layouts for a 960 pixel wide layout with 8 columns."><thead><tr><th></th><th id="column-width">Column Width</th><th id="gutter-width">Gutter Width</th><th></th></tr></thead><tbody><tr><td><button class="preview">Preview</button></td><td headers="column-width">120</td><td headers="gutter-width">0</td><td><form action="http://gridulator.com/php/make-grid.php" method="post"><button class="make-grid" type="submit">Make PNG</button><input type="hidden" name="width" value="960"><input type="hidden" name="columns" value="8"><input type="hidden" name="column_width" value="120"><input type="hidden" name="gutter_width" value="0"></form></td></tr><tr><td><button class="preview">Preview</button></td><td headers="column-width">113</td><td headers="gutter-width">8</td><td><form action="http://gridulator.com/php/make-grid.php" method="post"><button class="make-grid" type="submit">Make PNG</button><input type="hidden" name="width" value="960"><input type="hidden" name="columns" value="8"><input type="hidden" name="column_width" value="113"><input type="hidden" name="gutter_width" value="8"></form></td></tr><tr><td><button class="preview">Preview</button></td><td headers="column-width">106</td><td headers="gutter-width">16</td><td><form action="http://gridulator.com/php/make-grid.php" method="post"><button class="make-grid" type="submit">Make PNG</button><input type="hidden" name="width" value="960"><input type="hidden" name="columns" value="8"><input type="hidden" name="column_width" value="106"><input type="hidden" name="gutter_width" value="16"></form></td></tr><tr><td><button class="preview">Preview</button></td><td headers="column-width">99</td><td headers="gutter-width">24</td><td><form action="http://gridulator.com/php/make-grid.php" method="post"><button class="make-grid" type="submit">Make PNG</button><input type="hidden" name="width" value="960"><input type="hidden" name="columns" value="8"><input type="hidden" name="column_width" value="99"><input type="hidden" name="gutter_width" value="24"></form></td></tr><tr><td><button class="preview">Preview</button></td><td headers="column-width">92</td><td headers="gutter-width">32</td><td><form action="http://gridulator.com/php/make-grid.php" method="post"><button class="make-grid" type="submit">Make PNG</button><input type="hidden" name="width" value="960"><input type="hidden" name="columns" value="8"><input type="hidden" name="column_width" value="92"><input type="hidden" name="gutter_width" value="32"></form></td></tr><tr><td><button class="preview">Preview</button></td><td headers="column-width">85</td><td headers="gutter-width">40</td><td><form action="http://gridulator.com/php/make-grid.php" method="post"><button class="make-grid" type="submit">Make PNG</button><input type="hidden" name="width" value="960"><input type="hidden" name="columns" value="8"><input type="hidden" name="column_width" value="85"><input type="hidden" name="gutter_width" value="40"></form></td></tr><tr><td><button class="preview">Preview</button></td><td headers="column-width">78</td><td headers="gutter-width">48</td><td><form action="http://gridulator.com/php/make-grid.php" method="post"><button class="make-grid" type="submit">Make PNG</button><input type="hidden" name="width" value="960"><input type="hidden" name="columns" value="8"><input type="hidden" name="column_width" value="78"><input type="hidden" name="gutter_width" value="48"></form></td></tr><tr><td><button class="preview">Preview</button></td><td headers="column-width">71</td><td headers="gutter-width">56</td><td><form action="http://gridulator.com/php/make-grid.php" method="post"><button class="make-grid" type="submit">Make PNG</button><input type="hidden" name="width" value="960"><input type="hidden" name="columns" value="8"><input type="hidden" name="column_width" value="71"><input type="hidden" name="gutter_width" value="56"></form></td></tr><tr><td><button class="preview">Preview</button></td><td headers="column-width">64</td><td headers="gutter-width">64</td><td><form action="http://gridulator.com/php/make-grid.php" method="post"><button class="make-grid" type="submit">Make PNG</button><input type="hidden" name="width" value="960"><input type="hidden" name="columns" value="8"><input type="hidden" name="column_width" value="64"><input type="hidden" name="gutter_width" value="64"></form></td></tr></tbody></table>

<div id="footer"><ul><li><kbd>W</kbd> select width</li><li><kbd>C</kbd> select columns</li><li><kbd>??</kbd> adjust value</li><li><kbd>esc</kbd> clear alert</li><li><kbd>P</kbd> show all previews</li></ul> <p id="copyright">© 2010-2011 Stuntbox, LLC • <a href="http://stuntbox.com/blog/2010/09/say-hello-to-gridulator/" title="Stuntbox: Say Hello to Gridulator">What's all this then?</a> • <a href="http://gridulator.wufoo.com/forms/m7x3p9/" title="Contact Gridulator">Contact</a></p> </div>

</body></html>

3 Answers

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Allison created the grid.css file by hand, based off the calculator at gridulator.

Here's how you use it:

  1. Download the project files for the video
  2. Unzip the files
  3. Create a link element that references css/grid.css

This works the same way as an <a> by using the href attribture This assume that all of your css files are in a folder named css

Let us know if you have anymore questions.

Frank Browne
PLUS
Frank Browne
Courses Plus Student 834 Points
Frank Browne
Frank Browne
Courses Plus Student 834 Points

Thank You very much. I got it now

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

@Frank - You're very welcome.

Let us know here on the forum if/when you have more questions.