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

adds column gutter example

Browse source
This commit is contained in:
Adam Kaplan 2014-03-17 11:20:43 -05:00
parent ae728a9636
commit 43e017b37c
2 changed files with 52 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
grid.css
View file

@ -340,6 +340,25 @@ img {
.row-example .row { padding: 1rem 0 0 0; } .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 /* Box Model
========================================================================== */ ========================================================================== */
@ -356,7 +375,7 @@ img {
.gist .gist-file { .gist .gist-file {
font-size: .9rem !important; font-size: .9rem !important;
margin: 0 auto; margin: 0 auto;
max-width: 750px; max-width: 39rem;
overflow: hidden !important; overflow: hidden !important;
text-align: left; text-align: left;
} }

49
index.html
View file

@ -18,12 +18,12 @@
<![endif]--> <![endif]-->
<!-- Google Fonts --> <!-- 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> </head>
<body> <body>
<header class="clearfix"> <header class="clearfix">
<div class='container'> <div class="container">
<div class="intro"> <div class="intro">
<a href="/grid"><h1>grid</h1></a> <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> <p>A simple guide to responsive design.<br>Made by <a href="/" target="_blank">Adam Kaplan</a>.</p>
@ -33,7 +33,7 @@
</header> </header>
<section> <section>
<div class='container'> <div class="container">
<img src="/images/mobile-first.png" alt="Mobile First" class="rwd"> <img src="/images/mobile-first.png" alt="Mobile First" class="rwd">
<h1>Why bother with responsive?</h1> <h1>Why bother with responsive?</h1>
<p>We want our websites to be useable on all devices by responding to <p>We want our websites to be useable on all devices by responding to
@ -46,16 +46,16 @@
</section> </section>
<section> <section>
<div class='container'> <div class="container">
<h1>A Fragmented World</h1> <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 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> all. Instead, we must take a more fluid approach to design.</p>
</div> </div>
</section> </section>
<section> <section>
<div class='container'> <div class="container">
<h1>Mobile First</h1> <h1>Mobile First</h1>
<p>The term “mobile first” gets thrown around a lot lately. What it really means is to start with mobile <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 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>
<section> <section>
<div class='container'> <div class="container">
<h1>Min-width Media Queries</h1> <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 <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 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>
<section> <section>
<div class='container'> <div class="container">
<div class="circle">1</div> <div class="circle">1</div>
<h1>Not All Browsers are Created Equal</h1> <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 <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>
<section> <section>
<div class='container'> <div class="container">
<div class="circle">2</div> <div class="circle">2</div>
<h1>Add the Viewport Meta Tag</h1> <h1>Add the Viewport Meta Tag</h1>
<p>Place in the <code>&lt;head&gt;</code> of your HTML. This enables use of media queries for cross-device layouts.</p> <p>Place in the <code>&lt;head&gt;</code> of your HTML. This enables use of media queries for cross-device layouts.</p>
@ -151,7 +151,7 @@
</section> </section>
<section> <section>
<div class='container'> <div class="container">
<div class="circle">3</div> <div class="circle">3</div>
<h1>Use box-sizing: border-box</h1> <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> <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>
<section> <section>
<div class='container'> <div class="container">
<div class="circle">4</div> <div class="circle">4</div>
<h1>Create a Container</h1> <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 <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>
<section> <section>
<div class='container'> <div class="container">
<div class="circle">5</div> <div class="circle">5</div>
<h1>Create a Column</h1> <h1>Create a Column</h1>
<p>With mobile first, columns are <code>block</code> level (takes up the full width available) by default. No <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>
<section> <section>
<div class='container'> <div class="container">
<div class="circle">6</div> <div class="circle">6</div>
<h1>Create Column Sizes</h1> <h1>Create Column Sizes</h1>
<p>On larger screens, columns gain <code>float: left</code> in order to stack content horizontally. Columns now <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> use padding for gutters, so you no longer need to worry about removing margins.</p>
<hr> <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/9040799.js"></script>
<script src="https://gist.github.com/aekaplan/8978515.js"></script> <script src="https://gist.github.com/aekaplan/8978515.js"></script>
</div> </div>
@ -308,7 +323,7 @@
</section> </section>
<section> <section>
<div class='container'> <div class="container">
<div class="circle">7</div> <div class="circle">7</div>
<h1>Create Rows</h1> <h1>Create Rows</h1>
<p>Columns are wrapped in rows to prevent other elements from stacking next to them, otherwise known as clearing <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>
<section> <section>
<div class='container'> <div class="container">
<h1>Flow Opposite</h1> <h1>Flow Opposite</h1>
<p>Add the class <code>.flow-opposite</code> to columns where you want content to display first on mobile but <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> appear on the right on larger screens.</p>
@ -370,7 +385,7 @@
</section> </section>
<section> <section>
<div class='container'> <div class="container">
<h1>Practice Makes Perfect</h1> <h1>Practice Makes Perfect</h1>
<p>By following these simple steps, you are on the path to responsive <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, 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://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://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://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://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> <li><a href="http://fuseinteractive.ca/blog/understanding-humble-clearfix" target="_blank">Understanding the Humble Clearfix</a></li>
</ul> </ul>