Overlap UI Kit
Responsive HTML for Overlap UI Kit. Multiple page types with different elements.
If you need to modify the code then you need to install gulp and all dependencies with
Watch and Live Reload
gulp watch in terminal to watch you modifications in real-time.
All sources are located in
npmand managed by
gulp, so you don't need to touch this files.
You can put the images in
./src/images folder to optimize them. You can also run the task manually
gulp icons to generate a sprite with all icons. You can add more icons in
To use it in HTML follow the next example:
<a href="#" class="button"> <svg class="svg-icn"> <use xlink:href="img/icons.svg#search"/> </svg> Search </a>
Floating label for inputs
Beside Foundation standard inputs you can use a float label for inputs
<div class="float-label"> <input type="email" id="email" class="float-input"> <label for="email">Email:</label> </div>
./src/scss/_settings.scss to adjust the settings for Foundation. In
styles.scss you must have these two lines at the beginning:
@import "settings"; @import "foundation";