Skip to content

Instantly share code, notes, and snippets.

View aekaplan's full-sized avatar

Adam Kaplan aekaplan

View GitHub Profile
@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:8978649
Last active August 29, 2015 13:56
Create Column - HTML
<div class="container">
<div class="column">
<!-- Your Content -->
</div>
</div>
@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:9025387
Created February 15, 2014 21:20
Flow Opposite - CSS
@media (min-width: 40rem) {
.column.flow-opposite { float: right; }
}
@aekaplan
aekaplan / gist:9040799
Created February 16, 2014 21:20
Column Sizes - HTML
<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:9274193
Created February 28, 2014 16:31
Clearfix
<div class="row clearfix">
<div class="column">
<!-- Your Content -->
</div>
</div>
@aekaplan
aekaplan / gist:9274372
Last active August 29, 2015 13:56
Placeholder (%) Sass Clearfix
%clearfix {
*zoom: 1;
&:before, &:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
@aekaplan
aekaplan / gist:9274422
Last active August 29, 2015 13:56
Sass Clearfix HTML
<div class="row">
<div class="column">
<!-- Your Content -->
</div>
</div>
@aekaplan
aekaplan / gist:9276515
Last active August 29, 2015 13:56
@extend Sass Clearfix
.row {
@extend %clearfix;
}
@aekaplan
aekaplan / gist:2d6ff67a23c7e35fc1fb
Last active August 29, 2015 14:01
Button Styles
.button,
a.button,
button,
input[type="submit"],
input[type="button"] {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;