View gist:8969436
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
<link rel="stylesheet" href="/css/normalize.css"> | |
<link rel="stylesheet" href="/css/grid.css"> |
View gist:8969695
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
/* Small screens (default) */ | |
html { font-size: 100%; } | |
/* Medium screens (640px) */ | |
@media (min-width: 40rem) { | |
html { font-size: 112%; } | |
} | |
/* Large screens (1024px) */ | |
@media (min-width: 64rem) { |
View gist:8978515
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
@media (min-width: 40rem) { | |
.column { | |
float: left; | |
padding-left: 1rem; | |
padding-right: 1rem; | |
} | |
.column.full { width: 100%; } | |
.column.two-thirds { width: 66.7%; } | |
.column.half { width: 50%; } |
View gist:8978649
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
<div class="container"> | |
<div class="column"> | |
<!-- Your Content --> | |
</div> | |
</div> |
View gist:9025378
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
<div class="container"> | |
<div class="row clearfix"> | |
<div class="column half flow-opposite"> | |
<!-- Your Content --> | |
</div> | |
<div class="column half"> | |
<!-- Your Content --> | |
</div> | |
</div> | |
</div> |
View gist:9025387
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
@media (min-width: 40rem) { | |
.column.flow-opposite { float: right; } | |
} |
View gist:9040799
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
<div class="container"> | |
<div class="row clearfix"> | |
<div class="column half"> | |
<!-- Your Content --> | |
</div> | |
<div class="column half"> | |
<!-- Your Content --> | |
</div> | |
</div> | |
</div> |
View gist:9274372
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
%clearfix { | |
*zoom: 1; | |
&:before, &:after { | |
content: " "; | |
display: table; | |
} | |
&:after { | |
clear: both; | |
} | |
} |
View gist:9274422
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
<div class="row"> | |
<div class="column"> | |
<!-- Your Content --> | |
</div> | |
</div> |
View gist:9274193
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
<div class="row clearfix"> | |
<div class="column"> | |
<!-- Your Content --> | |
</div> | |
</div> |
OlderNewer