Skip to content

Instantly share code, notes, and snippets.

View aekaplan's full-sized avatar

Adam Kaplan aekaplan

View GitHub Profile
@aekaplan
aekaplan / gist:9025387
Created February 15, 2014 21:20
Flow Opposite - CSS
@media (min-width: 40rem) {
.column.flow-opposite { float: right; }
}
@aekaplan
aekaplan / gist:9025378
Last active August 29, 2015 13:56
Flow Opposite - HTML
<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 August 29, 2015 13:56
Create Column - HTML
<div class="container">
<div class="column">
<!-- Your Content -->
</div>
</div>
@aekaplan
aekaplan / gist:8978515
Last active August 29, 2015 13:56
Create Columns - CSS
@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 August 29, 2015 13:56
Min-width Media Queries CSS
/* 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 August 29, 2015 13:56
Normalize.css - HTML
<link rel="stylesheet" href="/css/normalize.css">
<link rel="stylesheet" href="/css/grid.css">
@aekaplan
aekaplan / gist:8467436
Last active January 3, 2016 13:09
Clearfix (Made by Nicolas Gallagher) - CSS
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}
.clearfix:after {
clear: both;
}
@aekaplan
aekaplan / gist:8430571
Last active January 3, 2016 07:39
Create Rows - HTML
<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 January 2, 2016 03:59
Box-sizing:border-box - CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
@aekaplan
aekaplan / gist:8246124
Last active January 2, 2016 03:49
Create a Container - CSS
.container {
margin: 0 auto;
max-width: 48rem;
width: 90%;
}