YAUI v2

Developer
Hugo DarbyBrown
Size
11,912 Kb
Views
52,624
  1. YAUI v2 Previews
  2. YAUI v2 HTML Codes
  3. YAUI v2 CSS Codes
  4. YAUI v2 JS Codes

How do I make an yaui v2?

Version 2 of Yet Another UI kit, Hope you like it :). What is a yaui v2? How do you make a yaui v2? This script and codes were developed by Hugo DarbyBrown on 09 August 2022, Tuesday.

YAUI v2 Previews
IQ Test

YAUI v2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>YAUI v2</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700'>
<link rel='stylesheet prefetch' href='http://weloveiconfonts.com/api/?family=typicons'>
<link rel='stylesheet prefetch' href='http://weloveiconfonts.com/api/?family=fontawesome'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @charset "UTF-8";
/*==============================================
Demo Styles
================================================ */
@import "http://weloveiconfonts.com/api/?family=fontawesome";
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(0, 0, 0, 0.4);
}
h2 { color: #fff; font-size: 2rem; font-weight: bold; margin: 0; text-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.4);
}
h4 { color: #fff; margin: -2rem 0 2rem 0; text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.4);
}
/*==============================================
Base Form Styles
All form elements need these styles
The rest are modular
================================================ */
[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(0, 0, 0, 0.1), 0.2rem 0.2rem 0 rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.25); display: inline-block; font-size: 1rem; margin: 0 0 1rem 0; padding: 1rem; text-align: center; width: 30rem;
}
.ui input[type="email"], .ui input[type="password"], .ui input[type="search"] { background: rgba(0, 0, 0, 0.25); border: 0; border-radius: 0; height: 3rem; width: 58%; color: #fff; float: left; padding-left: 0.5rem;
}
.ui input[type="email"]:focus, .ui input[type="password"]:focus, .ui input[type="search"]:focus { background: rgba(0, 0, 0, 0.5); transition: background 1s ease;
}
.ui input[type="submit"] { background: rgba(0, 0, 0, 0.4); border: 0; border-radius: 0 1rem 1rem 0; color: #fff; float: left; height: 3rem; width: 20%; z-index: 3;
}
.ui input[type="submit"]:hover { background: rgba(0, 0, 0, 0.6); transition: all 1s ease;
}
.ui label { background: rgba(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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;
}
ol.ui li { float: left; margin-right: 1rem; position: relative; text-align: center; width: 100px;
}
ol.ui li > span { color: #fff; display: block; margin-bottom: 0.5rem; width: 100px;
}
ol.ui span:nth-of-type(2) { background: rgba(0, 0, 0, 0.4); border: 0.2rem solid transparent; 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;
}
ol.ui span:nth-of-type(2):before { background: rgba(0, 0, 0, 0.4); bottom: 1.9rem; content: ""; height: 0.5rem; left: -2.65rem; position: absolute; transition: all 1.2s ease-in-out; width: 0rem;
}
ol.ui span:nth-of-type(2):after { background: rgba(0, 0, 0, 0.4); bottom: 1.9rem; content: ""; height: 0.5rem; left: 4.65rem; position: absolute; transition: all 1.2s ease-in-out; width: 4.35rem;
}
ol.ui li:first-of-type span:nth-of-type(2):before,
ol.ui li:last-of-type span:nth-of-type(2):after { display: none;
}
ol.ui .active span:nth-of-type(2) { border: 0.2rem solid white; transition: all 1s ease-in-out; transition-delay: 0.8s;
}
ol.ui .active span:nth-of-type(2):before { background: white; transition: all 1.2s ease-in-out; width: 4.35rem;
}
ol.ui 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(0, 0, 0, 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;
}
button [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;
}
.ui ul li { color: #fff; cursor: pointer; float: left; font-size: 1.3rem; height: 2rem; position: relative; text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.6); width: 5rem;
}
.notification-sml:after { background: #e50000; border-radius: 1rem 1rem 1rem 0; box-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 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(0, 0, 0, 0.5); float: left; margin: 1rem 0 0 0; padding: 0; border-radius: 1rem; overflow: hidden;
}
.menu ul li { color: #fff; cursor: pointer; display: block; float: none; height: 3rem; padding: 0.5rem; width: 100%;
}
.menu ul li:hover { background: rgba(0, 0, 0, 0.5); border-radius: 1rem; cursor: pointer;
}
.menu div { float: left; width: 100%; background: rgba(0, 0, 0, 0.25); border-radius: 1rem; color: #fff; cursor: pointer; line-height: 3; padding-left: 3rem;
}
.menu div span { float: right; background: rgba(0, 0, 0, 0.2); border-radius: 0 1rem 1rem 0; cursor: pointer; padding: 0 1rem;
}
.menu div span:hover { background: rgba(0, 0, 0, 0.5);
}
/*==============================================
Slider
================================================ */
input[type='range'] { -webkit-appearance: none; -moz-appearance: none; border-radius: 1rem; background: rgba(0, 0, 0, 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(255, 255, 255, 0.6); border-radius: 1rem; display: block; height: 2rem; overflow: hidden; position: relative;
}
.progress > span:after { background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); 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;
}
.notifications ul li { background-color: rgba(0, 0, 0, 0.5); border-radius: 1rem; color: #fff; cursor: pointer; float: left; height: 5rem; list-style: none; margin: 0 0.5rem; width: 6rem;
}
.notifications ul li [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(0, 0, 0, 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"], .login input[type="password"] { border-radius: 0 1rem 1rem 0; margin: 0.5rem 0; width: 75%;
}
.login label { margin: 0.5rem 0; width: 25%;
}
.login input[type="submit"] { border-radius: 1rem; margin: 1rem 0; width: 100%;
}
input[type="email"]:valid ~ .input-validation:after { background: rgba(0, 0, 0, 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(0, 0, 0, 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;
}
.twitter div { background: rgba(0, 0, 0, 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;
}
.twitter div: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(0, 0, 0, 0.4) transparent;
}
.twitter a { color: #fff; font-size: 1.5rem; text-decoration: none;
}
.twitter h3 { color: #fff; font-size: 2rem; margin: 0; padding: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <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 src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://s.cdpn.io/31787/video-controls.js'></script>
<script src='http://s.cdpn.io/31787/html5slider.js'></script> <script src="js/index.js"></script>
</body>
</html>

YAUI v2 - Script Codes CSS Codes

@charset "UTF-8";
/*==============================================
Demo Styles
================================================ */
@import "http://weloveiconfonts.com/api/?family=fontawesome";
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(0, 0, 0, 0.4);
}
h2 { color: #fff; font-size: 2rem; font-weight: bold; margin: 0; text-shadow: 0.2rem 0.2rem 0.1rem rgba(0, 0, 0, 0.4);
}
h4 { color: #fff; margin: -2rem 0 2rem 0; text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.4);
}
/*==============================================
Base Form Styles
All form elements need these styles
The rest are modular
================================================ */
[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(0, 0, 0, 0.1), 0.2rem 0.2rem 0 rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.25); display: inline-block; font-size: 1rem; margin: 0 0 1rem 0; padding: 1rem; text-align: center; width: 30rem;
}
.ui input[type="email"], .ui input[type="password"], .ui input[type="search"] { background: rgba(0, 0, 0, 0.25); border: 0; border-radius: 0; height: 3rem; width: 58%; color: #fff; float: left; padding-left: 0.5rem;
}
.ui input[type="email"]:focus, .ui input[type="password"]:focus, .ui input[type="search"]:focus { background: rgba(0, 0, 0, 0.5); transition: background 1s ease;
}
.ui input[type="submit"] { background: rgba(0, 0, 0, 0.4); border: 0; border-radius: 0 1rem 1rem 0; color: #fff; float: left; height: 3rem; width: 20%; z-index: 3;
}
.ui input[type="submit"]:hover { background: rgba(0, 0, 0, 0.6); transition: all 1s ease;
}
.ui label { background: rgba(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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(0, 0, 0, 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;
}
ol.ui li { float: left; margin-right: 1rem; position: relative; text-align: center; width: 100px;
}
ol.ui li > span { color: #fff; display: block; margin-bottom: 0.5rem; width: 100px;
}
ol.ui span:nth-of-type(2) { background: rgba(0, 0, 0, 0.4); border: 0.2rem solid transparent; 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;
}
ol.ui span:nth-of-type(2):before { background: rgba(0, 0, 0, 0.4); bottom: 1.9rem; content: ""; height: 0.5rem; left: -2.65rem; position: absolute; transition: all 1.2s ease-in-out; width: 0rem;
}
ol.ui span:nth-of-type(2):after { background: rgba(0, 0, 0, 0.4); bottom: 1.9rem; content: ""; height: 0.5rem; left: 4.65rem; position: absolute; transition: all 1.2s ease-in-out; width: 4.35rem;
}
ol.ui li:first-of-type span:nth-of-type(2):before,
ol.ui li:last-of-type span:nth-of-type(2):after { display: none;
}
ol.ui .active span:nth-of-type(2) { border: 0.2rem solid white; transition: all 1s ease-in-out; transition-delay: 0.8s;
}
ol.ui .active span:nth-of-type(2):before { background: white; transition: all 1.2s ease-in-out; width: 4.35rem;
}
ol.ui 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(0, 0, 0, 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;
}
button [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;
}
.ui ul li { color: #fff; cursor: pointer; float: left; font-size: 1.3rem; height: 2rem; position: relative; text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.6); width: 5rem;
}
.notification-sml:after { background: #e50000; border-radius: 1rem 1rem 1rem 0; box-shadow: 0.05rem 0.05rem 0.1rem rgba(0, 0, 0, 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(0, 0, 0, 0.5); float: left; margin: 1rem 0 0 0; padding: 0; border-radius: 1rem; overflow: hidden;
}
.menu ul li { color: #fff; cursor: pointer; display: block; float: none; height: 3rem; padding: 0.5rem; width: 100%;
}
.menu ul li:hover { background: rgba(0, 0, 0, 0.5); border-radius: 1rem; cursor: pointer;
}
.menu div { float: left; width: 100%; background: rgba(0, 0, 0, 0.25); border-radius: 1rem; color: #fff; cursor: pointer; line-height: 3; padding-left: 3rem;
}
.menu div span { float: right; background: rgba(0, 0, 0, 0.2); border-radius: 0 1rem 1rem 0; cursor: pointer; padding: 0 1rem;
}
.menu div span:hover { background: rgba(0, 0, 0, 0.5);
}
/*==============================================
Slider
================================================ */
input[type='range'] { -webkit-appearance: none; -moz-appearance: none; border-radius: 1rem; background: rgba(0, 0, 0, 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(255, 255, 255, 0.6); border-radius: 1rem; display: block; height: 2rem; overflow: hidden; position: relative;
}
.progress > span:after { background-image: linear-gradient(-45deg, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.8) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); 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;
}
.notifications ul li { background-color: rgba(0, 0, 0, 0.5); border-radius: 1rem; color: #fff; cursor: pointer; float: left; height: 5rem; list-style: none; margin: 0 0.5rem; width: 6rem;
}
.notifications ul li [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(0, 0, 0, 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"], .login input[type="password"] { border-radius: 0 1rem 1rem 0; margin: 0.5rem 0; width: 75%;
}
.login label { margin: 0.5rem 0; width: 25%;
}
.login input[type="submit"] { border-radius: 1rem; margin: 1rem 0; width: 100%;
}
input[type="email"]:valid ~ .input-validation:after { background: rgba(0, 0, 0, 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(0, 0, 0, 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;
}
.twitter div { background: rgba(0, 0, 0, 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;
}
.twitter div: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(0, 0, 0, 0.4) transparent;
}
.twitter a { color: #fff; font-size: 1.5rem; text-decoration: none;
}
.twitter h3 { color: #fff; font-size: 2rem; margin: 0; padding: 0;
}

YAUI v2 - Script Codes JS Codes

/*
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);
});
YAUI v2 - Script Codes
YAUI v2 - Script Codes
Home Page Home
Developer Hugo DarbyBrown
Username hugo
Uploaded August 09, 2022
Rating 4.5
Size 11,912 Kb
Views 52,624
Do you need developer help for YAUI v2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hugo DarbyBrown (hugo) Script Codes
Name
Mixer MKII
Social-Media Card
Concept mobile navigation
Animated Atom Logo
Animated Navicons
Scroll Overflow Menu
DNA Double Helix
Slide Icon Menu
A.X.E - LumberJack single page Site
Rainbow 3D Text
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!