Skip to content

Instantly share code, notes, and snippets.

Avatar

Adam Kaplan aekaplan

View GitHub Profile
View gist:5636802
<form>
<input type="text" placeholder="Basic Input"></input>
<input type="text" placeholder="Error" class="error"></input>
<textarea placeholder="Text Area"></textarea>
</form>
View gist:5636900
input[type="text"] {
background: #fff;
border: 1px solid #ddd;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
color: #555;
display: block;
margin-bottom: 1em;
padding: 0.5em;
@aekaplan
aekaplan / gist:5640867
Last active Dec 17, 2015
Input Text SCSS
View gist:5640867
@mixin transition {
-moz-transition: 0.4s background, 0.4s border-color;
-webkit-transition: 0.4s background, 0.4s border-color;
transition: 0.4s background, 0.4s border-color;
}
@mixin border-radius {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
View gist:5645883
<form>
<label>First Name</label>
<input type="text" placeholder="Adam"></input>
<label>Last Name</label>
<input type="text" placeholder="Kaplan"></input>
</form>
@aekaplan
aekaplan / gist:5679711
Last active Dec 17, 2015
Pseudo-Classes 3 CSS
View gist:5679711
.timeline:before {
background: #ddd;
content: " ";
position: absolute;
top: 20px;
left: 31%;
bottom: 0;
width: 1px;
}
@aekaplan
aekaplan / gist:5679831
Last active Dec 17, 2015
Pseudo-Classes 1 CSS
View gist:5679831
p.example:before {
background: #d31742;
content: "before";
color: #fff;
padding: 0 0.3em;
}
p.example:after {
background: #d31742;
content: "after";
@aekaplan
aekaplan / gist:5679880
Last active Dec 17, 2015
Pseudo-Classes 2 CSS
View gist:5679880
ul.example li:before {
content: "★";
color: #d31742;
padding-right: 0.5em;
}
@aekaplan
aekaplan / gist:5680048
Last active Dec 17, 2015
Pseudo-Classes 4 CSS
View gist:5680048
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
@aekaplan
aekaplan / gist:5682773
Last active Dec 17, 2015
Pseudo-Classes 7 CSS
View gist:5682773
.column-example {
float: left;
margin-left: 3.2%;
width: 31.2%;
}
.column-example:first-child {
border: 1px solid #008080;
margin-left: 0;
}
@aekaplan
aekaplan / gist:5682833
Last active Dec 17, 2015
Pseudo-Classes 5 HTML
View gist:5682833
<div class="row">
<div class="column-example-bad first">
<p>Column 1</p>
</div>
<div class="column-example-bad">
<p>Column 2</p>
</div>
<div class="column-example-bad">
You can’t perform that action at this time.