Skip to content

Instantly share code, notes, and snippets.

@hadyfayed
Created January 27, 2014 17:46
Show Gist options
  • Save hadyfayed/8653592 to your computer and use it in GitHub Desktop.
Save hadyfayed/8653592 to your computer and use it in GitHub Desktop.
A Pen by Robin Brons.
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class="row mt">
<div class="large-5 columns">
<div class="msg error">
<strong>Oops..</strong> something went wrong <span class="close">&times;</span>
</div>
<div class="msg succes">
<strong>Success!</strong> we saved your preferences <span class="close">&times;</span>
</div>
<div class="msg warn">
<strong>Easy tiger</strong> give us some time to update <span class="close">&times;</span>
</div>
</div> <!-- .large-6 -->
<div class="large-2 columns">
<input type="button" class="red" value="Red Button" />
<input type="button" class="blue" value="Blue Button" />
<input type="button" class="purple" value="Purple Button" />
</div> <!-- .large-2 -->
<div class="large-2 columns">
<input type="button" class="yellow" value="Yellow Button" />
<input type="button" class="green" value="Green Button" />
<input type="button" value="Grey Button" />
</div> <!-- .large-2 -->
<div class="large-3 columns">
<div class="progress">
<span style="width: 80%"></span>
</div>
<div class="progress red">
<span style="width: 65%"></span>
</div>
<div class="progress yellow">
<span style="width: 46%"></span>
</div>
<div class="progress purple">
<span style="width: 33%"></span>
</div>
</div>
</div> <!-- .row -->
<div class="row mt">
<div class="large-3 columns">
<input type="text" placeholder="input[type=text]" />
<input type="password" placeholder="input[type=password]" />
<input type="email" placeholder="input[type=email]" />
</div> <!-- .large-3 -->
<div class="large-3 columns">
<input type="text" placeholder="Invalid" class="error" />
<input type="text" placeholder="Valid" class="succes" />
<input type="text" placeholder="Disabled" disabled />
</div> <!-- .large-3 -->
<div class="large-3 columns">
<input type="text" class="lradius" placeholder="Increased border radius" />
<select name='options'>
<option value='option-0'>Select...</option>
<optgroup label="Item 1">
<option value='option-1'>Item 1.1</option>
<option value='option-2'>Item 1.2</option>
<option value='option-3'>Item 1.3</option>
</optgroup>
<option value='option-4'>Item 2</option>
<option value='option-5'>Item 3</option>
</select>
<select name='options' class="lradius">
<option value='option-0'>Select... (increased radius)</option>
<option value='option-1'>First option</option>
<option value='option-2'>Second option</option>
<option value='option-3'>Third option</option>
</select>
</div> <!-- .large-3 -->
<div class="large-3 columns">
<textarea placeholder="This is a textarea where you can put loads of things.." rows="6"></textarea>
</div> <!-- .large-3 -->
</div> <!-- .row -->
<div class="row mt">
<div class="large-2 columns">
<p><strong class="light">input[type=radio]</strong></p>
</div>
<div class="large-4 columns">
<input type="radio" name="radiored" class="red" checked />
<input type="radio" name="radiored" class="red" />
<input type="radio" name="radioblue" class="blue" checked />
<input type="radio" name="radioblue" class="blue" />
<input type="radio" name="radiogreen" class="green" checked />
<input type="radio" name="radiogreen" class="green" />
<input type="radio" name="radioyellow" class="yellow" checked />
<input type="radio" name="radioyellow" class="yellow" />
<input type="radio" name="radiopurple" class="purple" checked />
<input type="radio" name="radiopurple" class="purple" />
<input type="radio" name="radiobt" checked />
<input type="radio" name="radiobt" />
</div>
<div class="large-2 columns">
<p><strong class="light">input[type=checkbox]</strong></p>
</div>
<div class="large-4 columns">
<input type="checkbox" name="checkred" class="red" checked />
<input type="checkbox" name="checkred" class="red" />
<input type="checkbox" name="checkblue" class="blue" checked />
<input type="checkbox" name="checkblue" class="blue" />
<input type="checkbox" name="checkgreen" class="green" checked />
<input type="checkbox" name="checkgreen" class="green" />
<input type="checkbox" name="checkyellow" class="yellow" checked />
<input type="checkbox" name="checkyellow" class="yellow" />
<input type="checkbox" name="checkpurple" class="purple" checked />
<input type="checkbox" name="checkpurple" class="purple" />
<input type="checkbox" name="checkbt" checked />
<input type="checkbox" name="checkbt" />
</div>
</div> <!-- .row -->
$(document).ready( function() {
$('.close').click( function() {
$(this).parent().fadeOut();
});
});
@import "compass";
@import url(http://fonts.googleapis.com/css?family=Quicksand:300,400,700);
$red: hsl(2, 75%, 61%);
$green: hsl(136, 33%, 53%);
$yellow: hsl(36,76%,56%);
$blue: hsl(211,63%,60%);
$purple: hsl(277,15%,49%);
$white: hsl(0, 0%, 100%);
$grey: hsl(0, 0%, 90%);
$black: hsl(0, 0%, 0%);
$radius: 2px;
@mixin gradient($color) {
background: linear-gradient(to bottom,
$color 0%,
darken($color, 6%)
100%);
}
@mixin border($color) {
color: $color;
border-color: lighten($color, 6%);
&:focus {
border-color: darken($color, 4%);
}
}
@mixin button($color) {
background: linear-gradient(to bottom,
$color 0%,
darken($color, 6%)
100%);
&:focus {
background: linear-gradient(to bottom,
darken($color, 6%)
0%,
darken($color, 12%)
100%);
}
}
body {
font-family: 'Quicksand', sans-serif;
font-weight: 400;
-webkit-font-smoothing: subpixelantialiased;
text-rendering: optimizeLegibility
}
.mt {
margin-top: 1.25em;
}
.row:last-child {
margin-bottom: 1.25em;
}
/* Messages */
.msg {
border-radius: $radius;
position: relative;
color: $white;
padding: 10px 12px;
font-size: 13px;
}
.msg:nth-child(n+2) {
margin-top: 7px;
}
.msg.error {
@include gradient($red);
}
.msg.succes {
@include gradient($green);
}
.msg.warn {
@include gradient($yellow);
}
.msg .close {
width: 15px;
display: inline-block;
border-radius: $radius;
position: absolute;
right: 10px;
top: 10px;
cursor: pointer;
font-weight: 700;
line-height: 15px;
text-align: center;
}
/* Inputs */
input {
margin: 0;
font-family: 'Quicksand', sans-serif;
}
input[disabled] {
background-color: lighten($grey, 5%) !important;
cursor: no-drop!important;
}
input[type=text],
input[type=password],
input[type=email],
textarea,
select {
height: 100%;
border: 2px solid $grey;
border-radius: $radius;
box-shadow: none;
margin: 0;
outline: none;
padding: 6.5px 12px;
font-size: 13px;
font-weight: 400;
&:focus {
border: 2px solid darken($grey, 12%);
box-shadow: none;
}
}
input.error,
textarea.error {
@include border($red);
}
input.succes,
textarea.succes {
@include border($green);
}
input:nth-child(n+2),
input + textarea,
input + .progress,
input + select,
select + select {
margin-top: 7px;
}
input.lradius,
select.lradius {
border-radius: $radius*10;
}
/* Button */
input[type=button],
button {
width: 100%;
@include gradient($grey);
border: 1px solid transparent;
border-radius: $radius;
outline: none;
padding: 8px 0;
font-size: 13px;
}
input[type=button].red,
button.red {
color: $white;
@include gradient($red);
}
input[type=button].blue,
button.blue {
color: $white;
@include gradient($blue);
}
input[type=button].purple {
color: $white;
@include gradient($purple);
}
input[type=button].green {
color: $white;
@include gradient($green);
}
input[type=button].yellow {
color: $white;
@include gradient($yellow);
}
select:hover {
border-color: $grey;
}
/* Progress */
.progress {
height: 20px;
background-color: $grey;
border: none;
border-radius: $radius;
overflow: hidden;
padding: 0;
}
.progress > span {
height: 100%;
display: block;
@include gradient($blue);
}
.progress.red > span {
@include gradient($red);
}
.progress.purple > span {
@include gradient($purple);
}
.progress.yellow > span {
@include gradient($yellow);
}
/* Checkbox */
input[type=radio] {
width: 20px;
height: 20px;
background-color: $white;
border: 2px solid $grey;
border-radius: 50%;
outline: none;
appearance: none;
position: relative;
cursor: pointer;
transition: transform .4s;
}
input[type=radio]:checked:after {
display: block;
border: 5px solid;
border-color: darken($grey, 10%);
border-radius: inherit;
position: absolute;
top: 3px;
left: 3px;
content: '';
}
input[type=checkbox] {
width: 20px;
height: 20px;
background-color: $white;
border: 2px solid $grey;
border-radius: 2px;
outline: none;
position: relative;
appearance: none;
cursor: pointer;
}
input[type=checkbox]:checked:after {
width: 13px;
height: 8px;
display: block;
border-bottom: 4px solid;
border-left: 4px solid;
border-color: darken($grey, 10%);
transform: rotate(-45deg);
position: absolute;
top: 2px;
left: 2px;
content: '';
}
/* Radio & Checkbox colors */
input.red:checked:after {
border-color: $red;
}
input.blue:checked:after {
border-color: $blue;
}
input.purple:checked:after {
border-color: $purple;
}
input.yellow:checked:after {
border-color: $yellow;
}
input.green:checked:after {
border-color: $green;
}
/* sdf */
strong.light {
display: inline-block;
margin-top: 6px;
color: darken($grey, 50%);
font-size: 14px;
}
@media only screen and (max-width: 64.063em) {
.columns:nth-child(n+2) {
margin-top: 1.25em;
}
}

UI-Kit - 'Flat-ish'*

I was a little bored so I made this :D

* It's not really Flat, I know if someone knows a name, please tell me so I can change it :)

A Pen by Robin Brons on CodePen.

License.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment