From d0eca42e0c4f26a5269d38b90ce5c9ff2bb3628e Mon Sep 17 00:00:00 2001 From: Adam Kaplan Date: Sun, 16 Feb 2014 14:56:19 -0600 Subject: [PATCH] updates project to use mobile first --- README.md | 196 ++++++++++++------------- grid.css | 356 ++++++++++++++++++++++----------------------- index.html | 416 +++++++++++++++++++++++++++++------------------------ 3 files changed, 495 insertions(+), 473 deletions(-) diff --git a/README.md b/README.md index ac91a2d..57ba29a 100644 --- a/README.md +++ b/README.md @@ -3,7 +3,6 @@ A simple guide to responsive design.
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. + +``` + + +``` + +####2. Add the Viewport Meta Tag Place in the `` of your HTML. This enables use of media queries for cross-device layouts. ``` ``` -####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%; } ``` ``` -
+
+ +
``` ####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! ```
-
+
+ +
+
+ +
+
+ +
``` ####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. ```
-
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
-
- -
-
-
-
-
+
+ +
+
+ +
+ ``` ``` -.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/). + +``` +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+``` ``` .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. ```
-
-
-
-
- -
-
-
-
+
+
+ +
+
+ +
-``` - -####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/) diff --git a/grid.css b/grid.css index 717a9a0..c2235fd 100644 --- a/grid.css +++ b/grid.css @@ -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; } diff --git a/index.html b/index.html index c9135cb..698b79c 100644 --- a/index.html +++ b/index.html @@ -5,19 +5,19 @@ Grid - + - - + + - + @@ -33,21 +33,19 @@ -
+
- -

grid

- +

grid

A simple guide to responsive design.
Made by Adam Kaplan.

- Intro + Intro
- RWD + Mobile First

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.

@@ -61,17 +59,62 @@

A Fragmented World

-

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.

+

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!

+
+
+

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.”

+ —Ethan Marcotte +
+
+
+ +
+
+ Mobile First +
+
+ +
+
+

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.

+
+
1
+

Not All Browsers are Created Equal

+

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, + which will render elements more consistently cross-browser. Remember to include it as-is before your stylesheet.

+
+ +
+
+ +
+
+
2

Add the Viewport Meta Tag

-

Place in the <head> of your HTML. This enables use of media queries for cross-device layouts. +

Place in the <head> of your HTML. This enables use of media queries for cross-device layouts.

@@ -86,30 +129,30 @@

CSS Box Model

-

It's important to understand the basics, like how elements are generated and behave in the browser, before +

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.

-
-
+
+
content

Content

The content of the box, where text and images appear.

-
+
padding

Padding

Clears an area around the content.

-
+
border

Border

A border that goes around the padding.

-
+
margin

Margin

Clears an area around the border.

@@ -120,7 +163,7 @@
-
2
+
3

Use box-sizing: border-box

Place at the top of your CSS file. The * will target all elements on the page.

@@ -128,16 +171,15 @@
-

Your Choice

What was once a bug - 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.

-
+
Without Box Model

Without box-sizing: border-box

@@ -155,9 +197,9 @@
-
3
+
4

Create a Container

-

A container holds all elements and controls the page's maximum width. Using a container will make designing for +

A container holds all elements and controls the page’s maximum width. Using a container will make designing for responsive easier!

@@ -173,203 +215,196 @@
-
4
+
5

Create a Column

-

A column is a class used for stacking content horizontally. The first margin is removed using the - pseudo-class first-child.

+

With mobile first, columns are block level (takes up the full width available) by default. No + additional styles needed!

- - +
-
+
.column
+ +
+ .column +
+ +
+ .column +
+ +
+ .column +
-
5
+
6

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.

+
+ + +
+
-
-
-
-
- .column .full -
-
- -
-
- .column .two-thirds -
- -
- .column .one-third -
-
- -
-
- .column .half -
- -
- .column .half -
-
- -
-
- .column .one-third -
- -
- .column .one-third -
- -
- .column .one-third -
-
- -
-
- .column .one-fourth -
- -
- .column .one-fourth -
- -
- .column .one-fourth -
- -
- .column .one-fourth -
+
+
+
+
+ .column .full
-
-
-
-
6
-

Create Rows

-

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 clearfix or overflow: hidden. This clearfix was - created by Nicolas Gallagher:

-
- - - -
-
- -
-
-
-
- .column .half -
- -
- .column .half -
+
+
+ .column .two-thirds
-
-
- .column .one-third -
- -
- .column .one-third -
- -
- .column .one-third -
+
+ .column .third
-
-
-
-
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.

-
- -
-
+
+
+ .column .half +
-
-
-
-
-
- .column .half -
- -
- .column .half -
-
- -
-
- .column .one-third -
- -
- .column .one-third -
- -
- .column .one-third -
-
+
+ .column .half
-
-
-
-

Practice Makes Perfect

-

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.

-
-

View the code for this project.

+
+
+ .column .third +
+ +
+ .column .third +
+ +
+ .column .third +
-
-
-
+
+
+ .column .fourth +
+ +
+ .column .fourth +
+ +
+ .column .fourth +
+ +
+ .column .fourth +
+
+
+
+ +
+
+
7
+

Create Rows

+

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 clearfix, which was created by + Nicolas Gallagher.

+
+ + +
+
+ +
+
+
+
+ .column .half +
+ +
+ .column .half +
+
+ +
+
+ .column .half +
+ +
+ .column .half +
+
+
+
+ +
+
+

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.

+
+ + +
+
+ +
+
+
+
+ .column .half .flow-opposite +
+ +
+ .column .half +
+
+
+
+ +
+
+

Practice Makes Perfect

+

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.

+
+

View the Code

+
+
+ +
+
+

Further Reading

@@ -378,11 +413,12 @@