sjs/grid
1
0
Fork 0
mirror of https://github.com/samsonjs/grid.git synced 2026-03-25 09:05:51 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

updates project to use mobile first

Browse source
This commit is contained in:
Adam Kaplan 2014-02-16 14:56:19 -06:00
parent c0802a72a6
commit d0eca42e0c
3 changed files with 495 additions and 473 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

196
README.md
View file

@ -3,7 +3,6 @@
A simple guide to responsive design.<br>
www.adamkaplan.me/grid
####Why bother with responsive?
We want our websites to be useable on all devices by responding to the user’s behavior, screen size and screen orientation.
@ -12,15 +11,30 @@ We want our websites to be useable on all devices by responding to the user’s
As of 2013, there are thousands of different devices and screen sizes that browse the internet, so it's impossible to design layouts to target them all. Instead, we must take a more fluid approach to design.
####Mobile First
The term “mobile first” gets thrown around a lot lately. What it really means is to start with mobile styles and layer on styles optimized for larger screens only as needed. In other words, your mobile styles become the default and you no longer have to override them later. It’s much simpler!
####Min-width Media Queries
Introduce layout-specific rules only when you need them. Use `min-width` to layer complexity on your layout as the viewport widens. It’s easier to have all the media queries nearby, rather than at the end of the stylesheet or in a separate document.
##Steps
####1. Add the Viewport Meta Tag
####2. Not All Browsers are Created oqual
Browsers will render your CSS differently. To avoid this, it’s a good idea to use a modern alternative to a reset like [Normalize.css](http://necolas.github.io/normalize.css/), which will render elements more consistently cross-browser. Remember to include it as-is before your stylesheet.
```
<link rel="stylesheet" href="/css/normalize.css" type="text/css">
<link rel="stylesheet" href="/css/grid.css" type="text/css">
```
####2. Add the Viewport Meta Tag
Place in the `<head>` of your HTML. This enables use of media queries for cross-device layouts.
```
<meta name="viewport" content="width=device-width, initial-scale=1">
```
####2. Use box-sizing: border-box
####3. Use box-sizing: border-box
Place at the top of your CSS file. The `*` will target all elements on the page.
```
*, *:before, *:after {
@ -35,93 +49,92 @@ A container holds all elements and controls the page's maximum width. Using a co
```
.container {
margin: 0 auto;
max-width: 960px;
max-width: 48rem;
width: 90%;
}
```
```
<div class="container"></div>
<div class="container">
<!--Your Content-->
</div>
```
####4. Create a Column
A column is a class used for stacking content horizontally. The first margin is removed using the pseudo-class `first-child`.
```
.column {
float: left;
margin-left: 5%;
}
.column:first-child {
margin-left: 0;
}
```
With mobile first, columns are `block` level (takes up the full width available) by default. No additional styles needed!
```
<div class="container">
<div class="column"></div>
<div class="column">
<!--Your Content-->
</div>
<div class="column">
<!--Your Content-->
</div>
<div class="column">
<!--Your Content-->
</div>
</div>
```
####5. Create Column Sizes
Add size classes to columns to create a reuseable grid system.
On larger screens, columns gain `float: left` in order to stack content horizontally. Columns now use padding for gutters, so we no longer need to worry about removing margins.
```
<div class="container">
<div class="row">
<div class="column full"></div>
</div>
<div class="row">
<div class="column two-thirds"></div>
<div class="column one-third"></div>
</div>
<div class="row">
<div class="column half"></div>
<div class="column half"></div>
</div>
<div class="row">
<div class="column one-third"></div>
<div class="column one-third"></div>
<div class="column one-third"></div>
</div>
<div class="row">
<div class="column one-fourth"></div>
<div class="column one-fourth"></div>
<div class="column one-fourth"></div>
<div class="column one-fourth"></div>
<div class="column half">
<!--Your Content-->
</div>
<div class="column half">
<!--Your Content-->
</div>
</div>
</div>
```
```
.column.full {
width: 100%;
}
.column.two-thirds {
width: 65%;
}
.column.half {
width: 47.5%;
}
.column.one-third {
width: 30%;
}
.column.one-fourth {
width: 21.25%;
@media (min-width: 40rem) {
.column {
float: left;
padding-left: 1rem;
padding-right: 1rem;
}
.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%; }
.column.third { width: 33.3%; }
.column.fourth { width: 24.95%; }
.column.flow-opposite { float: right; }
}
```
####6. Create Rows
Columns are wrapped in rows to prevent other elements from stacking next to them, otherwise know as clearing issues. Rows are cleared with either a `clearfix` or `overflow: hidden`. This clearfix was created by [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/).
Columns are wrapped in rows to prevent other elements from stacking next to them, otherwise know as clearing issues. Rows are cleared using the popular `clearfix`, which was created by [Nicolas Gallagher](http://nicolasgallagher.com/micro-clearfix-hack/).
```
<div class="container">
<div class="row clearfix">
<div class="column half">
<!--Your Content-->
</div>
<div class="column half">
<!--Your Content-->
</div>
</div>
<div class="row clearfix">
<div class="column half">
<!--Your Content-->
</div>
<div class="column half">
<!--Your Content-->
</div>
</div>
</div>
```
```
.clearfix:before,
@ -129,64 +142,53 @@ Columns are wrapped in rows to prevent other elements from stacking next to them
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
```
```
.row {
overflow: hidden;
}
```
#### Flow Opposite
Add the class `.flow-opposite` to columns where you want content to display first on mobile but appear on the right on larger screens.
```
<div class="container">
<div class="row">
<div class="column half"></div>
<div class="column half"></div>
</div>
<div class="row">
<div class="column one-third"></div>
<div class="column one-third"></div>
<div class="column one-third"></div>
<div class="row clearfix">
<div class="column half flow-opposite">
<!--Your Content-->
</div>
<div class="column half">
<!--Your Content-->
</div>
</div>
</div>
```
####7. Add a Mobile Breakpoint
If the browser's screen size is within a set range, a media query will replace the CSS the browser uses. This is the bread and butter of responsive web design.
```
@media screen and (max-width: 640px) {
.column.full,
.column.two-thirds,
.column.half,
.column.one-third,
.column.one-fourth {
float: none;
margin: 0;
width: 100%;
}
```
@media (min-width: 40rem) {
.column.flow-opposite { float: right; }
}
```
####Further Reading
* [For a Future-Friendly Web](http://alistapart.com/article/for-a-future-friendly-web)
* [A Book Apart: Mobile First](http://www.abookapart.com/products/mobile-first)
* [A Book Apart: Responsive Web Design](http://www.abookapart.com/products/responsive-web-design)
* [Don't Forget the Viewport Meta Tag](http://dev.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972)
* [Understanding the Humble Clearfix](http://fuseinteractive.ca/blog/understanding-humble-clearfix)
* [Beginner’s Guide to Responsive Web Design](http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design)
* [Box-sizing: Border-box FTW](http://www.paulirish.com/2012/box-sizing-border-box-ftw/)
* [Don't Forget the Viewport Meta Tag](http://dev.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972)
* [The Many Faces of ‘Mobile First’](http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/)
* [Understanding the Humble Clearfix](http://fuseinteractive.ca/blog/understanding-humble-clearfix)
####References
* [Android Fragmentation Visualized](http://opensignal.com/reports/fragmentation-2013/)
* [Internet Explorer Box Model](http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug)
* [Animate.css](http://daneden.github.io/animate.css/)
* [Box Model](http://developer.mozilla.org/en-US/docs/Web/CSS/box_model)
* [Chrome Developer Tools](http://developers.google.com/chrome-developer-tools/)
* [Animate.css](http://daneden.github.io/animate.css/)
* [Code samples by GitHub Gist](https://gist.github.com/aekaplan)
* [Internet Explorer Box Model](http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug)
* [Progressive Enhancement](http://coding.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/)

356
grid.css
View file

@ -7,12 +7,20 @@
}
html {
font: 112%/1.5 "Open Sans", sans-serif;
font: 100%/1.5 "Open Sans", sans-serif;
font-weight: 400;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
@media (min-width: 40rem) {
html { font-size: 112%; }
}
@media (min-width: 64rem) {
html { font-size: 120%; }
}
body {
background-color: #fff;
color: #555;
@ -20,20 +28,21 @@ body {
.container {
margin: 0 auto;
max-width: 1000px;
max-width: 53rem;
width: 90%;
}
/* Header
-------------------------------------------------------------- */
header {
background: #ec6f66;
overflow: hidden;
background-color: #497bad;
text-align: center;
}
.intro {
margin: 4rem 0;
.intro { margin: 2rem 0; }
@media (min-width: 40rem) {
.intro { margin: 4rem 0; }
}
header h1 {
@ -59,12 +68,15 @@ header a {
text-decoration: underline;
}
header a:hover {
text-decoration: none;
header a:hover { text-decoration: none; }
.mobile {
margin: 0 auto;
max-width: 150px;
}
header img {
margin: 0 auto;
@media (min-width: 40rem) {
.mobile { max-width: 250px; }
}
/* Section
@ -72,66 +84,33 @@ header img {
section {
border-top: 1px solid #eee;
text-align: center;
padding: 4rem 0;
padding: 2rem 0;
}
section:first-of-type {
border-top: none;
section:first-of-type { border-top: none; }
@media (min-width: 40rem) {
section { padding: 4rem 0; }
}
section.resources {
text-align: left:
}
.example {
border-top: none;
background: #ec6f66;
color: #fff;
}
.example p {
color: rgba(255,255,255,0.7);
}
.example img {
margin: 0;
}
.fragmentation {
background-image: url("/images/grid/fragmentation.png");
background-size: cover;
min-height: 500px;
}
/* Grid
/* Mobile First Grid
-------------------------------------------------------------- */
.column {
float: left;
margin-left: 5%;
}
.column { margin-bottom: 1.5rem; }
.column:first-child {
margin-left: 0;
}
@media (min-width: 40rem) {
.column {
float: left;
margin: 0;
padding-left: 1rem;
padding-right: 1rem;
}
.column.full {
width: 100%;
}
.column.two-thirds {
width: 65%;
}
.column.half {
width: 47.5%;
}
.column.one-third {
width: 30%;
}
.column.one-fourth {
width: 21.25%;
.column.full { width: 100%; }
.column.two-thirds { width: 66.7%; }
.column.half { width: 50%; }
.column.third { width: 33.3%; }
.column.fourth { width: 24.95%; }
.column.flow-opposite { float: right; }
}
/* Typography
@ -142,11 +121,15 @@ h1, h2, h3, h4, h5 {
}
h1 {
font-size: 1.5rem;
font-size: 1.3rem;
line-height: 1.3em;
margin-bottom: 1.5rem;
}
@media (min-width: 40rem) {
h1 { font-size: 1.5rem; }
}
h3 {
font-size: 1.2rem;
margin-bottom: .5rem;
@ -158,6 +141,16 @@ p {
max-width: 30rem;
}
blockquote { margin: 0; }
blockquote p {
color: #bbb;
font-style: italic;
margin-bottom: 1.5rem;
}
cite { color: #bbb; }
code {
background-color: #f8f8f8;
-moz-border-radius: 3px;
@ -181,12 +174,38 @@ ul {
/* Links
-------------------------------------------------------------- */
a {
color: #ec6f66;
color: #497bad;
text-decoration: none;
}
a:hover {
text-decoration: underline;
a:hover { text-decoration: underline; }
/* Buttons
-------------------------------------------------------------- */
.button {
background-color: #497bad;
border-radius: 3px;
color: #fff;
cursor: pointer;
display: block;
font-size: 1rem;
font-weight: 600;
padding: 0.7rem 1.5rem;
position: relative;
vertical-align: middle;
white-space: nowrap;
}
.button:hover {
background: #5183b6;
text-decoration: none;
}
@media (min-width: 40rem) {
.button {
display: inline-block;
font-size: 0.9rem;
}
}
/* Elements
@ -194,14 +213,16 @@ a:hover {
hr {
border: 0;
border-top: 1px solid #ddd;
margin: 2em auto;
margin: 2rem auto;
width: 3rem;
}
hr.small {
margin: 1.5em auto;
@media (min-width: 40rem) {
hr { margin: 2.5rem auto; }
}
hr.small { margin: 1.5rem auto; }
.circle {
border: 3px solid #555;
border-radius: 50%;
@ -226,8 +247,74 @@ img {
}
.rwd {
margin: 0 auto 1.5em auto;
max-width: 380px;
margin: 0 auto 1.5rem auto;
max-width: 440px;
}
/* Examples
-------------------------------------------------------------- */
.example {
border-top: none;
background-color: #497bad;
color: #fff;
}
.example p { color: rgba(255,255,255,0.7); }
.example img { margin: 0; }
.fragmentation {
background-image: url("/images/grid/fragmentation.png");
background-size: cover;
min-height: 250px;
}
@media (min-width: 40rem) {
.fragmentation { min-height: 500px; }
}
.mobile-first .column {
float: none;
margin-bottom: 1rem;
}
.grid { text-align: center; }
.grid span {
background: rgba(225,255,255,0.1);
border: 2px solid rgba(255,255,255,0.2);
display: block;
padding: 1rem;
font-size: 0.9rem;
font-weight: 600;
}
.grid .container {
border: 2px dashed rgba(255,255,255,0.3);
padding: 1rem 1rem 0 1rem;
}
@media (min-width: 40rem) {
.grid .container { padding: 1rem 0 0 0; }
}
.grid .column { margin-bottom: 1rem; }
.row-example .container {
border: 2px dashed rgba(255,255,255,0.2);
padding: 1rem;
}
.row-example .row {
background: rgba(225,255,255,0.1);
border: 2px solid rgba(255,255,255,0.2);
padding: 1rem 1rem 0 1rem;
margin-bottom: 1rem;
}
.row-example .row:last-of-type { margin-bottom: 0; }
@media (min-width: 40rem) {
.row-example .row { padding: 1rem 0 0 0; }
}
/* Box Model
@ -239,78 +326,6 @@ img {
.padding { color: #c2ddb6; }
.content { color: #9ec3e5; }
/* Grid
-------------------------------------------------------------- */
.grid {
text-align: center;
}
.grid span {
font-size: 0.9em;
font-weight: 600;
}
.grid .container {
border: 2px dashed rgba(255,255,255,0.3);
padding: 2em;
}
.grid .row {
overflow: hidden;
margin-top: 1.5em;
}
.grid .row:first-child {
margin-top: 0;
}
.grid .column {
border: 2px solid #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
background: rgba(225,255,255,0.1);
padding: 1.5em;
}
/* Grid Row Example
-------------------------------------------------------------- */
.row-example .container{
border: 2px dashed rgba(255,255,255,0.2);
padding: 2em;
}
.row-example .row {
background: rgba(225,255,255,0.1);
border: 2px dashed #fff;
padding: 2em;
}
/* Grid Mobile
-------------------------------------------------------------- */
.mobile-background {
background-image: url("/images/grid/mobile.png");
background-size: 286px 600px;
width: 286px;
height: 600px;
margin: 0 auto;
}
.container.mobile {
border: none;
max-width: 320px;
padding: 106px 24px 0;
}
.container.mobile .row {
margin: 0;
}
.container.mobile .column {
margin: 0 0 18px 0;
padding: 16.5px;
width: 100%;
}
/* Gist Overrides
-------------------------------------------------------------- */
.gist .gist-file {
@ -335,7 +350,7 @@ img {
font-weight: normal !important;
}
/* animate.css by Daniel Eden
/* Animate.css by Daniel Eden
-------------------------------------------------------------- */
.animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeInUp {
0% {
@ -390,49 +405,18 @@ img {
animation-name: fadeInUp;
}
/* #Clearfix by Nicolas Gallagher
/* Utilities
-------------------------------------------------------------- */
.container:before,
.container:after,
.row:before,
.row:after,
.cf:before,
.cf:after {
.remove-padding { padding-bottom: 0; }
.remove-border { border: none; }
/* Clearfix by Nicolas Gallagher
-------------------------------------------------------------- */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.container:after,
.row-example:after,
.cf:after {
clear: both;
}
.container,
.row-example,
.cf {
*zoom: 1;
}
/* Media Queries
-------------------------------------------------------------- */
@media screen and (max-width: 640px) {
html { font-size: 100%; }
section { padding: 2rem 0; }
hr { margin: 2rem auto; }
.intro { margin: 2rem 0; }
.fragmentation { min-height: 250px; }
.column.full,
.column.two-thirds,
.column.half,
.column.one-third,
.column.one-fourth {
float: none;
margin: 2em 0 0 0;
width: 100%;
}
.column:first-child { margin-top: 0; }
.container.mobile .column { padding: 18px; }
}
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

416
index.html
View file

@ -5,19 +5,19 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Grid</title>
<meta name="description" content="A simple responsive framework.">
<meta name="description" content="A simple guide to responsive design.">
<!-- Mobile Specific Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSS -->
<link rel="stylesheet" href="/css/normalize.css" type="text/css" />
<link rel="stylesheet" href="/css/grid.css" type="text/css" />
<link rel="stylesheet" href="/css/normalize.css" type="text/css">
<link rel="stylesheet" href="/css/grid.css" type="text/css">
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
<!-- Typekit -->
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
<!-- Scripts -->
@ -33,21 +33,19 @@
</head>
<body>
<header>
<header class="clearfix">
<div class='container'>
<div class="intro">
<a href="/grid">
<h1>grid</h1>
</a>
<a href="/grid"><h1>grid</h1></a>
<p>A simple guide to responsive design.<br>Made by <a href="/" target="_blank">Adam Kaplan</a>.</p>
</div>
<img src="/images/grid/intro.png" alt="Intro" class="animated fadeInUp">
<img src="/images/grid/mobile.png" alt="Intro" class="mobile animated fadeInUp">
</div>
</header>
<section>
<div class='container'>
<img src="/images/grid/rwd.png" alt="RWD" class="rwd">
<img src="/images/grid/mobile-first.png" alt="Mobile First" class="rwd">
<h1>Why bother with responsive?</h1>
<p>We want our websites to be useable on all devices by responding to
the user’s behavior, screen size and screen orientation.</p>
@ -61,17 +59,62 @@
<section>
<div class='container'>
<h1>A Fragmented World</h1>
<p><a href='http://opensignal.com/reports/fragmentation-2013/' target="_blank">As of 2013</a>, there are thousands of different devices and screen sizes that browse the
internet, so it's impossible to design layouts to target them all. Instead, we must take a more fluid approach to
design.</p>
<p><a href='http://opensignal.com/reports/fragmentation-2013/' target="_blank">As of 2013</a>, there are thousands
of different devices and screen sizes that browse the internet, so it’s impossible to design layouts to target them
all. Instead, we must take a more fluid approach to design.</p>
</div>
</section>
<section>
<div class='container'>
<h1>Mobile First</h1>
<p>The term “mobile first” gets thrown around a lot lately. What it really means is to start with mobile
styles and layer on styles optimized for larger screens only as needed. In other words, your mobile styles become
the default and you no longer have to override them later. It’s much simpler!</p>
<hr>
<blockquote>
<p>By assuming a flexible but simple layout by default, you can better guard against browsers—with viewports wide
and small—that aren’t quite capable of the full responsive layout. “Mobile first” really means “progressive
enhancement.”</p>
<cite>—Ethan Marcotte</cite>
</blockquote>
</div>
</section>
<section class="example quote remove-padding">
<div class="container">
<img src="/images/grid/small-large.png" alt="Mobile First">
</div>
</section>
<section>
<div class='container'>
<h1>Min-width Media Queries</h1>
<p>Introduce layout-specific rules only when you need them. Use <code>min-width</code> to layer complexity on your
layout as the viewport widens. It’s easier to have all the media queries nearby, rather than at the end
of the stylesheet or in a separate document.</p>
<hr>
<script src="https://gist.github.com/aekaplan/8969695.js"></script>
</div>
</section>
<section>
<div class='container'>
<div class="circle">1</div>
<h1>Not All Browsers are Created Equal</h1>
<p>Browsers will render your CSS differently. To avoid this, it’s a good idea to use a modern
alternative to a reset like <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>,
which will render elements more consistently cross-browser. Remember to include it as-is before your stylesheet.</p>
<hr>
<script src="https://gist.github.com/aekaplan/8969436.js"></script>
</div>
</section>
<section>
<div class='container'>
<div class="circle">2</div>
<h1>Add the Viewport Meta Tag</h1>
<p>Place in the <code>&lt;head&gt;</code> of your HTML. This enables use of media queries for cross-device layouts.
<p>Place in the <code>&lt;head&gt;</code> of your HTML. This enables use of media queries for cross-device layouts.</p>
<hr>
<script src="https://gist.github.com/aekaplan/8243831.js"></script>
</div>
@ -86,30 +129,30 @@
<section>
<div class="container">
<h1>CSS Box Model</h1>
<p>It's important to understand the basics, like how elements are generated and behave in the browser, before
<p>It’s important to understand the basics, like how elements are generated and behave in the browser, before
diving into responsive web design. The CSS Box Model consists of four distinct parts.</p>
<hr>
<div class="row">
<div class="column one-fourth">
<div class="row clearfix">
<div class="column fourth">
<img src="/images/grid/content.png" alt="content">
<h3 class="content">Content</h3>
<p>The content of the box, where text and images appear.</p>
</div>
<div class="column one-fourth">
<div class="column fourth">
<img src="/images/grid/padding.png" alt="padding">
<h3 class="padding">Padding</h3>
<p>Clears an area around the content.</p>
</div>
<div class="column one-fourth">
<div class="column fourth">
<img src="/images/grid/border.png" alt="border">
<h3 class="border">Border</h3>
<p>A border that goes around the padding.</p>
</div>
<div class="column one-fourth">
<div class="column fourth">
<img src="/images/grid/margin.png" alt="margin">
<h3 class="margin">Margin</h3>
<p>Clears an area around the border.</p>
@ -120,7 +163,7 @@
<section>
<div class='container'>
<div class="circle">2</div>
<div class="circle">3</div>
<h1>Use box-sizing: border-box</h1>
<p>Place at the top of your <code>CSS</code> file. The <code>*</code> will target all elements on the page.</p>
<hr>
@ -128,16 +171,15 @@
</div>
</section>
<section>
<div class="container">
<h1>Your Choice</h1>
<p><a href="http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug" target="_blank">What was once a bug</a>
is now widely used CSS property. It basically means you can choose whether or not to include borders and padding in
is now a widely used CSS property. It basically means you can choose whether or not to include borders and padding in
the width of your content.</p>
<hr>
<div class="row">
<div class="row clearfix">
<div class="column half">
<img src="/images/grid/without-box-model.png" alt="Without Box Model">
<h3>Without box-sizing: border-box</h3>
@ -155,9 +197,9 @@
<section>
<div class='container'>
<div class="circle">3</div>
<div class="circle">4</div>
<h1>Create a Container</h1>
<p>A container holds all elements and controls the page's maximum width. Using a container will make designing for
<p>A container holds all elements and controls the page’s maximum width. Using a container will make designing for
responsive easier!</p>
<hr>
<script src="https://gist.github.com/aekaplan/8246124.js"></script>
@ -173,203 +215,196 @@
<section>
<div class='container'>
<div class="circle">4</div>
<div class="circle">5</div>
<h1>Create a Column</h1>
<p>A column is a class used for stacking content horizontally. The first margin is removed using the
<a href="/pseudo-classes/">pseudo-class</a> <code>first-child</code>.</p>
<p>With mobile first, columns are <code>block</code> level (takes up the full width available) by default. No
additional styles needed!</p>
<hr>
<script src="https://gist.github.com/aekaplan/8246868.js"></script>
<script src="https://gist.github.com/aekaplan/8246935.js"></script>
<script src="https://gist.github.com/aekaplan/8978649.js"></script>
</div>
</section>
<section class="example grid">
<section class="example grid mobile-first">
<div class="container">
<div class="column">
<span>.column</span>
</div>
<div class="column">
<span>.column</span>
</div>
<div class="column">
<span>.column</span>
</div>
<div class="column">
<span>.column</span>
</div>
</div>
</section>
<section>
<div class='container'>
<div class="circle">5</div>
<div class="circle">6</div>
<h1>Create Column Sizes</h1>
<p>Add size classes to columns to create a reuseable grid system.</p>
<hr>
<script src="https://gist.github.com/aekaplan/8247360.js"></script>
<script src="https://gist.github.com/aekaplan/8247386.js"></script>
</div>
</section>
<p>On larger screens, columns gain <code>float: left</code> in order to stack content horizontally. Columns now
use padding for gutters, so we no longer need to worry about removing margins.</p>
<hr>
<script src="https://gist.github.com/aekaplan/8247360.js"></script>
<script src="https://gist.github.com/aekaplan/8978515.js"></script>
</div>
</section>
<section class="example grid">
<div class="container">
<div class="row">
<div class="column full">
<span>.column .full</span>
</div>
</div>
<div class="row">
<div class="column two-thirds">
<span>.column .two-thirds</span>
</div>
<div class="column one-third">
<span>.column .one-third</span>
</div>
</div>
<div class="row">
<div class="column half">
<span>.column .half</span>
</div>
<div class="column half">
<span>.column .half</span>
</div>
</div>
<div class="row">
<div class="column one-third">
<span>.column .one-third</span>
</div>
<div class="column one-third">
<span>.column .one-third</span>
</div>
<div class="column one-third">
<span>.column .one-third</span>
</div>
</div>
<div class="row">
<div class="column one-fourth">
<span>.column .one-fourth</span>
</div>
<div class="column one-fourth">
<span>.column .one-fourth</span>
</div>
<div class="column one-fourth">
<span>.column .one-fourth</span>
</div>
<div class="column one-fourth">
<span>.column .one-fourth</span>
</div>
<section class="example grid">
<div class="container">
<div class="row clearfix">
<div class="column full">
<span>.column .full</span>
</div>
</div>
</section>
<section>
<div class='container'>
<div class="circle">6</div>
<h1>Create Rows</h1>
<p>Columns are wrapped in rows to prevent other elements from stacking next to them, otherwise known as clearing
issues. Rows are cleared with either a <code>clearfix</code> or <code>overflow: hidden</code>. This clearfix was
created by <a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">Nicolas Gallagher</a>:</p>
<hr>
<script src="https://gist.github.com/aekaplan/8467436.js"></script>
<script src="https://gist.github.com/aekaplan/8467460.js"></script>
<script src="https://gist.github.com/aekaplan/8430571.js"></script>
</div>
</section>
<section class="example grid row-example">
<div class="container">
<div class="row clearfix">
<div class="column half">
<span>.column .half</span>
</div>
<div class="column half">
<span>.column .half</span>
</div>
<div class="row clearfix">
<div class="column two-thirds">
<span>.column .two-thirds</span>
</div>
<div class="row clearfix">
<div class="column one-third">
<span>.column .one-third</span>
</div>
<div class="column one-third">
<span>.column .one-third</span>
</div>
<div class="column one-third">
<span>.column .one-third</span>
</div>
<div class="column third">
<span>.column .third</span>
</div>
</div>
</section>
<section>
<div class='container'>
<div class="circle">7</div>
<h1>Add a Mobile Breakpoint</h1>
<p>If the browser's screen size is within a set range, a media query
will replace the CSS the browser uses. This is the bread and butter of
responsive web design.</p>
<hr>
<script src="https://gist.github.com/aekaplan/8430704.js"></script>
</div>
</section>
<div class="row clearfix">
<div class="column half">
<span>.column .half</span>
</div>
<section class="example grid">
<div class="mobile-background">
<div class="container mobile">
<div class="row">
<div class="column half">
<span>.column .half</span>
</div>
<div class="column half">
<span>.column .half</span>
</div>
</div>
<div class="row">
<div class="column one-third">
<span>.column .one-third</span>
</div>
<div class="column one-third">
<span>.column .one-third</span>
</div>
<div class="column one-third">
<span>.column .one-third</span>
</div>
</div>
<div class="column half">
<span>.column .half</span>
</div>
</div>
</section>
<section>
<div class='container'>
<h1>Practice Makes Perfect</h1>
<p>By following these simple steps, you are on the path to responsive
web design mastery. Keep practicing and help make the web a better,
more useable place.</p>
<hr>
<p><a href="https://github.com/aekaplan/grid" target="_blank">View the code for this project</a>.</p>
<div class="row clearfix">
<div class="column third">
<span>.column .third</span>
</div>
<div class="column third">
<span>.column .third</span>
</div>
<div class="column third">
<span>.column .third</span>
</div>
</div>
</section>
<section class="resources">
<div class="container">
<div class="row clearfix">
<div class="column fourth">
<span>.column .fourth</span>
</div>
<div class="column fourth">
<span>.column .fourth</span>
</div>
<div class="column fourth">
<span>.column .fourth</span>
</div>
<div class="column fourth">
<span>.column .fourth</span>
</div>
</div>
</div>
</section>
<section>
<div class='container'>
<div class="circle">7</div>
<h1>Create Rows</h1>
<p>Columns are wrapped in rows to prevent other elements from stacking next to them, otherwise known as clearing
issues. Rows are cleared using the popular <code>clearfix</code>, which was created by
<a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">Nicolas Gallagher</a>.</p>
<hr>
<script src="https://gist.github.com/aekaplan/8430571.js"></script>
<script src="https://gist.github.com/aekaplan/8467436.js"></script>
</div>
</section>
<section class="example grid row-example">
<div class="container">
<div class="row clearfix">
<div class="column half">
<span>.column .half</span>
</div>
<div class="column half">
<span>.column .half</span>
</div>
</div>
<div class="row clearfix">
<div class="column half">
<span>.column .half</span>
</div>
<div class="column half">
<span>.column .half</span>
</div>
</div>
</div>
</section>
<section>
<div class='container'>
<h1>Flow Opposite</h1>
<p>Add the class <code>.flow-opposite</code> to columns where you want content to display first on mobile but
appear on the right on larger screens.</p>
<hr>
<script src="https://gist.github.com/aekaplan/9025378.js"></script>
<script src="https://gist.github.com/aekaplan/9025387.js"></script>
</div>
</section>
<section class="example grid">
<div class="container">
<div class="row clearfix">
<div class="column half flow-opposite">
<span>.column .half .flow-opposite</span>
</div>
<div class="column half">
<span>.column .half</span>
</div>
</div>
</div>
</section>
<section>
<div class='container'>
<h1>Practice Makes Perfect</h1>
<p>By following these simple steps, you are on the path to responsive
web design mastery. Keep practicing and help make the web a better,
more useable place.</p>
<hr>
<p><a href="https://github.com/aekaplan/grid" target="_blank" class="button">View the Code</a></p>
</div>
</section>
<section class="resources">
<div class="container">
<div class="row clearfix">
<div class="column half">
<h3>Further Reading</h3>
<hr class="small">
<ul>
<li><a href="http://alistapart.com/article/for-a-future-friendly-web" target="_blank">For a Future-Friendly Web</a></li>
<li><a href="http://www.abookapart.com/products/mobile-first" target="_blank">A Book Apart: Mobile First</a></li>
<li><a href="http://www.abookapart.com/products/responsive-web-design" target="_blank">A Book Apart: Responsive Web Design</a></li>
<li><a href="http://dev.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972" target="_blank">Don't Forget the Viewport Meta Tag</a></li>
<li><a href="http://fuseinteractive.ca/blog/understanding-humble-clearfix" target="_blank">Understanding the Humble Clearfix</a></li>
<li><a href="http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design" target="_blank">Beginner’s Guide to Responsive Web Design</a></li>
<li><a href="http://www.paulirish.com/2012/box-sizing-border-box-ftw" target="_blank">Box-sizing: Border-box FTW</a></li>
<li><a href="http://dev.tutsplus.com/articles/quick-tip-dont-forget-the-viewport-meta-tag--webdesign-5972" target="_blank">Don't Forget the Viewport Meta Tag</a></li>
<li><a href="http://bradfrostweb.com/blog/mobile/the-many-faces-of-mobile-first/" target="_blank">The Many Faces of ‘Mobile First’</a></li>
<li><a href="http://fuseinteractive.ca/blog/understanding-humble-clearfix" target="_blank">Understanding the Humble Clearfix</a></li>
</ul>
</div>
@ -378,11 +413,12 @@
<hr class="small">
<ul>
<li><a href="http://opensignal.com/reports/fragmentation-2013/" target="_blank">Android Fragmentation Visualized</a></li>
<li><a href="http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug" target="_blank">Internet Explorer Box Model</a></li>
<li><a href="http://daneden.github.io/animate.css/" target="_blank">Animate.css</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model" target="_blank">Box Model</a></li>
<li><a href="https://developers.google.com/chrome-developer-tools/" target="_blank">Chrome Developer Tools</a></li>
<li><a href="http://daneden.github.io/animate.css/" target="_blank">Animate.css</a></li>
<li><a href="https://gist.github.com/aekaplan" target="_blank">Code samples provided by GitHub Gist</a></li>
<li><a href="https://gist.github.com/aekaplan" target="_blank">Code samples by GitHub Gist</a></li>
<li><a href="http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug" target="_blank">Internet Explorer Box Model</a></li>
<li><a href="http://coding.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/" target="_blank">Progressive Enhancement</a></li>
</ul>
</div>
</div>