A Pen by Robin Brons.

index.html

<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 --> 

script.js

$(document).ready( function() {
  $('.close').click( function() {
    $(this).parent().fadeOut();  
  });
}); 

style.scss

@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*.markdown

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.