Ai UI-kit v2

by Victor

HTML

<h2>Colors</h2>
<div class="colors">
    <label for="">Main</label> 
        <label for="">Main Dark</label> 
        <label for="">Main Light</label> 
        <label for="">Secondary</label> 
        <label for="">Secondary Light</label> 
        <label for="">Secondary Dark</label> 
</div>
<br>
    <h2>Navigations</h2>
<div class="barNav">
    <h1><a href="#"><img src="http://www.hhhhold.com/80" alt=""/></a></h1>
    
    <ul class="nav">
            <li><a class="current" href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Social</a></li>
        </ul>
</div>
<br>    
    <div class="tabNav">
    <ul class="nav">
        
            <li ><a href="#" class="current">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Social</a></li>
    </ul>
</div>
    <br/>
<div class="blockNav">
            <h1><a href="#">TEXT</a></h1>
    
    <ul class="nav">
        
            <li><a class="current" href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Social</a></li>
        
    </ul>
</div>
    <br/>
    <div class="floatNav">
        <div class="floatNavShow">|||</div>
           <ul class="nav">        
            <li><a class="current" href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Social</a></li>
        
    </ul>
    </div>

SCSS

*, *:before, *:after {
    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body {
    font-weight:normal;
    font-size:20px;
    width:100%; 
    * {
        font-family:sans-serif;
    }
}
body {padding:10px;}
div {
    max-width:100%;
}


/* color setup */
$main:#4679BD;
$mainDark:#30527F;
$mainLight:#5089D3;
$secondary:#999;
$secondaryDark:#666;
$secondaryLight:#e3e3e3;

.colors label {width:100%;height:30px; display:block;font-weight:bolder; color:white;text-shadow:0 -1px 0 #333; padding:4px 10px;}
.colors label:first-child {background:$main;}
.colors label:nth-child(2) {background:$mainDark}
.colors label:nth-child(3) {background:$mainLight;}
.colors label:nth-child(4) {background:$secondary;}
.colors label:nth-child(5) {background:$secondaryLight;}
.colors label:nth-child(6) {background:$secondaryDark;} 

/* text styles */
h1 {
    font-size:60px;
}
h2{
    font-size:40px;
}
h3{
    font-size:30px;
}
h4 {}
h5 {}

p {}
span {}
blockquote {}
aside {}
article {}
cite {}

/* Nav styles */
.barNav {
    background:#222;
    min-height:100px;
    padding:10px 10px 0;
    h1 {
        display:inline-block;
        img {
            border-radius:40px;
            -moz-border-radius:40px;
            -webkit-border-radius:40px;
            -ms-border-radius:40px;}
    }
    .current {color:$main;}
    .nav {
        min-height: 80px;
        vertical-align:top;
        display:inline-block;
        line-height:70px;
        li {
            display:inline;
            padding: 0px;
            color;white;
            display:inline-block;
            a {
                color:white;
                text-decoration: none;
                font-weight: bolder;
                width:100%;
                height:100%;
                padding:4px 5px;   
                display:inline-block;
                text-transform: uppercase;
            }
            
            &:last-of-kind {
                    margin-right:0;
...