Learning to control the grid. Following a simple guide to responsive design, made by Adam Kaplan.
Last active
August 29, 2015 14:10
-
-
Save tankred/7b364a95d885675f2fc2 to your computer and use it in GitHub Desktop.
RWD
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<div class="container"> | |
<div class="row clearfix"> | |
<div class="column full"> | |
<!-- Your Content --> | |
column full | |
</div> | |
</div> | |
<div class="row clearfix"> | |
<div class="column half"> | |
<!-- Your Content --> | |
column half | |
</div> | |
<div class="column half"> | |
<!-- Your Content --> | |
column half | |
</div> | |
</div> | |
<div class="row clearfix"> | |
<div class="column two-thirds"> | |
<!-- Your Content --> | |
column two-thirds | |
</div> | |
<div class="column third"> | |
<!-- Your Content --> | |
column third | |
</div> | |
</div> | |
<div class="row clearfix"> | |
<div class="column third"> | |
<!-- Your Content --> | |
column third | |
</div> | |
<div class="column third"> | |
<!-- Your Content --> | |
column third | |
</div> | |
<div class="column third"> | |
<!-- Your Content --> | |
column third | |
</div> | |
</div> | |
<div class="row clearfix"> | |
<div class="column half flow-opposite"> | |
<!-- Your Content --> | |
column half 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. | |
</div> | |
<div class="column half"> | |
<!-- Your Content --> | |
column half | |
</div> | |
</div> | |
<div class="row clearfix"> | |
<div class="column fourth"> | |
<!-- Your Content --> | |
column fourth | |
</div> | |
<div class="column fourth"> | |
<!-- Your Content --> | |
column fourth | |
</div> | |
<div class="column fourth"> | |
<!-- Your Content --> | |
column fourth | |
</div> | |
<div class="column fourth"> | |
<!-- Your Content --> | |
column fourth | |
</div> | |
</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
*, *:before, *:after { | |
-moz-box-sizing: border-box; | |
-webkit-box-sizing: border-box; | |
box-sizing: border-box; | |
} | |
/* | |
With box-sizing: border-box | |
Borders and padding are drawn inside the set width of your content. The margin is drawn outside. | |
* = all elements + before and after | |
*/ | |
body {font-family:monospace,sans-serif;} | |
.container { | |
margin: 0 auto; | |
max-width: 48rem; | |
width: 90%; | |
border:1px dotted red; | |
} | |
.clearfix:before, | |
.clearfix:after { | |
content: " "; | |
display: table; | |
} | |
.clearfix:after { | |
clear: both; | |
} | |
.clearfix { | |
*zoom: 1; | |
} | |
/* Small screens (default) */ | |
html { font-size: 100%; } | |
/* Medium screens (640px) */ | |
@media (min-width: 40rem) { | |
html { font-size: 112%; } | |
.column { | |
float: left; | |
padding-left: 1rem; | |
padding-right: 1rem; | |
border: 1px dashed blue; | |
} | |
.column.full { width: 100%; } | |
.column.two-thirds { width: 66.7%; } | |
.column.half { width: 50%; } | |
.column.third { width: 33.3%; } | |
.column.fourth { width: 25%; } | |
.column.flow-opposite { float: right; } | |
} | |
/* Large screens (1024px) */ | |
@media (min-width: 64rem) { | |
html { font-size: 120%; } | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment