From 43e017b37ce4bd3108cd8df7bce36b267ab1c50e Mon Sep 17 00:00:00 2001 From: Adam Kaplan Date: Mon, 17 Mar 2014 11:20:43 -0500 Subject: [PATCH 01/15] adds column gutter example --- grid.css | 21 ++++++++++++++++++++- index.html | 49 ++++++++++++++++++++++++++++++++----------------- 2 files changed, 52 insertions(+), 18 deletions(-) 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
    • From bdbab87936e30e2732e26f4b399235858c9f2fbe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?T=C3=A1rcio=20Zemel?= Date: Tue, 1 Apr 2014 05:01:38 -0300 Subject: [PATCH 02/15] Portuguese translation --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index cd7657d..18939cc 100644 --- a/README.md +++ b/README.md @@ -198,3 +198,10 @@ Add the class `.flow-opposite` to columns where you want content to display firs * [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/) + +####Translations +Translations are maintained by their creators and may not always be up to date with the original here. + +* [Portuguese](http://webfatorial.github.io/grid/) - Translated by [webfatorial](http://webfatorial.com/) + +Have a translation you'd like to link to? Open a pull request to add it here. Be sure to keep it alphabetical. From 3f39b37cfadc49b56682bb7836063a64453df10f Mon Sep 17 00:00:00 2001 From: Adam Kaplan Date: Wed, 2 Apr 2014 15:39:43 -0500 Subject: [PATCH 03/15] Update README.md --- README.md | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 18939cc..f3accc9 100644 --- a/README.md +++ b/README.md @@ -199,9 +199,7 @@ Add the class `.flow-opposite` to columns where you want content to display firs * [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/) -####Translations -Translations are maintained by their creators and may not always be up to date with the original here. +##Translations +Translations are maintained by their creators and may not always be up to date with the original here. Have a translation you'd like to link to? Open a pull request to add it here. Be sure to keep it alphabetical. * [Portuguese](http://webfatorial.github.io/grid/) - Translated by [webfatorial](http://webfatorial.com/) - -Have a translation you'd like to link to? Open a pull request to add it here. Be sure to keep it alphabetical. From 4ae973fc76de0b68c3c405700833313259d8fd62 Mon Sep 17 00:00:00 2001 From: GeekPlux Date: Fri, 4 Apr 2014 14:12:01 +0800 Subject: [PATCH 04/15] Update README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index f3accc9..e5081d3 100644 --- a/README.md +++ b/README.md @@ -203,3 +203,6 @@ Add the class `.flow-opposite` to columns where you want content to display firs Translations are maintained by their creators and may not always be up to date with the original here. Have a translation you'd like to link to? Open a pull request to add it here. Be sure to keep it alphabetical. * [Portuguese](http://webfatorial.github.io/grid/) - Translated by [webfatorial](http://webfatorial.com/) +* [Chinese](http://geekplux.github.io/grid) - Translated by [GeekPlux](http://www.geekplux.com/) + + From 14430c90e5e041929155d04fdfa8b467bb040805 Mon Sep 17 00:00:00 2001 From: maepon Date: Sat, 5 Apr 2014 10:23:54 +0900 Subject: [PATCH 05/15] Japanese translation --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index e5081d3..e9fbbdc 100644 --- a/README.md +++ b/README.md @@ -204,5 +204,6 @@ Translations are maintained by their creators and may not always be up to date w * [Portuguese](http://webfatorial.github.io/grid/) - Translated by [webfatorial](http://webfatorial.com/) * [Chinese](http://geekplux.github.io/grid) - Translated by [GeekPlux](http://www.geekplux.com/) +* [Japanese](http://maepon.github.io/grid/) - Translated by [Masayuki Maekawa](http://maepon.skpn.com/) From e694fdb862370cb99724c0295922a60fbb7b9aa3 Mon Sep 17 00:00:00 2001 From: maepon Date: Sat, 5 Apr 2014 10:32:07 +0900 Subject: [PATCH 06/15] ignore --- .gitignore | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..e8bacc7 --- /dev/null +++ b/.gitignore @@ -0,0 +1,6 @@ +.DS_Store +wdnr.sublime-project +wdnr.sublime-workspace +node_modules +.sass-cache +.sublime-grunt.cache From 8f43b3aee03419cef2d20475e51c9dbce1a1990b Mon Sep 17 00:00:00 2001 From: Adam Kaplan Date: Mon, 7 Apr 2014 13:49:44 -0500 Subject: [PATCH 07/15] updates fourth to 25% --- README.md | 2 +- grid.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index e9fbbdc..1692dcc 100644 --- a/README.md +++ b/README.md @@ -113,7 +113,7 @@ On larger screens, columns gain `float: left` in order to stack content horizont .column.two-thirds { width: 66.7%; } .column.half { width: 50%; } .column.third { width: 33.3%; } - .column.fourth { width: 24.95%; } + .column.fourth { width: 25%; } .column.flow-opposite { float: right; } } ``` diff --git a/grid.css b/grid.css index be24187..89522f8 100644 --- a/grid.css +++ b/grid.css @@ -113,7 +113,7 @@ section:first-of-type { border-top: none; } .column.two-thirds { width: 66.7%; } .column.half { width: 50%; } .column.third { width: 33.3%; } - .column.fourth { width: 24.95%; } + .column.fourth { width: 25%; } .column.flow-opposite { float: right; } } From da3b35d13b712efcc8e8db8b545c7c93e9f46f09 Mon Sep 17 00:00:00 2001 From: Adam Kaplan Date: Wed, 9 Apr 2014 14:08:01 -0500 Subject: [PATCH 08/15] Update README.md --- README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/README.md b/README.md index 1692dcc..c0db4be 100644 --- a/README.md +++ b/README.md @@ -202,8 +202,6 @@ Add the class `.flow-opposite` to columns where you want content to display firs ##Translations Translations are maintained by their creators and may not always be up to date with the original here. Have a translation you'd like to link to? Open a pull request to add it here. Be sure to keep it alphabetical. -* [Portuguese](http://webfatorial.github.io/grid/) - Translated by [webfatorial](http://webfatorial.com/) * [Chinese](http://geekplux.github.io/grid) - Translated by [GeekPlux](http://www.geekplux.com/) * [Japanese](http://maepon.github.io/grid/) - Translated by [Masayuki Maekawa](http://maepon.skpn.com/) - - +* [Portuguese](http://webfatorial.github.io/grid/) - Translated by [webfatorial](http://webfatorial.com/) From 69c6ed083a3233076868117f8f88ef54b44d7a88 Mon Sep 17 00:00:00 2001 From: Emin Date: Fri, 2 May 2014 20:12:39 +0300 Subject: [PATCH 09/15] Added Turkish translation I'm still working on it. A large part has been translated. --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index c0db4be..a5367f5 100644 --- a/README.md +++ b/README.md @@ -205,3 +205,4 @@ Translations are maintained by their creators and may not always be up to date w * [Chinese](http://geekplux.github.io/grid) - Translated by [GeekPlux](http://www.geekplux.com/) * [Japanese](http://maepon.github.io/grid/) - Translated by [Masayuki Maekawa](http://maepon.skpn.com/) * [Portuguese](http://webfatorial.github.io/grid/) - Translated by [webfatorial](http://webfatorial.com/) +* [Türkçe](http://eminarslan.github.io/grid/) - Çeviren [eminarslan](http://eminarslan.com/) From b1e427b7786ffab48e4c10e38ee0f2e1d5b70892 Mon Sep 17 00:00:00 2001 From: Roman Ivaskevytch Date: Mon, 3 Nov 2014 13:40:18 +0200 Subject: [PATCH 10/15] Added Ukrainian translation --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index a5367f5..8fdc66b 100644 --- a/README.md +++ b/README.md @@ -206,3 +206,4 @@ Translations are maintained by their creators and may not always be up to date w * [Japanese](http://maepon.github.io/grid/) - Translated by [Masayuki Maekawa](http://maepon.skpn.com/) * [Portuguese](http://webfatorial.github.io/grid/) - Translated by [webfatorial](http://webfatorial.com/) * [Türkçe](http://eminarslan.github.io/grid/) - Çeviren [eminarslan](http://eminarslan.com/) +* [Ukrainian](http://ivaskevytch.github.io/grid/) - Translated by Ivaskevytch From d8064f93a650eae3c2187692d4174ec610739fd2 Mon Sep 17 00:00:00 2001 From: Adam Kaplan Date: Mon, 23 Feb 2015 16:03:17 -0600 Subject: [PATCH 11/15] Update README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 8fdc66b..1e387a2 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ +Grid is a great learning tool but no longer supported. [Learn why](http://adamkaplan.me/grid-retrospective). + + ##Grid A simple guide to responsive design.
    From 74f4aa99b7e77741cbdd0f95904149ab996bb5ef Mon Sep 17 00:00:00 2001 From: Mike Knoop Date: Tue, 4 Aug 2015 20:17:10 -0700 Subject: [PATCH 12/15] Update retrospective blog link in README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 1e387a2..47a80ed 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -Grid is a great learning tool but no longer supported. [Learn why](http://adamkaplan.me/grid-retrospective). +Grid is a great learning tool but no longer supported. [Learn why](http://adamkaplan.me/blog/grid-retrospective/). ##Grid From b3b38520197142dc0281ea9c2ae976c8ae64d5e0 Mon Sep 17 00:00:00 2001 From: WangRuqiang Date: Wed, 24 Aug 2016 10:51:14 +0800 Subject: [PATCH 13/15] adjust css link href --- index.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index b1ae599..11f22ad 100644 --- a/index.html +++ b/index.html @@ -11,8 +11,8 @@ - - + + From 3c5ea1b46fddcdf8f1d2178b20ca6ee78dee6bdb Mon Sep 17 00:00:00 2001 From: Santiago Castro Date: Sun, 16 Apr 2017 19:48:52 -0300 Subject: [PATCH 14/15] Fix broken Markdown headings --- README.md | 32 ++++++++++++++++---------------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 47a80ed..96b9fd4 100644 --- a/README.md +++ b/README.md @@ -1,23 +1,23 @@ Grid is a great learning tool but no longer supported. [Learn why](http://adamkaplan.me/blog/grid-retrospective/). -##Grid +## Grid A simple guide to responsive design.
    www.adamkaplan.me/grid -####Why bother with responsive? +#### 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. -####A Fragmented World +#### 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. -####Mobile First +#### 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. So when we’re talking about layout, “mobile first” really means “progressive enhancement.” —Ethan Marcotte -##Min-width Media Queries +## 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. ```css @@ -35,9 +35,9 @@ html { font-size: 100%; } } ``` -##Steps +## Steps -####1. Not All Browsers are Created Equal +#### 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](http://necolas.github.io/normalize.css/), which will render elements more consistently cross-browser. Remember to include it as-is before your stylesheet. ```html @@ -45,13 +45,13 @@ Browsers will render your CSS differently. To avoid this, it’s a good idea to ``` -####2. Add the Viewport Meta Tag +#### 2. Add the Viewport Meta Tag Place in the `` of your HTML. This enables use of media queries for cross-device layouts. ```html ``` -####3. 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. ```css *, *:before, *:after { @@ -61,7 +61,7 @@ Place at the top of your CSS file. The `*` will target all elements on the page. } ``` -####4. Create a Container +#### 4. Create a Container A container holds all elements and controls the page's maximum width. Using a container will make designing for responsive easier! ```css .container { @@ -77,7 +77,7 @@ A container holds all elements and controls the page's maximum width. Using a co
    ``` -####5. Create a Column +#### 5. Create a Column With mobile first, columns are `block` level (takes up the full width available) by default. No additional styles needed! ```html @@ -88,7 +88,7 @@ With mobile first, columns are `block` level (takes up the full width available)
    ``` -####6. Create Column Sizes +#### 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. ```html @@ -121,7 +121,7 @@ On larger screens, columns gain `float: left` in order to stack content horizont } ``` -####7. Create Rows +#### 7. Create Rows 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/). ```html @@ -184,7 +184,7 @@ Add the class `.flow-opposite` to columns where you want content to display firs } ``` -####Further Reading +#### Further Reading * [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) * [Beginner’s Guide to Responsive Web Design](http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design) @@ -193,7 +193,7 @@ Add the class `.flow-opposite` to columns where you want content to display firs * [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 +#### References * [Android Fragmentation Visualized](http://opensignal.com/reports/fragmentation-2013/) * [Animate.css](http://daneden.github.io/animate.css/) * [Box Model](http://developer.mozilla.org/en-US/docs/Web/CSS/box_model) @@ -202,7 +202,7 @@ Add the class `.flow-opposite` to columns where you want content to display firs * [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/) -##Translations +## Translations Translations are maintained by their creators and may not always be up to date with the original here. Have a translation you'd like to link to? Open a pull request to add it here. Be sure to keep it alphabetical. * [Chinese](http://geekplux.github.io/grid) - Translated by [GeekPlux](http://www.geekplux.com/) From 74007005eca0cde11191c593593d954096022484 Mon Sep 17 00:00:00 2001 From: ChenYuan Date: Wed, 9 May 2018 08:50:54 +0800 Subject: [PATCH 15/15] fix broken link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 96b9fd4..a6f63d9 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -Grid is a great learning tool but no longer supported. [Learn why](http://adamkaplan.me/blog/grid-retrospective/). +Grid is a great learning tool but no longer supported. [Learn why](http://adamkaplan.me/blog/grid-retrospective). ## Grid