No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
img
js
src
.gitignore
.jshintrc
README.md
blog-list.html
blog-single.html
front.html
gulpfile.js
index.html
package.json
shop-checkout.html
shop-list.html
shop-single.html
yarn.lock

README.md

ScreenShot

Overlap UI Kit

Responsive HTML for Overlap UI Kit. Multiple page types with different elements.

Installation

If you need to modify the code then you need to install gulp and all dependencies with yarn install

Watch and Live Reload

Type gulp or gulp watch in terminal to watch you modifications in real-time.

All sources are located in ./src folder.

Javascript

All javascript files are located in ./js folder.

  • scripts.js is the file where you can modify the Javascript for your needs
  • [vendor].min.js is the Javascript library from different vendors. This files are intalled with npm and managed by gulp, so you don't need to touch this files.

Image optimization

You can put the images in ./src/images folder to optimize them. You can also run the task manually gulp imagemin.

Icons

Use gulp icons to generate a sprite with all icons. You can add more icons in ./src/icons.

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>

Zurb Foundation

Use ./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";

Links