<section>
  <h1>YAUI Kit</h1>
  <h4>(Yet Another UI kit)</h4>
  
  
  
  <h2>Color Picker</h2>
  <div class="ui colors clearfix">
    <ul>
      <li></li>  
      <li></li>  
      <li></li>  
      <li></li>  
      <li></li>
      <li></li>  
      <li></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="John@Smith.com"    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="John@Smith.com"    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="https://twitter.com/darbybrown">@darbybrown
    <h3>Follow Me On Twitter</h3></a>
  </div>
  
  
</section>
@import "compass/css3";

/*==============================================
Demo Styles
================================================ */

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

body {
  background: #3498db;
  
  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;
  
  &:after {
      content: ".";
      display: block;
      clear: both;
      visibility: hidden;
      line-height: 0;
      height: 0;
    }
    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
================================================ */

.colors ul { 
  padding: 0;
  margin: 0;
  li {
    background: red;
    border-radius: 1rem;
    box-shadow: 0.1rem 0.1rem 0 rgba(black,0.2);
    cursor: pointer;
    float: left;
    height: 3rem;
    list-style: none;
    margin: 0 0.5rem;
    transition: border 0.5s ease;
    width: 3rem;
    
    &:first-child {
        background: #3498db;
      }
      
      &:nth-child(2){
        background: #9b59b6;
      }   
      
      &:nth-child(3){
        background: #1abc9c;
      }
      
      &:nth-child(4){
        background: #f39c12;
      }
      
      &:nth-child(5){
        background: #e74c3c;
      }
      
      &:nth-child(6){
        @include background-image(linear-gradient(left bottom, rgba(15,62,80,1) 0%,rgba(210,202,189,1) 100%));
      }
      
      &:nth-child(7){
        @include background-image(linear-gradient(left bottom, rgba(183,222,237,1) 0%,rgba(113,206,239,1) 40%,rgba(33,180,226,1) 70%,rgba(183,222,237,1) 100%));
      }  
      
  }
}


/*==============================================
Drop Down Menus
================================================ */



.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 {
      display:block;
      color:#fff;
      padding:10px 10px 10px 18px;
      cursor:pointer;
      
      &:hover {
          background: rgba(black,0.5); 
          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;
    }
}
View Compiled
/*
As usual works best with WebKit

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


//Color Picker

$(".colors li").click(function() {  $("body").css("background",$(this).css("background"))
});


// Dropdown Menu

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

// Notifications 

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

// Twitter 

$.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);
});

External CSS

  1. https://fonts.googleapis.com/css?family=Roboto+Slab:400,700

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://s.cdpn.io/31787/html5slider.js