mirror of
https://github.com/samsonjs/grid.git
synced 2026-03-25 09:05:51 +00:00
Merge branch 'aekaplan:master' into master
This commit is contained in:
GitHub
commit
056b7446d7
4 changed files with 89 additions and 37 deletions
6
.gitignore
vendored
Normal file
6
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
.DS_Store
|
||||
wdnr.sublime-project
|
||||
wdnr.sublime-workspace
|
||||
node_modules
|
||||
.sass-cache
|
||||
.sublime-grunt.cache
|
||||
44
README.md
44
README.md
|
|
@ -1,20 +1,23 @@
|
|||
##Grid
|
||||
Grid is a great learning tool but no longer supported. [Learn why](http://adamkaplan.me/blog/grid-retrospective).
|
||||
|
||||
|
||||
## Grid
|
||||
|
||||
A simple guide to responsive design.<br>
|
||||
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
|
||||
|
|
@ -32,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
|
||||
|
|
@ -42,13 +45,13 @@ Browsers will render your CSS differently. To avoid this, it’s a good idea to
|
|||
<link rel="stylesheet" href="/css/grid.css">
|
||||
```
|
||||
|
||||
####2. Add the Viewport Meta Tag
|
||||
#### 2. Add the Viewport Meta Tag
|
||||
Place in the `<head>` of your HTML. This enables use of media queries for cross-device layouts.
|
||||
```html
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
```
|
||||
|
||||
####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 {
|
||||
|
|
@ -58,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 {
|
||||
|
|
@ -74,7 +77,7 @@ A container holds all elements and controls the page's maximum width. Using a co
|
|||
</div>
|
||||
```
|
||||
|
||||
####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
|
||||
|
|
@ -85,7 +88,7 @@ With mobile first, columns are `block` level (takes up the full width available)
|
|||
</div>
|
||||
```
|
||||
|
||||
####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
|
||||
|
|
@ -113,12 +116,12 @@ 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; }
|
||||
}
|
||||
```
|
||||
|
||||
####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
|
||||
|
|
@ -181,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)
|
||||
|
|
@ -190,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)
|
||||
|
|
@ -198,3 +201,12 @@ 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. 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/)
|
||||
* [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
|
||||
|
|
|
|||
23
grid.css
23
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; }
|
||||
}
|
||||
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
53
index.html
53
index.html
|
|
@ -11,19 +11,19 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<!-- CSS -->
|
||||
<link rel="stylesheet" href="/css/normalize.css">
|
||||
<link rel="stylesheet" href="/css/grid.css">
|
||||
<link rel="stylesheet" href="/normalize.css">
|
||||
<link rel="stylesheet" href="/grid.css">
|
||||
<!--[if lt IE 9]>
|
||||
<script src="/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
|
||||
<!-- Google Fonts -->
|
||||
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>
|
||||
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header class="clearfix">
|
||||
<div class='container'>
|
||||
<div class="container">
|
||||
<div class="intro">
|
||||
<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>
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
</header>
|
||||
|
||||
<section>
|
||||
<div class='container'>
|
||||
<div class="container">
|
||||
<img src="/images/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
|
||||
|
|
@ -46,16 +46,16 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<div class='container'>
|
||||
<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
|
||||
<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'>
|
||||
<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
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<div class='container'>
|
||||
<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
|
||||
|
|
@ -88,7 +88,7 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<div class='container'>
|
||||
<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
|
||||
|
|
@ -100,7 +100,7 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<div class='container'>
|
||||
<div class="container">
|
||||
<div class="circle">2</div>
|
||||
<h1>Add the Viewport Meta Tag</h1>
|
||||
<p>Place in the <code><head></code> of your HTML. This enables use of media queries for cross-device layouts.</p>
|
||||
|
|
@ -151,7 +151,7 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<div class='container'>
|
||||
<div class="container">
|
||||
<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>
|
||||
|
|
@ -185,7 +185,7 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<div class='container'>
|
||||
<div class="container">
|
||||
<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
|
||||
|
|
@ -203,7 +203,7 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<div class='container'>
|
||||
<div class="container">
|
||||
<div class="circle">5</div>
|
||||
<h1>Create a Column</h1>
|
||||
<p>With mobile first, columns are <code>block</code> level (takes up the full width available) by default. No
|
||||
|
|
@ -234,12 +234,27 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<div class='container'>
|
||||
<div class="container">
|
||||
<div class="circle">6</div>
|
||||
<h1>Create Column Sizes</h1>
|
||||
<p>On larger screens, columns gain <code>float: left</code> in order to stack content horizontally. Columns now
|
||||
use padding for gutters, so you no longer need to worry about removing margins.</p>
|
||||
<hr>
|
||||
</div>
|
||||
|
||||
<div class="container gutters">
|
||||
<div class="row clearfix">
|
||||
<div class="column half">
|
||||
<span>.column .half</span>
|
||||
</div>
|
||||
|
||||
<div class="column half">
|
||||
<span>.column .half</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<script src="https://gist.github.com/aekaplan/9040799.js"></script>
|
||||
<script src="https://gist.github.com/aekaplan/8978515.js"></script>
|
||||
</div>
|
||||
|
|
@ -308,7 +323,7 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<div class='container'>
|
||||
<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
|
||||
|
|
@ -345,7 +360,7 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<div class='container'>
|
||||
<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>
|
||||
|
|
@ -370,7 +385,7 @@
|
|||
</section>
|
||||
|
||||
<section>
|
||||
<div class='container'>
|
||||
<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,
|
||||
|
|
@ -391,7 +406,7 @@
|
|||
<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://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://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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue