mirror of
https://github.com/samsonjs/grid.git
synced 2026-03-25 09:05:51 +00:00
417 lines
15 KiB
HTML
417 lines
15 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<!-- Basic Page Needs -->
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||
<title>Grid</title>
|
||
<meta name="description" content="A simple guide to responsive design.">
|
||
|
||
<!-- Mobile Specific Metas -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<!-- CSS -->
|
||
<link rel="stylesheet" href="/css/normalize.css" type="text/css">
|
||
<link rel="stylesheet" href="/css/grid.css" type="text/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'>
|
||
</head>
|
||
|
||
<body>
|
||
<header class="clearfix">
|
||
<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>
|
||
</div>
|
||
<img src="/images/grid/mobile.png" alt="Intro" class="mobile animated fadeInUp">
|
||
</div>
|
||
</header>
|
||
|
||
<section>
|
||
<div class='container'>
|
||
<img src="/images/grid/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
|
||
the user’s behavior, screen size and screen orientation.</p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="example fragmentation">
|
||
<div class="container"></div>
|
||
</section>
|
||
|
||
<section>
|
||
<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
|
||
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'>
|
||
<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
|
||
the default and you no longer have to override them later. It’s much simpler!</p>
|
||
<hr>
|
||
<blockquote>
|
||
<p>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.”</p>
|
||
<cite>—Ethan Marcotte</cite>
|
||
</blockquote>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="example quote remove-padding">
|
||
<div class="container">
|
||
<img src="/images/grid/small-large.png" alt="Mobile First">
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<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
|
||
of the stylesheet or in a separate document.</p>
|
||
<hr>
|
||
<script src="https://gist.github.com/aekaplan/8969695.js"></script>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<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
|
||
alternative to a reset like <a href="http://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a>,
|
||
which will render elements more consistently cross-browser. Remember to include it as-is before your stylesheet.</p>
|
||
<hr>
|
||
<script src="https://gist.github.com/aekaplan/8969436.js"></script>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<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>
|
||
<hr>
|
||
<script src="https://gist.github.com/aekaplan/8243831.js"></script>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="example">
|
||
<div class="container">
|
||
<img src="/images/grid/box-model.png" alt="Box Model">
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="container">
|
||
<h1>CSS Box Model</h1>
|
||
<p>It’s important to understand the basics, like how elements are generated and behave in the browser, before
|
||
diving into responsive web design. The CSS Box Model consists of four distinct parts.</p>
|
||
<hr>
|
||
|
||
<div class="row clearfix">
|
||
<div class="column fourth">
|
||
<img src="/images/grid/content.png" alt="content">
|
||
<h3 class="content">Content</h3>
|
||
<p>The content of the box, where text and images appear.</p>
|
||
</div>
|
||
|
||
<div class="column fourth">
|
||
<img src="/images/grid/padding.png" alt="padding">
|
||
<h3 class="padding">Padding</h3>
|
||
<p>Clears an area around the content.</p>
|
||
</div>
|
||
|
||
<div class="column fourth">
|
||
<img src="/images/grid/border.png" alt="border">
|
||
<h3 class="border">Border</h3>
|
||
<p>A border that goes around the padding.</p>
|
||
</div>
|
||
|
||
<div class="column fourth">
|
||
<img src="/images/grid/margin.png" alt="margin">
|
||
<h3 class="margin">Margin</h3>
|
||
<p>Clears an area around the border.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<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>
|
||
<hr>
|
||
<script src="https://gist.github.com/aekaplan/8247563.js"></script>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<div class="container">
|
||
<h1>Your Choice</h1>
|
||
<p><a href="http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug" target="_blank">What was once a bug</a>
|
||
is now a widely used CSS property. It basically means you can choose whether or not to include borders and padding in
|
||
the width of your content.</p>
|
||
<hr>
|
||
|
||
<div class="row clearfix">
|
||
<div class="column half">
|
||
<img src="/images/grid/without-box-model.png" alt="Without Box Model">
|
||
<h3>Without box-sizing: border-box</h3>
|
||
<p>Margin, borders and padding are drawn outside the set width of your content.</p>
|
||
</div>
|
||
|
||
<div class="column half">
|
||
<img src="/images/grid/with-box-model.png" alt="With Box Model">
|
||
<h3>With box-sizing: border-box</h3>
|
||
<p>Borders and padding are drawn inside the set width of your content. The margin is drawn outside.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<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
|
||
responsive easier!</p>
|
||
<hr>
|
||
<script src="https://gist.github.com/aekaplan/8246124.js"></script>
|
||
<script src="https://gist.github.com/aekaplan/8246032.js"></script>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="example">
|
||
<div class="container">
|
||
<img src="/images/grid/container.png" alt="Container">
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<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
|
||
additional styles needed!</p>
|
||
<hr>
|
||
<script src="https://gist.github.com/aekaplan/8978649.js"></script>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="example grid mobile-first">
|
||
<div class="container">
|
||
<div class="column">
|
||
<span>.column</span>
|
||
</div>
|
||
|
||
<div class="column">
|
||
<span>.column</span>
|
||
</div>
|
||
|
||
<div class="column">
|
||
<span>.column</span>
|
||
</div>
|
||
|
||
<div class="column">
|
||
<span>.column</span>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<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>
|
||
<script src="https://gist.github.com/aekaplan/9040799.js"></script>
|
||
<script src="https://gist.github.com/aekaplan/8978515.js"></script>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="example grid">
|
||
<div class="container">
|
||
<div class="row clearfix">
|
||
<div class="column full">
|
||
<span>.column .full</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row clearfix">
|
||
<div class="column two-thirds">
|
||
<span>.column .two-thirds</span>
|
||
</div>
|
||
|
||
<div class="column third">
|
||
<span>.column .third</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row clearfix">
|
||
<div class="column half">
|
||
<span>.column .half</span>
|
||
</div>
|
||
|
||
<div class="column half">
|
||
<span>.column .half</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row clearfix">
|
||
<div class="column third">
|
||
<span>.column .third</span>
|
||
</div>
|
||
|
||
<div class="column third">
|
||
<span>.column .third</span>
|
||
</div>
|
||
|
||
<div class="column third">
|
||
<span>.column .third</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row clearfix">
|
||
<div class="column fourth">
|
||
<span>.column .fourth</span>
|
||
</div>
|
||
|
||
<div class="column fourth">
|
||
<span>.column .fourth</span>
|
||
</div>
|
||
|
||
<div class="column fourth">
|
||
<span>.column .fourth</span>
|
||
</div>
|
||
|
||
<div class="column fourth">
|
||
<span>.column .fourth</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<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
|
||
issues. Rows are cleared using the popular <code>clearfix</code>, which was created by
|
||
<a href="http://nicolasgallagher.com/micro-clearfix-hack/" target="_blank">Nicolas Gallagher</a>.</p>
|
||
<hr>
|
||
<script src="https://gist.github.com/aekaplan/8430571.js"></script>
|
||
<script src="https://gist.github.com/aekaplan/8467436.js"></script>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="example grid row-example">
|
||
<div class="container">
|
||
<div class="row clearfix">
|
||
<div class="column half">
|
||
<span>.column .half</span>
|
||
</div>
|
||
|
||
<div class="column half">
|
||
<span>.column .half</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row clearfix">
|
||
<div class="column half">
|
||
<span>.column .half</span>
|
||
</div>
|
||
|
||
<div class="column half">
|
||
<span>.column .half</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<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>
|
||
<hr>
|
||
<script src="https://gist.github.com/aekaplan/9025378.js"></script>
|
||
<script src="https://gist.github.com/aekaplan/9025387.js"></script>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="example grid">
|
||
<div class="container">
|
||
<div class="row clearfix">
|
||
<div class="column half flow-opposite">
|
||
<span>.column .half .flow-opposite</span>
|
||
</div>
|
||
|
||
<div class="column half">
|
||
<span>.column .half</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section>
|
||
<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,
|
||
more useable place.</p>
|
||
<hr>
|
||
<p><a href="https://github.com/aekaplan/grid" target="_blank" class="button">View the Code</a></p>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="resources">
|
||
<div class="container">
|
||
<div class="row clearfix">
|
||
<div class="column half">
|
||
<h3>Further Reading</h3>
|
||
<hr class="small">
|
||
<ul>
|
||
<li><a href="http://www.abookapart.com/products/mobile-first" target="_blank">A Book Apart: Mobile First</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://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://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>
|
||
</div>
|
||
|
||
<div class="column half">
|
||
<h3>References</h3>
|
||
<hr class="small">
|
||
<ul>
|
||
<li><a href="http://opensignal.com/reports/fragmentation-2013/" target="_blank">Android Fragmentation Visualized</a></li>
|
||
<li><a href="http://daneden.github.io/animate.css/" target="_blank">Animate.css</a></li>
|
||
<li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model" target="_blank">Box Model</a></li>
|
||
<li><a href="https://developers.google.com/chrome-developer-tools/" target="_blank">Chrome Developer Tools</a></li>
|
||
<li><a href="https://gist.github.com/aekaplan" target="_blank">Code samples by GitHub Gist</a></li>
|
||
<li><a href="http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug" target="_blank">Internet Explorer Box Model</a></li>
|
||
<li><a href="http://coding.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and-how-to-use-it/" target="_blank">Progressive Enhancement</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</body>
|
||
</html>
|