StyList HTML
Premium HTML 5 website
StyList HTML is Html5 + CSS3 Website template and works fine in all major browsers and IE from version 9. It's powered by jQuery and you'll find nice and discreet interactivity. The code is clearly written and you will find comments for each considerable parts.
Lets take a closer look at the structure of Html, Css, JavaScript.
Folder Structure
When you unpack downloaded archive you'll get folder containing 3 folders.
Here they are, sorted alphabetically:
- Documentation - Documentation for StyList HTML site template
- HTML - Main folder for template
- PSD - Design source files
HTML folder structure:
-
/HTML
- /css (Template CSS and SCSS)
- /external (Template js)
- /font (Font Font Awesome, MaterialIcons, fontello)
- /js (Template initialization js)
-
/images (All Images)
- /blog (Blog Images)
- /collection (Collection Images)
- /gallery (Gallery Images)
- /product (Product Images)
- /lookbook (Lookbook Images)
- /slides (Slides Images)
- /slides/video (Slides video)
- /custom (Images)
CONTENT
Content divided on pages:
- index.html - Home page
- index-02.html, index-03.html, index-04.html, index-05.html, index-06.html, index-07.html, index-08.html, index-09.html, index-10.html, index-11.html, index-12.html - Different layouts page
- listing-left-column.html, listing-left-column-without-block.html, listing-left-right-column.html, listing-right-column.html, listing-without-columns.html, listing-without-columns-items2.html, listing-without-columns-items3.html, listing-without-columns-items4.html, listing-without-columns-items6.html - Product listing pages
- product.html, product-02.html, product-03.html, product-04.html - Product info pages
- blog_listing.html, blog_grid_col_2.html, blog_grid_col_3, blog_masonry_col_2.html, blog_masonry_col_3.html, blog_single_post.html, blog_single_post_01.html, - Blog content pages
- gallery_grid_col_2.html, gallery_grid_col_3.html, gallery_masonry_col_2.html, gallery_masonry_col_3.html, - Gallery pages
- checkout.html - Checkout page
- compare.html - Products compare page
- shopping_cart_01.html, shopping_cart_02.html - Shopping Cart page
- account.html, account-address.html, account-order.html - Account page
- page-404.html - Not found page
- page-empty-category.html - Empty category
- page-empty-search.html - Empty search
- page-empty-shopping-cart.html - Empty shopping cart
- typography.html - Typography page
- login-form.html - Logination page
- faqs.html - FAQ page
- contact.html - Contact form
- contact_01.html - Contact form
- about.html, about_01.html, look-book.html, comming-soon.html, collections.html - Other content page
- index-simple-menu.html - Example of simple menu implementation
- index-rtl.html - RTL mode example
HTML Structure
Grid:
Based on Bootstrap, a sleek, intuitive, and powerful front-end framework.
Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects.
<!DOCTYPE html>
<html lang="en">
...
</html>
The default Bootstrap grid system utilizes 12 columns.
For a simple two column layout, create a .row and add the appropriate number of .col-lg-* columns. As this is a 12-column grid, each .col-lg-* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).
<div class="row">
<div class="col-lg-4">...</div>
<div class="col-lg-8">...</div>
</div>
Given this example, we have .col-lg-4 and .col-lg-8, making for 12 total columns and a complete row.
Move columns to the right using .col-lg-offset-* classes. Each class increases the left margin of a column by a whole column. For example, .col-lg-offset-4 moves .col-lg-4 over four columns.
<div class="row">
<div class="col-lg-4">...</div>
<div class="col-lg-4 col-lg-offset-2">...</div>
</div>
If you need more information, please visit this site: http://getbootstrap.com/css/#grid
CSS Files
All css files located at css folder.
- template.css - Theme main CSS file.
- template-rtl.css - RTL mode CSS
SCSS Files
All SCSS files located at css folder.
- template.scss - Theme main scss file.
- template-rtl.scss - RTL mode scss
JavaScript
All JS files located at js folder and external.
- main.js - Template main JS file.
- vendor plugins JS files
Changing Plugins Options
You can change plugins options in the file js/custom.js.
For example, you can change any carousel options:
$(document).ready(function() {
setSlickGallery($('.slick-slider-content'),1,1,1,1,1,'slickSlider');
});
and other.
If you need more information, please visit plugins official sites.
RTL Mode
1. Add the StyList RTL version CSS after the default StyList CSS file in the HTML:
2. Add the mm-right class to .panel-menu in the HTML:
<nav class="panel-menu mm-right">
...
</nav>
Logo
The ability to use text instead of pictures. It is necessary to replace a piece of code:
Can be changed in such blocks: mobile-header, desktop-header, footer. It is only necessary to replace:
on:
StyList
Icons
You can see all demo icons in file infographic.html
...
<i class="icon icon-person"></i>
...
or
...
<span class="icon icon-shopping_basket"></span>
...
Product items in pages content
You have the ability to make a fixed height product. If you want to do something:
1)Find file "main.js"(js/main.js) and in it to find variable "same_product_height". In the variable, change the value to "true".
2)Find file "template.scss"(css/template.scss) and in it to find a piece of code:
#same_product_height{
#pageContent{
.product-listing:not(.row-view){
.product{
.image-box{
height: 200px;
overflow: hidden;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
img{
max-height: 200px;
width:auto;
max-width: 100%;
display: inline-block;
}
}
}
}
}
}
* Here it is necessary to change the value "200px" twice for the required height
Fonts
To change the custom font, please take a look in the css/template.scss. Find in the top:
@import url('https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Poppins:300,400,500,600,700');
To change fonts, go to http://www.google.com/webfonts, choose new fonts and use the generated code.
PSD Files
Design source files located at PSD folder.
Sources and Credits
We have used the following files as listed.
- jQuery - JavaScript Library
- Bootstrap and bootstrap-datepicker - Bootstrap by Twitter
- Revolution Slider - already included into template
- Slick - jQuery carousel plugin
- Isotope - jQuery plugin filter & sort plugin
- Masonry - Masonry cascading grid layout library
- Mousewheel - Mousewheel a jQuery plugin that adds cross-browser mouse wheel support.
- jQuery Countdown - jQuery Countdown plugin
- Magnific Popup - jQuery popup plugin
- noUiSlider - jQuery Range Slider
- jQuery elevateZoom - jQuery imagezoom pluginr
- jQuery Validation Plugin form - form validation (contact.html)
Gallery settings
Hover effects, add the effect-1 or effect-2 class to .gallery-content in the HTML:
Gallery grid col
<div class="gallery-content row effect-1">
...
</div>
<div class="gallery-content row effect-2">
...
</div>
<div class="gallery-content row">
...
</div>
Gallery masonry col
<div class="grid-gallery-masonry effect-1 gallery-content grid-gallery-masonry-col-2">
...
</div>
<div class="grid-gallery-masonry effect-2 gallery-content grid-gallery-masonry-col-2">
...
</div>
<div class="grid-gallery-masonry gallery-content grid-gallery-masonry-col-2">
...
</div>
Blog settings
Loading Effects for masonry Items (blog_masonry_col_2.html, blog_masonry_col_3.html), add the effect-1, effect-2, effect-3, effect-4, effect-5, effect-6, effect-7, effect-8 class to .blog-masonry in the HTML:
<div class="effect-1 blog-masonry">
...
</div>
<div class="effect-2 blog-masonry">
...
</div>
<div class="effect-3 blog-masonry">
...
</div>
<div class="effect-4 blog-masonry">
...
</div>
<div class="effect-5 blog-masonry">
...
</div>
<div class="effect-6 blog-masonry">
...
</div>
<div class="effect-7 blog-masonry">
...
</div>
<div class="effect-8 blog-masonry">
...
</div>
Banner settings
Html block contains a promo-box class. It contains the default settings, and 14 unique designs
Connection the default settings
add the design-default class to .promo-box in the HTML:
<div class="promo-box zoom-in design-default">
...
</div>
Connection the 14 unique designs
add the design-01, design-02, design-03, design-04, design-05, design-06, design-07, design-08, design-09, design-10, design-11, design-12, design-13, design-14 class to .promo-box in the HTML:
<div class="promo-box zoom-in design-01">
...
</div>
General settings
* You can remove the zoom-in with the picture when removing class hover zoom-in
* The default color is white content, that would change the need to add classes:
- .color-defaulttext
- .color-defaulttext2
- .color-base
<div class="title color-defaulttext2">
...
</div>
* By default all the center and positioning of content can be changed with the addition of classes:
- .point-top
- .point-center
- .point-bottom
- .point-left
- .point-right
- .point-point-center-horizontal
- .point-point-center-vertical
You can use the dual class:
- .point-center-vertical and .point-left
<div class="description point-center-vertical point-left left-offset text-center">
...
</div>
Product pages
* add class no-zoom - remove the zoom:- product.html:
<div class="product-main-image no-zoom">
...
</div>
- product-02.html:
<div class="product-main-image no-zoom">
...
</div>
- product-03.html:
<div class="bigGallery box-baners no-zoom">
...
</div>
- product-05.html:
<ul data-scrollzoom="false" class="no-zoom">
...
</div>
* data-scrollzoom="false" - zoom control with the mouse wheel
<div class="bigGallery box-baners" data-scrollzoom="false">
...
</div>
Newsletter popup
* in js/main.js, add script
/*!
* jQuery Cookie Plugin v1.4.1
* https://github.com/carhartl/jquery-cookie
*
* Copyright 2006, 2014 Klaus Hartl
* Released under the MIT license
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(['jquery'], factory);
} else if (typeof exports === 'object') {
module.exports = factory(require('jquery'));
} else {
factory(jQuery);
}
}(function ($) {
var pluses = /\+/g;
function encode(s) {
return config.raw ? s : encodeURIComponent(s);
}
function decode(s) {
return config.raw ? s : decodeURIComponent(s);
}
function stringifyCookieValue(value) {
return encode(config.json ? JSON.stringify(value) : String(value));
}
function parseCookieValue(s) {
if (s.indexOf('"') === 0) {
s = s.slice(1, -1).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
}
try {
s = decodeURIComponent(s.replace(pluses, ' '));
return config.json ? JSON.parse(s) : s;
} catch(e) {}
}
function read(s, converter) {
var value = config.raw ? s : parseCookieValue(s);
return $.isFunction(converter) ? converter(value) : value;
}
var config = $.cookie = function (key, value, options) {
if (arguments.length > 1 && !$.isFunction(value)) {
options = $.extend({}, config.defaults, options);
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setMilliseconds(t.getMilliseconds() + days * 864e+5);
}
return (document.cookie = [
encode(key), '=', stringifyCookieValue(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
var result = key ? undefined : {},
cookies = document.cookie ? document.cookie.split('; ') : [],
i = 0,
l = cookies.length;
for (; i < l; i++) {
var parts = cookies[i].split('='),
name = decode(parts.shift()),
cookie = parts.join('=');
if (key === name) {
result = read(cookie, value);
break;
}
if (!key && (cookie = read(cookie)) !== undefined) {
result[name] = cookie;
}
}
return result;
};
config.defaults = {};
$.removeCookie = function (key, options) {
$.cookie(key, '', $.extend({}, options, { expires: -1 }));
return !$.cookie(key);
};
}));
/*
show newsletter Modal
*/
jQuery(function($) {
$(document).on('click', '#Modalnewsletter .checkbox-group', function() {
$.cookie('modalnewsletter', '1', { expires: 7 });
});
var modalnewsletter = $.cookie('modalnewsletter');
function initnewsLetterObj($obj) {
var pause = $obj.attr('data-pause');
setTimeout(function() {
$obj.modal('show');
}, pause);
};
var newsLetterObj = $('#Modalnewsletter');
if (modalnewsletter == 1) return;
if(newsLetterObj.length){
initnewsLetterObj(newsLetterObj);
};
});
* If you want a picture on the background:
- аdd a picture with the name "newsletter-background.jpg" in images/custom/
* If you want to change the time of appearance popup:
- in html change data-pause=2000
Menu settings
1)You can adjust the delay and smooth appearance of the submenu. In js/main.js find:
/* variables menu*/
var header_menu_timeout = 500,
header_menu_delay = 1200;
2)You can cancel the menu lock when scrolling. You must add a class "disabled" in html:
Editing the banner (full width viewport)
Arrow location
* Right bottom location - add the class "box-arrow-bottom-right". Example on index.html
<div class="box-arrow-bottom-right">
...
</div>
* Right top location - add the class "box-arrow-top-right". Example on index-04.html
<div class="box-arrow-top-right">
...
</div>
* Left bottom location, add the class "box-arrow-bottom-left". Example on index-08.html
<div class="box-arrow-bottom-left">
...
</div>
Arrow position
The position of the arrow can be changed by editing parameters:
<path transform="matrix(-1 0 0 1 300 0)
Dimensions of the arrow
Dimensions of the arrow change in the template.scss - editing the width and height
Arrow animation the hover(move left and right)
If you want to remove the effect in the arrow the hover - remove the class "animation-hover"
<div class="animation-hover">
...
</div>
Arrow delete
If you want to remove the arrow - remove block with class: "svg-icon"
<div class="svg-icon">
...
</div>
Arrow delete with text
If you want to remove the arrow with text - remove all block with class: "box-arrow-bottom-right" or "box-arrow-top-right" or "box-arrow-bottom-left"
Arrow animation the hover(move left and right)
If you want to remove the effect in the arrow the hover - remove the class "animation-hover"
<div class="animation-hover">
...
</div>
Change image
* Replace the picture in the specified image path. The name of the image and the path to take from httml, in the place where you need to change, in the img tag. Example path:
<img src="images/custom/promo-img-05.jpg">
Zoom effect in the image
If you want to remove the zoom effect in the image with the hover - remove the class "zoom-in"
<div class="home4_banner_big zoom-in">
...
</div>
You can use the image instead of the arrow with the text
1) Remove all block with class: "box-arrow-bottom-right" or "box-arrow-top-right" or "box-arrow-bottom-left"
<div class="box-arrow-top-right">
...
</div>
2) Instead of a remote design - paste:
<div class="box-img-right-bottom">
...
</div>
3) Depending on the placement, add the required class:
"box-img-right-top" or "box-img-right-bottom" or "box-img-left-top" or "box-img-left-bottom"
Embed video on the site
1)If you want to insert a video insert please a piece of code:
2)Change in the code:
* the desired path to the video:
* the right way to poster:
Embedding video on product pages for product
You have the ability to connect videos from different sources(YouTube, Vimeo, video on your server). An example can be looked at product.html
1) Add video from YouTube
Video
Review
* Сhange data-type="youtube"
* Сhange a path to your video data-value="http://www.youtube.com/embed/JuO-wy0YxIs". Documentation "How to correctly add a video path"
2) Add video from Vimeo
Video
Review
* Сhange data-type="vimeo"
* Сhange a path to your video data-value="https://player.vimeo.com/video/214526898"
3) Add video from your server
Video
Review
* Сhange data-type="video"
* Сhange a path to your video data-value="images/slides/video/video.mp4"
Cancel the hover on the product
You can Cancel the hover on the product by adding the class "no-hover"
Mail setup - contact.html
If you want to configure mail for yourself. Find file by path 'external/form/contact-form.php'. In it, change the field:
// youremail here
$to = "dogotar777@gmail.com";
*Write your email instead dogotar777@gmail.com