sjs/grid
1
0
Fork 0
mirror of https://github.com/samsonjs/grid.git synced 2026-04-27 15:07:39 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Update README.md

Browse source
This commit is contained in:
Adam Kaplan 2014-03-06 20:58:39 -06:00
parent dae8f91757
commit eb5205f986
1 changed files with 15 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
README.md
View file

@ -17,7 +17,7 @@ The term “mobile first” gets thrown around a lot lately. What it really mean
##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. 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
/* Small screens (default) */ /* Small screens (default) */
html { font-size: 100%; } html { font-size: 100%; }
@ -37,20 +37,20 @@ html { font-size: 100%; }
####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. 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
<link rel="stylesheet" href="/css/normalize.css" type="text/css"> <link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/grid.css" type="text/css"> <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. 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"> <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. Place at the top of your CSS file. The `*` will target all elements on the page.
``` ```css
*, *:before, *:after { *, *:before, *:after {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -60,7 +60,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! A container holds all elements and controls the page's maximum width. Using a container will make designing for responsive easier!
``` ```css
.container { .container {
margin: 0 auto; margin: 0 auto;
max-width: 48rem; max-width: 48rem;
@ -68,7 +68,7 @@ A container holds all elements and controls the page's maximum width. Using a co
} }
``` ```
``` ```html
<div class="container"> <div class="container">
<!-- Your Content --> <!-- Your Content -->
</div> </div>
@ -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! With mobile first, columns are `block` level (takes up the full width available) by default. No additional styles needed!
``` ```html
<div class="container"> <div class="container">
<div class="column"> <div class="column">
<!-- Your Content --> <!-- Your Content -->
@ -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. 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
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="column half"> <div class="column half">
@ -101,7 +101,7 @@ On larger screens, columns gain `float: left` in order to stack content horizont
</div> </div>
``` ```
``` ```css
@media (min-width: 40rem) { @media (min-width: 40rem) {
.column { .column {
float: left; float: left;
@ -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/). 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
<div class="container"> <div class="container">
<div class="row clearfix"> <div class="row clearfix">
<div class="column half"> <div class="column half">
@ -143,7 +143,7 @@ Columns are wrapped in rows to prevent other elements from stacking next to them
</div> </div>
``` ```
``` ```css
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
content: " "; content: " ";
@ -162,7 +162,7 @@ Columns are wrapped in rows to prevent other elements from stacking next to them
#### Flow Opposite #### 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. Add the class `.flow-opposite` to columns where you want content to display first on mobile but appear on the right on larger screens.
``` ```html
<div class="container"> <div class="container">
<div class="row clearfix"> <div class="row clearfix">
<div class="column half flow-opposite"> <div class="column half flow-opposite">
@ -175,7 +175,7 @@ Add the class `.flow-opposite` to columns where you want content to display firs
</div> </div>
``` ```
``` ```css
@media (min-width: 40rem) { @media (min-width: 40rem) {
.column.flow-opposite { float: right; } .column.flow-opposite { float: right; }
} }