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-02-16 15:13:42 -06:00
parent d672662d1b
commit ce543a1c97
1 changed files with 11 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
README.md
View file

@ -68,7 +68,7 @@ A container holds all elements and controls the page's maximum width. Using a co
``` ```
<div class="container"> <div class="container">
<!--Your Content--> <!-- Your Content -->
</div> </div>
``` ```
@ -78,28 +78,22 @@ With mobile first, columns are `block` level (takes up the full width available)
``` ```
<div class="container"> <div class="container">
<div class="column"> <div class="column">
<!--Your Content--> <!-- Your Content -->
</div>
<div class="column">
<!--Your Content-->
</div>
<div class="column">
<!--Your Content-->
</div> </div>
</div> </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 we 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.
``` ```
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="column half"> <div class="column half">
<!--Your Content--> <!-- Your Content -->
</div> </div>
<div class="column half"> <div class="column half">
<!--Your Content--> <!-- Your Content -->
</div> </div>
</div> </div>
</div> </div>
@ -129,19 +123,19 @@ Columns are wrapped in rows to prevent other elements from stacking next to them
<div class="container"> <div class="container">
<div class="row clearfix"> <div class="row clearfix">
<div class="column half"> <div class="column half">
<!--Your Content--> <!-- Your Content -->
</div> </div>
<div class="column half"> <div class="column half">
<!--Your Content--> <!-- Your Content -->
</div> </div>
</div> </div>
<div class="row clearfix"> <div class="row clearfix">
<div class="column half"> <div class="column half">
<!--Your Content--> <!-- Your Content -->
</div> </div>
<div class="column half"> <div class="column half">
<!--Your Content--> <!-- Your Content -->
</div> </div>
</div> </div>
</div> </div>
@ -170,10 +164,10 @@ Add the class `.flow-opposite` to columns where you want content to display firs
<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">
<!--Your Content--> <!-- Your Content -->
</div> </div>
<div class="column half"> <div class="column half">
<!--Your Content--> <!-- Your Content -->
</div> </div>
</div> </div>
</div> </div>