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
|
||||
14
README.md
14
README.md
|
|
@ -1,3 +1,6 @@
|
|||
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>
|
||||
|
|
@ -113,7 +116,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; }
|
||||
}
|
||||
```
|
||||
|
|
@ -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