A Pen by Hugo Darby-Brown.

index.html

<section>
  <h1>YAUI Kit v2</h1>
  <h4>(Yet Another UI kit part 2)</h4> 
  
  
  <h2>Color Picker v2</h2>
  
  <div class="ui colors clearfix"> 
    <div id="red"></div>
    <div id="green"></div> 
    <div id="blue"></div>
  </div> 
  
  
  <h2>Ratings</h2> 
  
  <fieldset class="rating ui">
    <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Rocks!">5 stars</label>
    <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
    <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
    <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Kinda bad">2 stars</label>
    <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Sucks big time">1 star</label>  
  </fieldset>
  
  
  
  <h2>Progress Steps</h2> 
  
  <ol class="ui progress">
    <li class="active">
      <span>Step 1</span><span>1</span>
    </li>
    <li class="active">
      <span>Step 2</span><span>2</span>
    </li>
    <li>
      <span>Step 3</span><span>3</span>
    </li>
    <li>
      <span>Step 4</span><span>4</span>
    </li> 
  </ol>
  
  
  
  <h2>Video</h2>
  
  <div class="ui video">
    <div id="video-container">
      <!-- Video -->
      <video id="video" width="100%" height="189">
        <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm">
          <source src="http://video-js.zencoder.com/oceans-clip.ogv" type="video/ogv">
            <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4">
              <p>
                Your browser doesn't support HTML5 video.
                <a href="videos/mikethefrog.mp4">Download</a> the video instead. 
              </p>
            </video>
            <!-- Video Controls --> 
            <div id="video-controls"> 
              <button type="button" id="play-pause"><span class="fontawesome-play"></span></button>
              <input type="range" id="seek-bar" value="0">
                <button type="button" id="mute"><span class="fontawesome-volume-off"></span></button>
                <input type="range" id="volume-bar" min="0" max="1" step="0.1" value="1">
                  <button type="button" id="full-screen"><span class="fontawesome-fullscreen"></span></button>
                </div>
              </div>          
            </div>
            
            
            <h2>Menu Notifications</h2>
            
           <div class="ui menu-notification">
             <ul>
               <li>Item1</li>
               <li>Item2</li>
               <li>Item3</li>
               <li>Item4</li>
               <li class="notification-sml">Item5</li>
             </ul>
           </div>
            

              <h2>Menu</h2>
  <div class="menu ui">
    <div>
      Menu
      <span class="fontawesome-caret-down"></span>
    </div>
    <ul>
      <li>Menu Item 1</li>
      <li>Menu Item 2</li>
      <li>Menu Item 3</li>
      <li>Menu Item 4</li>
    </ul>
  </div>
  
  
  <h2>Slider</h2>
  <div class="ui">
    <input type="range" min="0" max="50" value="7" step="0"/>
  </div>
  
  
  
  <h2>Progress Bar</h2>
  
  <div class="ui progress">
    <span style="width: 56%"></span>
  </div>
  
  
  
  <h2>Notifications</h2>
  
  <div class="ui notifications">
    <ul>
      <li class="notification"><span class="fontawesome-envelope"></span></li>
      <li><span class="fontawesome-twitter"></span></li>
      <li class="notification"><span class="fontawesome-comments"></span></li>
      <li><span class="fontawesome-rss"></span></li>
    </ul>  
  </div>
  
  
  
  <h2>Subscribe</h2>
  
  <div class="ui">
    <label for="name">Email:</label>
    <input type="email" name="name" id="name" placeholder="[email protected]"    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}"/>
    <input type="submit" value="Submit" />
    <div class="input-validation"></div>
  </div>  
  
  <div class="ui">
    <label for="name"><span class="fontawesome-envelope"></span></label>
    <input type="email" name="name" id="name" placeholder="[email protected]"    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}"/>
    <input type="submit" value="Submit" />
    <div class="input-validation2"></div>
  </div>  
  
  
  
  <h2>Log in </h2>
  
  <div class="ui login">
    <label for="name">Username:</label>
    <input type="email" name="name" id="name" placeholder="John Smith" />
    <label for="name">Password:</label>
    <input type="password" name="name" id="name" placeholder="********" />
    <input type="submit" value="Submit"/>
  </div>  
  
  
  
  <h2>Search</h2>
  
  <div class="ui">
    <label for="name"><span class="fontawesome-search"></span></label>
    <input type="email" name="name" id="name" />
    <input type="submit" value="Search"/>
  </div>   
  
  <div class="ui search2">
    <label for="name"><span class="fontawesome-search"></span></label>
    <input type="email" name="name" id="name" placeholder="Press enter to search"/>
  </div>   
  
  
  
  
  <h2>Twitter</h2>
  
  <div class="ui twitter">
   
    <div>
      </div>  
     <span class="fontawesome-twitter"></span>
    <a href="http://twitter.com/darbybrown">@darbybrown
    <h3>Follow Me On Twitter</h3></a>
  </div>
            
          </section>

script.js

/*
V1 of this UI Kit can be found here:
http://codepen.io/hugo/pen/qwsFj

As usual works best with WebKit

Take it, use it, do what you want with it
Sharing is Caring :)

*/ 




// Progress Steps JS Thanks to Francesco :)  http://codepen.io/Francext

$("ol.ui li").click(function(e) {
  var currentElem = $('.ui.progress > li').index($(this));
  if($(this).is('.ui.progress > li:last-child') && !$(this).hasClass('active')) {
    var elem = document.querySelectorAll('.ui.progress > li');
    
    [].forEach.call(elem, function(index, value) { 
      index.classList.add('active');  
    }); 
  }
  else {  
    $(this).toggleClass('active'); 
  }
});


//Color Picker 

function hexFromRGB(r, g, b) {
  var hex = [
    r.toString( 16 ),
    g.toString( 16 ),
    b.toString( 16 )
  ];
  $.each( hex, function( nr, val ) {
    if ( val.length === 1 ) {
      hex[ nr ] = "0" + val;
    }
  });
  return hex.join( "" ).toUpperCase();
}
function refreshSwatch() {
  var red = $( "#red" ).slider( "value" ),
      green = $( "#green" ).slider( "value" ),
      blue = $( "#blue" ).slider( "value" ),
      hex = hexFromRGB( red, green, blue );
  $( "body" ).css( "background-color", "#" + hex );
}
$(function() {
  $( "#red, #green, #blue" ).slider({
    orientation: "horizontal",
    range: "min",
    min: 50,
    max: 190,
    value: 127,
    slide: refreshSwatch,
    change: refreshSwatch
  });
  $( "#red" ).slider( "value", 115 );
  $( "#green" ).slider( "value", 59 );
  $( "#blue" ).slider( "value", 172 );
});



// Menu Notifications 

$(".menu-notification ul li").click(function() {
  $(this).toggleClass('notification-sml');
});

// Dropdown Menu

$(".menu").click(function () {
  $(".menu ul").slideToggle("600"); 
});

// Notifications 

$(".notifications ul li").click(function() {
  $(this).toggleClass('notification');
});

// Twitter old API no longer works

$.getJSON("https://api.twitter.com/1/statuses/user_timeline/darbybrown.json?count=1&include_rts=1&callback=?", function(data) {
     $(".twitter div").html(data[0].text);
});

style.scss

@import "compass";
/*==============================================
Demo Styles
================================================ */

html {
  font-family: 'Roboto Slab', serif;
  font-size: 16px;
  height: 100%;
}

body {
  background: #9b59b6;
  
  text-align: center;
}

* {
  box-sizing: border-box;
}

section {
  width: 30rem;
  margin: auto;
  padding-bottom: 10rem;
  
} 

h1 {
  color: #fff;
  font-size: 5rem;
  font-weight: bold;
  margin: 0 0 2rem 0;
  text-shadow: 0.2rem 0.2rem 0.1rem rgba(black,0.4);
}

h2 {
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  margin:0;
  text-shadow: 0.2rem 0.2rem 0.1rem rgba(black,0.4);
} 

h4 {
  color: #fff;
  margin: -2rem 0 2rem 0;
  text-shadow: 0.1rem 0.1rem 0.1rem rgba(black,0.4); 
}

/*==============================================
Base Form Styles 
All form elements need these styles
The rest are modular
================================================ */
@import "http://weloveiconfonts.com/api/?family=fontawesome"; 

[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
  font-size: 1.5rem;
  line-height: 2;
}

.ui  {
  border-radius: 2rem; 
  box-shadow: inset 0.1rem 0.1rem 0 rgba(black,0.1), 0.2rem 0.2rem 0 rgba(white,0.1); 
  background:  rgba(black,0.25);
  display: inline-block;
  font-size: 1rem;
  margin: 0 0 1rem 0 ;
  padding: 1rem;
  text-align: center;
  width: 30rem;
  
   input[type="email"],input[type="password"],input[type="search"]{
      background:  rgba(black,0.25);
      border: 0;
      border-radius: 0;
      height: 3rem;
      width: 58%; 
      color: #fff;
      float:left;
      padding-left: 0.5rem;
      
      &:focus {
          background:  rgba(black,0.5);
          transition: background 1s ease;
        }
    }
    input[type="submit"] {
      background:  rgba(black,0.4);
      border: 0;
      border-radius: 0 1rem 1rem 0;
      color: #fff;
      float:left;
      height: 3rem;
      width: 20%; 
      z-index: 3;
      
      &:hover { 
          background:  rgba(black,0.6);
          transition: all 1s ease;
        }
    }
    label {
      background:  rgba(black,0.4);
      border: 0;
      border-radius: 0 1rem 1rem 0;
      color: #fff;
      float:left;
      height: 3rem;
      width: 20%; 
      z-index: 3;
      border-radius: 1rem 0 0 1rem;
      line-height: 3; 
    }
}


/*==============================================
Color Picker Slider
================================================ */

#red, #green, #blue {
  float: left;
  clear: left;
  width: 100%;
  margin: 1rem 0;
}



#red .ui-slider-range { 
  background: #ef2929;
}

#green .ui-slider-range { 
  background: #8ae234; 
}

#blue .ui-slider-range { 
  background: #729fcf; 
} 


.ui-slider-handle{
  width:2rem !important;
  height:2rem !important;
  border-radius: 50%;
  margin-top: -0.2rem;  
}

.ui-slider-range {
  border-radius: 1rem; 
}

.colors > div {
  background: rgba(black,0.5);
  border: none;
  border-radius: 1rem;
  height: 1rem;
  width: 100%;
}


/*==============================================
Ratings modified version of Lea Verou's
http://lea.verou.me/2011/08/accessible-star-rating-widget-with-pure-css/
================================================ */
fieldset {
  border: 0;  
}

.rating:not(:checked) > input {
  clip:rect(0,0,0,0);  
  position:absolute;
  top:-9999px;
}

.rating:not(:checked) > label {
  background: none;
  color:rgba(black, 0.6);  
  cursor:pointer;
  float:right;
  height: 3.5rem;
  overflow:hidden;
  padding:0;
  transition: color 1s ease-in-out;
  white-space:nowrap;
  width:5.4rem; 
}

.rating:not(:checked) > label:before {
  content: '= ';
  font-family: 'Typicons', sans-serif;
  font-size:5rem;
  line-height: 1;
}

.rating > input:checked + label:hover,
.rating > input:checked + label:hover ~ label,
.rating > input:checked ~ label:hover,
.rating > input:checked ~ label:hover ~ label,
.rating > label:hover ~ input:checked ~ label,
.rating:not(:checked) > label:hover,
.rating:not(:checked) > label:hover ~ label,
.rating > input:checked ~ label{
  color: #fff;
  text-shadow: 0.1rem 0.1rem 0.1rem rgba(black, 0.4);
  transition: color 1s ease-in-out;
}

/*==============================================
Progress Steps
================================================ */

ol.ui {
  list-style: none;
  list-style-image: none;
  margin: 0 0 1rem 0;
  padding: 1rem 0 1rem 1rem;
  white-space: nowrap;
  
  li {
    float: left;
    margin-right: 1rem;
    position: relative;
    text-align: center;
    width: 100px;
  }
  
  li > span {
    color: #fff;
    display: block;
    margin-bottom: 0.5rem;
    width: 100px;
  }
  
  span:nth-of-type(2) {
      background: rgba(black,0.4);
      border: 0.2rem solid rgba(black,0);
      border-radius: 50%;
      cursor: pointer; 
      font-size: 1.5rem;
      font-weight: bold;
      width: 3rem;
      height: 3rem;
      display: inline-block;
      line-height: 1.7;
      transition: all 1.2s ease-in-out;
      
      &:before {
          background: rgba(black,0.4);
          bottom: 1.9rem;
          content: ""; 
          height: 0.5rem;
          left: -2.65rem; 
          position: absolute;
          transition: all 1.2s ease-in-out;
          width: 0rem; 
        }
        
        &:after {
          background: rgba(black,0.4);
          bottom: 1.9rem;
          content: ""; 
          height: 0.5rem;
          left: 4.65rem;
          position: absolute;
          transition: all 1.2s ease-in-out;
          width: 4.35rem; 
        }
    }
    
    li:first-of-type span:nth-of-type(2):before,
    li:last-of-type span:nth-of-type(2):after {
      display: none;
    }
    
    .active span:nth-of-type(2) {
      border: 0.2rem solid white;
      transition: all 1s ease-in-out;
      transition-delay: 0.8s;   
      
      &:before {
          background: white; 
          transition: all 1.2s ease-in-out;
          width: 4.35rem; 
        }   
    }  
    
    p {
      color: #fff;
      left: 50%;
      margin-left: -1rem;
      margin-top: 4.5rem;
      cursor: pointer;
      position: absolute;
    }
}    

#first {
  transition-delay: 0;
}


/*==============================================
Video Player
================================================ */
input[type='range'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 1rem;
  background: rgba(black,0.5);
  height: 1rem;
  width:100%;
  
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 1rem;
  background: white;
  height: 2rem;
  width: 2rem;
}

#video-container {
  margin: 0.5rem 0.5rem 0 0.5rem;
}

#video-controls {
  position: relative;
  bottom: 0;
  left: 0;
  right: 0;
}


button {
  background: none;
  border: 0;
  color: #EEE; 
  border-radius: 3px;
  width: 2rem;
  
  [class*="fontawesome-"]:before {
      font-family: 'FontAwesome', sans-serif;
      font-size: 1.5rem;
      line-height: 1.7;
    }
    
    
}

button:hover {
  cursor: pointer;
  color: #ccc;
}

#seek-bar {
  width: 58%;
}

#volume-bar {
  width: 16%; 
}


/*==============================================
Menu
================================================ */

.ui ul {
  list-style: none;
  margin: 0 -1rem;
  
  li {
    color: #fff;
    cursor: pointer;
    float: left;
    font-size: 1.3rem;
    height: 2rem;
    position: relative;
    text-shadow: 0.1rem 0.1rem 0.1rem rgba(black,0.6); 
     width: 5rem;
  }
}


.notification-sml {
  &:after {
      background: #e50000;
      border-radius: 1rem 1rem 1rem 0;
      box-shadow: 0.05rem 0.05rem 0.1rem rgba(black, 0.6);
      content: '1';
      font-size: 0.8rem; 
      font-weight: bold;
      height: 1.2rem;
      left: 4.4rem;
      margin-top: -1rem;
      position: absolute;
      width: 1.2rem;
    }
}

/*==============================================
Drop Down Menu
================================================ */



.menu{
  
  ul {
    list-style:none;
    display:none;
    width:100%;
    background: rgba(black,0.5);
    float: left;
    margin: 1rem 0 0 0;
    padding:0;
    border-radius: 1rem;
    overflow:hidden;
    
    li {
      color:#fff;
      cursor:pointer;
      display:block;
      float:none;
      height: 3rem;
      padding: 0.5rem;
      width:100%; 
      
      &:hover {
          background: rgba(black,0.5); 
          border-radius:1rem;
          cursor:pointer;
        }
    }  
  }
  div {
    float: left;
    width:100%;
    background: rgba(black,0.25);
    border-radius:1rem;
    color:#fff;
    cursor:pointer;
    line-height: 3;
    padding-left: 3rem;
    
    span {
      float: right;
      background: rgba(black,0.2);
      border-radius: 0 1rem 1rem 0;
      cursor:pointer;
      padding: 0 1rem;
      
      &:hover {
          background: rgba(black,0.5);
        }
    }  
  }
}

/*==============================================
Slider
================================================ */
input[type='range'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 1rem;
  background: rgba(black,0.5);
  height: 1rem;
  width:100%;
  
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  border-radius: 1rem;
  background: white;
  height: 2rem;
  width: 2rem;
}

/*==============================================
Progress Bar
=============================================== */

.progress > span {
  background-color: rgba(white,0.6);
  border-radius: 1rem;
  display: block;
  height: 2rem;
  overflow: hidden;	
  position: relative;
  
  &:after { 
      background-image: 
        linear-gradient(
        -45deg, 
        rgba(black, .8) 25%, 
        transparent 25%, 
        transparent 50%, 
        rgba(255, 255, 255, .8) 50%, 
        rgba(255, 255, 255, .8) 75%, 
        transparent 75%, 
        transparent
        ); 
      background-size: 5rem 5rem;
      border-radius: 1rem;
      content: "";
      overflow: hidden;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
      z-index: 1;
    }
}  

/*==============================================
Notifications
=============================================== */

.notifications ul {
  margin: 0;
  padding: 0;
  
  li {
    background-color: rgba(black,0.5);
    border-radius: 1rem;
    color: #fff;
    cursor: pointer;
    float: left;  
    height: 5rem;
    list-style: none;
    margin: 0 0.5rem;
    width: 6rem;
    
    [class*="fontawesome-"]:before {
        font-size: 3rem;
        line-height: 1.7;
      }
      
  }
}

.notification {
  &:after {
      background: #e50000;
      border-radius: 1rem 1rem 1rem 0;
      box-shadow: 0.05rem 0.05rem 0.1rem rgba(black, 0.6);
      content: '1';
      font-size: 1.3rem;
      font-weight: bold;
      height:2rem;
      position: absolute;
      margin-top: -0.5rem;
      width: 2rem;
    }
}


/*==============================================
Login Form
================================================ */

.login {
  input[type="email"],input[type="password"]{
    border-radius: 0 1rem 1rem 0; 
    margin: 0.5rem 0;
    width: 75%;
  }
  
  label {
    margin: 0.5rem 0;
    width: 25%; 
  }
  
  input[type="submit"] { 
    border-radius: 1rem;
    margin: 1rem 0;
    width: 100%;
  }
}


input[type="email"]:valid ~ .input-validation:after {
  background: rgba(black,0.5);
  border-radius: 1rem;
  content: "✓"; 
  color: #fff;
  font-size: 2rem;
  height: 3rem;
  line-height: 1.5;
  margin-left: 2rem;
  position: absolute;
  width: 3rem;
}

input[type="email"]:invalid ~ .input-validation:before {
  background: rgba(black,0.5);
  border-radius: 1rem;
  content: "X"; 
  color: #fff;
  font-family: 'arial', sans-serif;
  font-size: 2rem;
  font-weight: bold;
  height: 3rem;
  line-height: 1.5;
  margin-left: 2rem;
  position: absolute;
  width: 3rem;
}


input[type="email"]:invalid ~ .input-validation2:after {
  border-radius: 1rem;
  content: "This is an invalid email address"; 
  color: #fff;
  top: 0.5rem;
  position: relative;
}

/*==============================================
Search Inputs
================================================ */


.search2{
  input[type="email"] {
    border-radius: 0 1rem 1rem 0;
    width: 80%; 
  }
}

/*==============================================
Twitter Widget
================================================ */

.twitter {
  .fontawesome-twitter:before {
      color: #fff;  
      float: left;
      font-size: 4rem;
      line-height: 2;
      margin: -1rem 0 -2rem 0.5rem;
      
    }
    
    div {
      background: rgba(black,0.4);
      border-radius: 1rem;
      color: #fff;
      float: right;
      font-size: 1.3rem; 
      margin-bottom: 0.5rem;
      padding: 1rem; 
      position: relative;
      width: 100%;
      word-wrap:break-word;
      
      &:after {
          content:"";
          display:block; /* reduce the damage in FF3.0 */
          position:absolute;
          bottom:-15px;
          left:50px;
          width:0;
          border-width:15px 15px 0;
          border-style:solid;
          border-color: rgba(black,0.4) transparent;
        }
    }
    a {
      color: #fff; 
      font-size: 1.5rem;
      text-decoration: none;
    }
    
    h3 {
      color: #fff;
      font-size: 2rem;
      margin:0;
      padding: 0;
    }
}

YAUI-v2.markdown

YAUI v2

Version 2 of Yet Another UI kit, Hope you like it :)

A Pen by Hugo Darby-Brown on CodePen.

License.