Skip to content

Instantly share code, notes, and snippets.

Avatar

Adam Kaplan aekaplan

View GitHub Profile
@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: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: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: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: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: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:8467436
Last active Jan 3, 2016
Clearfix (Made by Nicolas Gallagher) - CSS
View gist:8467436
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
@aekaplan
aekaplan / gist:8430571
Last active Jan 3, 2016
Create Rows - HTML
View gist:8430571
<div class="container">
<div class="row clearfix">
<div class="column half">
<!-- Your Content -->
</div>
<div class="column half">
<!-- Your Content -->
</div>
</div>
@aekaplan
aekaplan / gist:8247563
Last active Jan 2, 2016
Box-sizing:border-box - CSS
View gist:8247563
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@aekaplan
aekaplan / gist:8246124
Last active Jan 2, 2016
Create a Container - CSS
View gist:8246124
.container {
margin: 0 auto;
max-width: 48rem;
width: 90%;
}
You can’t perform that action at this time.