Skip to content

Instantly share code, notes, and snippets.

Avatar

Adam Kaplan aekaplan

View GitHub Profile
@aekaplan
aekaplan / gist:8969436
Last active Aug 29, 2015
Normalize.css - HTML
View gist:8969436
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/grid.css">
@aekaplan
aekaplan / gist:8969695
Last active Aug 29, 2015
Min-width Media Queries CSS
View gist:8969695
/* 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) {
@aekaplan
aekaplan / gist:8978515
Last active Aug 29, 2015
Create Columns - CSS
View gist:8978515
@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%; }
@aekaplan
aekaplan / gist:8978649
Last active Aug 29, 2015
Create Column - HTML
View gist:8978649
<div class="container">
<div class="column">
<!-- Your Content -->
</div>
</div>
@aekaplan
aekaplan / gist:9025378
Last active Aug 29, 2015
Flow Opposite - HTML
View gist:9025378
<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>
@aekaplan
aekaplan / gist:9025387
Created Feb 15, 2014
Flow Opposite - CSS
View gist:9025387
@media (min-width: 40rem) {
.column.flow-opposite { float: right; }
}
@aekaplan
aekaplan / gist:9040799
Created Feb 16, 2014
Column Sizes - HTML
View gist:9040799
<div class="container">
<div class="row clearfix">
<div class="column half">
<!-- Your Content -->
</div>
<div class="column half">
<!-- Your Content -->
</div>
</div>
</div>
@aekaplan
aekaplan / gist:9274372
Last active Aug 29, 2015
Placeholder (%) Sass Clearfix
View gist:9274372
%clearfix {
*zoom: 1;
&:before, &:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
@aekaplan
aekaplan / gist:9274422
Last active Aug 29, 2015
Sass Clearfix HTML
View gist:9274422
<div class="row">
<div class="column">
<!-- Your Content -->
</div>
</div>
View gist:9274193
<div class="row clearfix">
<div class="column">
<!-- Your Content -->
</div>
</div>