diff --git a/grid.css b/grid.css index cd6235f..be24187 100644 --- a/grid.css +++ b/grid.css @@ -340,6 +340,25 @@ img { .row-example .row { padding: 1rem 0 0 0; } } +.gutters { + border: 2px dashed #eee; + margin-bottom: 2rem; + max-width: 39rem; + padding: 1rem 1rem 0 1rem; +} + +.gutters .column { + background: #fb917e; + margin-bottom: 1rem; +} + +.gutters span { + background: #f8f8f8; + color: #999; + display: block; + padding: 1rem 0; +} + /* Box Model ========================================================================== */ @@ -356,7 +375,7 @@ img { .gist .gist-file { font-size: .9rem !important; margin: 0 auto; - max-width: 750px; + max-width: 39rem; overflow: hidden !important; text-align: left; } diff --git a/index.html b/index.html index f45751a..b1ae599 100644 --- a/index.html +++ b/index.html @@ -18,12 +18,12 @@ - +
-
+

grid

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

@@ -33,7 +33,7 @@
-
+
Mobile First

Why bother with responsive?

We want our websites to be useable on all devices by responding to @@ -46,16 +46,16 @@

-
+

A Fragmented World

-

As of 2013, there are thousands +

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 @@ -77,7 +77,7 @@

-
+

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 @@ -88,7 +88,7 @@

-
+
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 @@ -100,7 +100,7 @@

-
+
2

Add the Viewport Meta Tag

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

@@ -151,7 +151,7 @@
-
+
3

Use box-sizing: border-box

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

@@ -185,7 +185,7 @@
-
+
4

Create a Container

A container holds all elements and controls the page’s maximum width. Using a container will make designing for @@ -203,7 +203,7 @@

-
+
5

Create a Column

With mobile first, columns are block level (takes up the full width available) by default. No @@ -234,12 +234,27 @@

-
+
6

Create Column Sizes

On larger screens, columns gain float: left in order to stack content horizontally. Columns now use padding for gutters, so you no longer need to worry about removing margins.

+
+ +
+
+
+ .column .half +
+ +
+ .column .half +
+
+
+ +
@@ -308,7 +323,7 @@
-
+
7

Create Rows

Columns are wrapped in rows to prevent other elements from stacking next to them, otherwise known as clearing @@ -345,7 +360,7 @@

-
+

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.

@@ -370,7 +385,7 @@
-
+

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, @@ -391,7 +406,7 @@

  • A Book Apart: Responsive Web Design
  • Beginner’s Guide to Responsive Web Design
  • Box-sizing: Border-box FTW
    • -
  • Don't Forget the Viewport Meta Tag
    • +
  • Don’t Forget the Viewport Meta Tag
  • The Many Faces of ‘Mobile First’
  • Understanding the Humble Clearfix