Skip to content

Commit

Permalink
Update grid docs with mobile-first grid info
Browse files Browse the repository at this point in the history 
This commit updates the Grids documentation with the following:

* How to generate a mobile-first grid
* How to use rework-pure-grids
* Examples
* Removal of partials/examples that don't apply anymore
  • Loading branch information
@tilomitra
tilomitra committed Dec 27, 2013
1 parent 85e68ee commit 990b51d
Show file tree
Hide file tree
Showing 7 changed files with 119 additions and 99 deletions.
146 changes: 93 additions & 53 deletions views/pages/grids.handlebars
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{{setTitle "Grids"}}
{{setSubTitle "Fully customizable and responsive CSS grids."}}
{{setSubTitle "Mobile-first CSS grids."}}
{{setActiveNav "grids"}}

{{addLocalCSS "/css/grids.css"}}
Expand All @@ -12,13 +12,13 @@
{{sectionHeading "Introduction to Pure Grids"}}

<p>
Pure Grids are easy to work with, and very powerful. There are a few simple concepts to keep in mind:
Pure has a responsive, mobile-first grid system. It's easy to work with and is very powerful.There are a few simple concepts to keep in mind:
</p>

<dl>
<dt>Grid classes vs. unit classes</dt>
<dd>
Pure Grids consist of two types of classes: grid classes ({{code "pure-g"}} or {{code "pure-g-r"}}) and unit classes ({{code "pure-u"}} or {{code "pure-u-*"}})
Pure Grids consist of two types of classes: grid classes ({{code "pure-g"}} and unit classes ({{code "pure-u"}} or {{code "pure-u-*"}})
</dd>

<dt>The widths of the units are fractions</dt>
Expand All @@ -28,7 +28,7 @@

<dt>All child elements of a grid must be units</dt>
<dd>
Child elements contained within an element with a {{code "pure-g"}} classname <em>must</em> be a grid unit with a {{code "pure-u"}} or {{code "pure-u-*"}} classname.
Child elements contained within an element with a {{code "pure-g"}} classname <em>must</em> be a grid unit with a {{code "pure-u"}} or {{code "pure-u-*"}} classname. However, you can have a {{code "pure-g"}} inside a {{code "pure-u-*"}} if you want to create nested grids.
</dd>

<dt>Content goes inside grid units<dt>
Expand Down Expand Up @@ -85,82 +85,128 @@
</p>


{{sectionHeading "Pure Responsive Grids"}}
{{sectionHeading "Mobile-first Grids"}}

<p>
Pure Responsive Grids builds on top of the base Grids. It adds a single new classname called {{code "pure-g-r"}} (the "r" stands for responsive, you see). You can use this instead of using {{code "pure-g"}} as you normally do. All elements with a classname of {{code "pure-u-*-*"}} will automatically become responsive and collapse to {{code "width: 100%;"}} when the viewport's width is {{code "767px"}} or lower.
Pure Grids are mobile-first. When writing your HTML, you should start with the mobile layout in mind, and build up your tablet and desktop experience from it.
</p>
<p>
We realize that different applications need grids at different media query breakpoints, so we don't bundle media queries directly into Pure. Instead, you can define your own media queries, and generate a custom grid using our <a href="https://github.com/ericf/rework-pure-grids">Pure Grids Rework plugin</a>.
</p>

<h3>Regular Grid vs. Responsive Grid</h3>
<h3>Generate Mobile-first Grid Units</h3>

<p>
The first snippet below shows how regular Pure Grids are written. These grids are unresponsive. They'll always be one-thirds, irrespective of the width of the screen. The second snippet replaces the {{code "pure-g"}} with {{code "pure-g-r"}}, thereby making the one-third columns collapse to {{code "width: 100%;"}} on lower screen widths ({{code "767px"}} by default).
To generate Mobile-first grid units, you need to have <a href="http://nodejs.org" alt="NodeJS">NodeJS and <a href="http://npmjs.org" alt="npm">npm</a> installed. Then, run the following:
</p>

{{#code}}
{{> grids/compare-nr}}
$ npm i rework rework-pure-grids
{{/code}}

{{#code}}
{{> grids/compare-r}}
<p>
To create a mobile-first grid, pass in the media queries that you want to work with, and provide a class name for the grid at each media query:
</p>

{{#code "js"}}
var fs = require('fs'),
rework = require('rework'),
pureGrids = require('rework-pure-grids');

//Generate a 12-column grid, which responds to the following 2 media query breakpoints.
var css = rework('').use(pureGrids.units([5,24], {
mediaQueries: {
med : 'screen and (min-width: 48em)',
lrg : 'screen and (min-width: 75em)'
}
})).toString();

fs.writeFile('mobile-first-grid.css', css, function (err) {
if (err) throw err;
console.log('File saved to mobile-first-grid.css');
});
{{/code}}

<h3>Responsive Grid: An Example</h3>
<p>
The table above will create a 24-column mobile-first grid with the following characteristics:
</p>

<p>
Resize the page to see the grid collapse.
<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th></th>
<th>Small Devices <br><small>(< 48em)</small></th>
<th>Medium Devices <br><small>(≥ 48em)</small></th>
<th>Large Devices <br><small>(≥ 75em)</small></th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-weight: bold;">Class Prefix</td>
<td>none ({{code "pure-u-*"}})</td>
<td>{{code "pure-u-med-*"}}</td>
<td>{{code "pure-u-lrg-*"}}</td>
</tr>
</tbody>
</table>
</p>

{{> grids/four-col}}
<p>
This responsive grid that we just created is actually the same grid that this site is built on! You can <a href="/css/responsive-grid.css" alt="Grid CSS">check out the CSS here</a>.
</p>

<aside>
<p>
When using our Rework plugin, you can customize your grid in various ways, such as changing the number of columns or modifying grid class names.
</p>
</aside>

{{sectionHeading "Grids on Mobile"}}

<h3>Using Mobile-first Grids</h3>
<p>
Putting the {{code "pure-g"}} classname on the wrapper instead of {{code "pure-g-r"}} will ensure that grid units will not collapse on small screens. This is a good way to make grids on smaller screens like phones.
After generating our mobile-first grid, we can start creating some dynamic layouts that look great irrespective of the width of a device. For example, if you want your columns to be full-width on mobile, half-width on medium devices (like tablets), and quarter-width on large devices (like desktops), you would write this:
</p>

{{> grids/mobile-col}}
{{#code}}
<!-- Columns are 100% wide on mobile, 50% on tablets, and 25% on desktops -->
<div class="pure-g">
<div class="pure-u-1 pure-u-med-1-2 pure-u-lrg-1-4">Some content</div>
<div class="pure-u-1 pure-u-med-1-2 pure-u-lrg-1-4">Some content/div>
<div class="pure-u-1 pure-u-med-1-2 pure-u-lrg-1-4">Some content</div>
<div class="pure-u-1 pure-u-med-1-2 pure-u-lrg-1-4">Some content</div>
</div>
{{/code}}

<aside>
<p>
You don't need to add all the grid classes to each of your elements. The grid classes work with widths that are greater than or equal to the media query width that you defined. For example, a {{code "pure-u-med-1-2"}} will be {{code "width: 50%"}} at all screen sizes which are {{code "≥ 768px"}}, unless you specify an explicit {{code "pure-u-lrg-*"}} class.
</p>
</aside>

{{sectionHeading "Grid Helper Classes"}}
<h3>Adding Mobile-first Grids to your Site</h3>

<p>
Pure's Responsive Grids also comes with the following helper classes to show or hide content at different screen widths.
Once you have your responsive grid CSS, you can add it below the {{code "pure-min.css"}} file on your page.
</p>

<table class="pure-table pure-table-bordered">
<thead>
<tr>
<th>Helper Class Name</th>
<th>Description</th>
</tr>
</thead>
{{#code}}
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/{{pure.version}}/pure-min.css">
<link rel="stylesheet" href="your-mobile-first-grid.css">
{{/code}}


<h3>Mobile-first Grid: An Example</h3>

<tbody>
<tr>
<td>{{code "pure-hidden-phone"}}</td>
<td>
Content marked with this class will be hidden below {{code "768px"}}
</td>
</tr>
<p>
Resize the page to see the content switch from a single column layout to a four-column layout.
</p>

<tr>
<td>{{code "pure-hidden-tablet"}}</td>
<td>
Content marked with this class will be hidden between {{code "768px"}} and {{code "979px"}}
</td>
</tr>
{{> grids/four-col}}

<tr>
<td>{{code "pure-hidden-desktop"}}</td>
<td>
Content marked with this class will be hidden above {{code "980px"}}
</td>
</tr>
</tbody>
</table>
{{sectionHeading "Fluid Images"}}

{{> grids/fluid-images}}

{{sectionHeading "Applying Padding and Borders to Grid Units"}}

Expand Down Expand Up @@ -206,10 +252,4 @@
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/{{pure.version}}/grids-min.css">
{{/code}}

<aside>
<p>
Optionally, you can head over to the <a href="http://yui.github.io/gridbuilder/">Grid Builder</a> to make your very own grid with custom media query breakpoints and column sizes. Save the outputted CSS in a file and you're good to go!
</p>
</aside>

</div>
7 changes: 0 additions & 7 deletions views/partials/grids/compare-nr.handlebars
View file

This file was deleted.

7 changes: 0 additions & 7 deletions views/partials/grids/compare-r.handlebars
View file

This file was deleted.

3 changes: 1 addition & 2 deletions views/partials/grids/custom-font.handlebars
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,7 @@ the `body`. Pure Grids use specific font stacks to ensure the greatest
OS/browser compatibility.
*/
body,
.pure-g [class *= "pure-u"],
.pure-g-r [class *= "pure-u"] {
.pure-g [class *= "pure-u"] {
/* Set your content font stack here: */
font-family: Georgia, Times, "Times New Roman", serif;
}
Expand Down
17 changes: 17 additions & 0 deletions views/partials/grids/fluid-images.handlebars
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<p>
When using images inside grid units, you may want them to grow and shrink with the grid. To accomplish this, add the {{code "img-responsive"}} class to the {{code "<img>"}} element.
</p>
<div class="pure-g">
<div class="pure-u-1-2 pure-u-med-1-4">
<img class="img-responsive" src="http://farm3.staticflickr.com/2875/9069037713_1752f5daeb.jpg" alt="Peyto Lake">
</div>
<div class="pure-u-1-2 pure-u-med-1-4">
<img class="img-responsive" src="http://farm3.staticflickr.com/2813/9069585985_80da8db54f.jpg" alt="Train">
</div>
<div class="pure-u-1-2 pure-u-med-1-4">
<img class="img-responsive" src="http://farm6.staticflickr.com/5456/9121446012_c1640e42d0.jpg" alt="T-Shirt Store">
</div>
<div class="pure-u-1-2 pure-u-med-1-4">
<img class="img-responsive" src="http://farm8.staticflickr.com/7357/9086701425_fda3024927.jpg" alt="Mountain">
</div>
</div>
16 changes: 8 additions & 8 deletions views/partials/grids/four-col.handlebars
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="pure-g-r grid-example">
<div class="pure-u-1-2">
<div class="pure-g grid-example">
<div class="pure-u-1 pure-u-med-1-2 pure-u-lrg-1-4">
<div class="l-box">
<h3>Fast</h3>
<p>
Expand All @@ -8,7 +8,7 @@
</div>
</div>

<div class="pure-u-1-2">
<div class="pure-u-1 pure-u-med-1-2 pure-u-lrg-1-4">
<div class="l-box">
<h3>Complete</h3>
<p>
Expand All @@ -17,7 +17,7 @@
</div>
</div>

<div class="pure-u-1-2">
<div class="pure-u-1 pure-u-med-1-2 pure-u-lrg-1-4">
<div class="l-box">
<h3>Industrial Strength</h3>
<p>
Expand All @@ -26,7 +26,7 @@
</div>
</div>

<div class="pure-u-1-2">
<div class="pure-u-1 pure-u-med-1-2 pure-u-lrg-1-4">
<div class="l-box">
<h3>Free and Open</h3>
<p>
Expand All @@ -36,11 +36,11 @@
</div>

<div class="pure-u-1 l-centered">
<img src="http://24.media.tumblr.com/31f24c22894d6d46a7b6f4b0687db9cd/tumblr_mnh0uemhCk1st5lhmo1_1280.jpg"
<img class="img-responsive" src="http://24.media.tumblr.com/31f24c22894d6d46a7b6f4b0687db9cd/tumblr_mnh0uemhCk1st5lhmo1_1280.jpg"
alt="Sample image of a meeting for a responsive image example.">
</div>

<div class="pure-u-2-5">
<div class="pure-u-1 pure-u-med-2-5">
<div class="l-box">
<h3>Two-Fifth Column</h3>
<p>
Expand All @@ -49,7 +49,7 @@
</div>
</div>

<div class="pure-u-3-5">
<div class="pure-u-1 pure-u-med-3-5">
<div class="l-box">
<h3>Three-Fifth Column</h3>
<p>
Expand Down
22 changes: 0 additions & 22 deletions views/partials/grids/mobile-col.handlebars
View file

This file was deleted.

0 comments on commit 990b51d

Please sign in to comment.