1. Overview: Visio - MultiPurpose Responsive Website
Visio is a powerful website template and layout oriented which can be used to create an unlimited number of page designs. This template not just offers some pre-made page layouts, but it gives you the right tools to create the layout you want and need in no time.
All the code is built from scratch and optimized to cover a large number of scenarios that may occur during the development procees. All styles are created with LESS and the variables are well structred and optimized so you can edit them with ease.
We want to thank you that you chose Visio for your project and stay tuned, because this is just the biginning.
1.2 What's in the box
What's great about Visio is that you have everything you need in one place, no matter you need a multi-page or one page website. The files are very well organized and very easy to work with. After the unzipping process you will have the next file and folder structure:
visio-root-folder/ ├── ajax/ ├── assets/ │ ├── bootstrap/ │ ├── ... ├── css/ │ ├── global-style.css ├── fonts/ │ ├── font-awesome/ │ ├── ionicons/ │ ├── ... ├── images/ ├── js/ ├── less/ │ ├── components │ ├── effects │ ├── headers │ ├── variables │ ├──├── variables.less │ ├── assets.less │ ├── base.less │ ├──├── ... └── newsletter └── index.html └── about.html └── ...
Visio comes with both CSS and LESS folder. It is up to you which method will choose to customize your website. Learn more in the CSS or LESS sections.
1.3 Getting started
If you are now all set up, you can opt using the pre-defined page layouts (ex: index.html, about-1.html) or create your own by using one of the starter templates or layout concepts which contain the page's main structure.
All you have to do is to fill it up with the desired elements and content.
Starter templates
We prepared for you a set of pages that contain only the header, slidebar (optional), footer and other variations to ease your work and start the work immediately.
_starter-default.html
Default template starter template with all the main components_starter-no-slidebar.html
The same as the default starter, but without the slidebar option_starter-fixed-header.html
Default template with fixed (sticky) header_starter-boxed.html
This is the boxed layout version_starter-boxed-fixed-header.html
This is the boxed layout version with fixed (sticky) header_starter-dark.html
Starter template for the dark layout version_starter-default-rtl.html
Right to left version all set up and ready to go for arabic languages
2. How the styles work: A brief in CSS and LESS
2.1 Visio - LESS file structure
Visio styles are created from scratch with LESS. You will get used to the way it works very easily because of the well organized files and well commented code lines. We divided the global style in smaller files which are imported in the main global file so you can keep or remove exactly what you need or use even though in most cases that won't be necessary. We managed to keep the stylesheet very light and optimized.
The LESS folder structure should be something like this:
less/ ├── components/ ├── effects/ ├── headers/ ├── variables/ └── assets.less └── base.less └── ...
Folder | Description |
---|---|
components | It contains all the customized Bootstrap components |
effects | You have available a large variety of effects: image hover effects, icons effect and a lot more to come. |
headers | All header/navbar styles will be kept in this folder |
variables | All variables are stored in this folder. You can create new ones. Learn more in the "Variables" section |
2.2 About LESS
Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.
Less runs inside Node, in the browser and inside Rhino. There are also many 3rd party tools that allow you to compile your files and watch for changes. For example:
@base: #f938ab; .box-shadow(@style, @c) when (iscolor(@c)) { -webkit-box-shadow: @style @c; box-shadow: @style @c; } .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) { .box-shadow(@style, rgba(0, 0, 0, @alpha)); } .box { color: saturate(@base, 5%); border-color: lighten(@base, 30%); div { .box-shadow(0 0 5px, 30%) } }
compiles to:
.box { color: #fe33ac; border-color: #fdcdea; } .box div { -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
2.3 Setting up the enviornment
Less can be used on the command line via npm, downloaded as a script file for the browser or used in a wide variety of third party tools. See the Usage section for more detailed information.
Next, we will give you the steps needed to set up the enviornment for developing with LESS via less.js (client side) and/or a third party tool.
Client side usage
Client-side is the easiest way to get started and good for developing with Less, but in production, when performance and reliability is important, we recommend pre-compiling using node.js or one of the many third party tools available.
To start off, link your .less stylesheets with the rel attribute set to "stylesheet/less":
<link rel="stylesheet/less" type="text/css" href="global-style.less" />
Next, include less.js in a <script></script>
tag in the <head>
element of your page:
<script src="js/less.js" type="text/javascript"></script>
- Make sure you include your stylesheets before the script.
- When you link more than one .less stylesheet each of them is compiled independently.
- So any variables, mixins or namespaces you define in a stylesheet are not accessible in any other.
- Due to the same origin policy of browsers loading external resources requires enabling CORS
Browser Options
Options are defined by setting them on a global less object before the
<script src="less.js"></script>
:
<script> less = { env: "development", async: false, fileAsync: false, poll: 1000, functions: {}, dumpLineNumbers: "comments", relativeUrls: false, rootpath: ":/a.com/" }; </script> <script src="js/less.js"></script>
Third party tool
For developing and compiling the modifications made in LESS files you will need to download an app. We recommend Koala App for its simplicity and well thought functionality. One of the great functionalities it has is Real-time Compilation which will help you a lot by compiling and saving the modification you make into a CSS file automatically.
Click here to download Koala App
Edit and compile with Koala App
-
Open Koala App and include the Visio project. Seek the global-style.less and open it. When you press "Compile", it automatically creates a css folder in the root folder and puts the compiled file with the same name and the .css extension. After that, as long as you keep the Koala App opened in this state and have the "Auto Compile" option checked, it will re-compile this file each time you make modifications in it or a dependency file and save it.
-
Open Sublime Text 3 or the code editor of your choice and include the Visio root folder
-
Open variables.less from the variables folder. You will see that each category of variables (backgrounds, colors, header, layout etc) is very well delimited and commented so you can easily figure out what are they doing.
-
Now, this is the part where you will play and create you own design. Change colors, background, fonts (choose any font from Google Fonts library and import it within this file or separately via http in the head section), border radiuses, navbar etc.
-
After you are done, save all the files. If the global-styles is not already compiled, go in Koala App and compile it. We recommend before compiling to select from Output Style the "Compress" option. It will compress the css file so it will decrease a lot the KB number.
2.4 Creating new LESS styles
Is highly recommended that all the customized user styles to be stored only within custom.less
file from the less folder so you can update this theme
everytime with no effort.
Note When you update Visio, make sure not to ovveride the custom.less
file that may contain styles you created with the empty one from Visio pack. That's why, before every update, you should backup your project files.
2.5 Working with LESS variables
The variables file is located in less > variables > variables.less
.
All variables are well organized and grouped by sections/elements. We tried to comment it as well as possible so you can easily figure out what does each variable.
Note
We recommend not to modify the original variables.less
file, but use the already created variables-custom.less
instead located in the same folder.
Copy and paste the variables or group of variables from the original file in variables-custom.less
and replace existing values with your new ones and preview your changes by using one of the methods described in "Setting up the enviornment".
3. Customize theme with LESS
Next, we will show you how to customize Visio at a basic level so you can get started with a fresh and original layout.
3.1 Set up fonts and headings
To set up fonts is easy. There are two ways for doing it: via Google font or manually
Via Google fonts
-
Go to Google fonts and choose your webfont. You can import it in the
base.less
file with a standard CSS@import
or directly in the head section of your page via<link>
tag. If you choose the second option, make sure you remove the font imports from thebase.less
file -
Replace
@fontFamily-1
with the font you want to use on headings, headers or special titles. -
Replace
@fontFamily-2
with the font you want to use on large text content.
Note Replace both variables with the same value if you want only one font type on your website.
Via manual import
-
Copy the font files in the fonts folder:
fonts > other
-
Open
fonts.less
file from the less folder and create your font type as you can see in the example exposed there. -
Replace
@fontFamily-1
and/or@fontFamily-2
with the font family name you just created.
This is all you have to do to change the font types of your website.
Check out all the other variables to change font sizes, weight, transforms, color etc. The same procedure applies to the headings too.
3.2. Set up base colors
Now it is time to go to the fun part. Visio comes with a lot of features that allow you to be as creative as you want. For that you put at your disposal 5 base colors that can be used in your template as you need.
Each base color variable is represented by as special CSS class that can be used on a large variety of elements in your website. Also it can be used to color the main sections so you can delimit the content in a nice and colorful way.
Next we will explain how Visio base colors are thought and how can you use them in your project by creating your one color palette:
Variable | Class | Description |
---|---|---|
@colorBase-1 |
.bg-base-1 |
This is the website's main color. Choose what color would you want your website to have |
@colorBase-2 |
.bg-base-2 |
This is the website's second main color. In case you want a two color website choose a contrast color. If not, replace it with the same value as @bgBase-1 |
@colorBase-3 |
.bg-base-3 |
This is the website's third main color. In case you want a three color website choose a contrast color. If not, replace it with the same value as @bgBase-1 |
@colorBase-4 |
.bg-base-4 |
Replace it with a dark color that comes in contrast with the first three base colors. |
@colorBase-5 |
.bg-base-5 |
Replace it with a light color that comes in contrast with the first three base colors. |
Example of color palette
.bg-base-1
.bg-base-2
.bg-base-3
.bg-base-4
.bg-base-5
Note Each base color has a text color attached so you don't need to worry about the content's color inside containers that have base colors as backgrounds.
Variable | Class | Description |
---|---|---|
@colorBaseText-1 |
.c-base-1 |
Replace with a color that can be readable on top of @colorBase-1. The same applies for the next variables. |
@colorBaseText-2 |
.c-base-2 |
|
@colorBaseText-3 |
.c-base-3 |
|
@colorBaseText-4 |
.c-base-4 |
|
@colorBaseText-5 |
.c-base-5 |
3.3 Edit header properties
//== Navbar //## Navbar font family @navbarFontFamily: @fontFamily-1; @navbarItemDelimiter: transparent; @navbarBg-1: #FFF; // Default navabr background color @navbarBg-2: #232323; // Alternative navbar background color (ex: navbar-inverse) @navbarBorderBottomHeight: 0; @navbarBorderBottomColor: lighten(@navbarBg-1, 10%); @navbarItemBg: transparent; @navbarItemBgHover: transparent; @navbarItemBorderRadius: 0; @navbarItemTextColor: #333; @navbarItemTextColorHover: @colorBase-1; @navbarItemTextColorActive: @colorBase-1; @navbarItemTextColorActiveHover: @colorBase-1; @navbarItemFontSize: 15px; @navbarItemFontWeight: 500; @navbarItemTextTransform: capitalize; @navbarItemArrowFontSize: 8px;
4. Theme customization
Visio comes with 1 default style. Since the main styles are built with LESS there is no need to use other styles beside the global-style.css.4.2 Creating custom styles
If you need to create/edit some styles we recommend you to use the custom-style.css
from the css folder.
This way you will be able to get all the updates without having to make any modification.
If you don't need to make custom styles, remove the connexion made in the head section of your page and keep only the global style.
4.3 Boxed layout
On the body tag, add the class .body-boxed
<div class="body-wrap body-boxed"> ... </div>
If you want a boxed layout with no margins, add the .body-boxed-no-margin
class next to the .body-boxed class
<div class="body-wrap body-boxed body-boxed-no-margin"> ... </div>
To add a background color or image on the body, we created 9 pre-defined classes (3 colors, 3 patterns, 3 images) that can be added on the body tag.
Each of these classes has a variable that can be easily changed in the variables.less
.
Class name | LESS variable | Description |
---|---|---|
.body-bg-1 |
@bodyBg-1 | Replace the LESS variable value with a HEX or RGB color |
.body-bg-2 |
@bodyBg-2 | Replace the LESS variable value with a HEX or RGB color |
.body-bg-3 |
@bodyBg-3 | Replace the LESS variable value with a HEX or RGB color |
.body-bg-4 |
@bodyPattern-1 |
Replace this variable with an image located in the images -> patterns folder or
simply replace the pattern image with your own.
|
.body-bg-5 |
@bodyPattern-2 |
Replace this variable with an image located in the images -> patterns folder or
simply replace the pattern image with your own.
|
.body-bg-6 |
@bodyPattern-3 |
Replace this variable with an image located in the images -> patterns folder or
simply replace the pattern image with your own.
|
.body-bg-7 |
@bodyImg-1 |
Replace this variable with an image located in the images -> backgrounds folder or
simply replace the background image with your own.
|
.body-bg-8 |
@bodyImg-2 |
Replace this variable with an image located in the images -> backgrounds folder or
simply replace the background image with your own.
|
.body-bg-9 |
@bodyImg-3 |
Replace this variable with an image located in the images -> backgrounds folder or
simply replace the background image with your own.
|
4.4 Headers and navigations
Visio comes with 3 types of headers, default
, opaque
, transparent
each one having an inverse version
Header types
You can see below the main HTML structure for each header type. Click on each one to see more informations:
Each header type can be found its special page. Check out the pages that have the filename beginning with "header-".
<div class="header" id="header"> <nav class="navbar navbar-main" role="navigation" id="slide-nav"> <div class="container relative"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-logo" href="#"> <img src="images/logo/your-logo.png" class="hide"> </a> </div> <div id="slidemenu"> <ul class="nav navbar-nav navbar-right"> ... </ul> </div> </div> </nav> </div>
<div class="header" id="header"> <nav class="navbar navbar-main navbar-main-inverse" role="navigation" id="slide-nav"> <div class="container relative"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-logo" href="#"> <img src="images/logo/your-logo.png" class="hide"> </a> </div> <div id="slidemenu"> <ul class="nav navbar-nav navbar-right"> ... </ul> </div> </div> </nav> </div>
<div class="header header-opaque" id="header"> <nav class="navbar navbar-main" role="navigation" id="slide-nav"> <div class="container relative"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-logo" href="#"> <img src="images/logo/your-logo.png" class="hide"> </a> </div> <div id="slidemenu"> <ul class="nav navbar-nav navbar-right"> ... </ul> </div> </div> </nav> </div>
<div class="header header-opaque" id="header"> <nav class="navbar navbar-main navbar-main-inverse" role="navigation" id="slide-nav"> <div class="container relative"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-logo" href="#"> <img src="images/logo/your-logo.png" class="hide"> </a> </div> <div id="slidemenu"> <ul class="nav navbar-nav navbar-right"> ... </ul> </div> </div> </nav> </div>
<div class="header header-transparent" id="header"> <nav class="navbar navbar-main" role="navigation" id="slide-nav"> <div class="container relative"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-logo" href="#"> <img src="images/logo/your-logo.png" class="hide"> </a> </div> <div id="slidemenu"> <ul class="nav navbar-nav navbar-right"> ... </ul> </div> </div> </nav> </div>
<div class="header header-transparent" id="header"> <nav class="navbar navbar-main navbar-main-transparent" role="navigation" id="slide-nav"> <div class="container relative"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-logo" href="#"> <img src="images/logo/your-logo.png" class="hide"> </a> </div> <div id="slidemenu"> <ul class="nav navbar-nav navbar-right"> ... </ul> </div> </div> </nav> </div>
Make the header fixed (sticky)
For making headers sticky, we used Bootstrap's affix functionality. Just add .header-affix
class next to .header
,
data-offset-top="x"
, where x is the offset value you want to add before the affixed navbar appears, and data-nav-animation="slideInDown"
. You can select any animation from the animate.css plugin.
Check out all the animation options here: https://daneden.github.io/animate.css/
<div class="header header-affix" data-offset-top="80" data-nav-animation="slideInDown" id="header"> <nav class="navbar navbar-main" role="navigation" id="slide-nav"> ... </nav> </div>
Navbar options
navbar-shadow |
You can add a smooth shadow under the header by adding this class next to .navbar-main class.
|
4.5 Mobile navigations
Visio comes with two mobile navigation types: vertical (Bootstrap's default) and slide left (Visio alternative) menu. We think that this is a feature that must be available for everyone so we tried to keep it as simple as possible without interfering in the default HTML code.
Next, we will show you the two options with the code demonstration:
Vertical (Bootstrap's default)
You can find the live example and code separately in page-mobile-nav-1.html
.
<div class="header" id="header"> <!-- NAVBAR --> <nav class="navbar navbar-main navbar-shadow" role="navigation"> <div class="container relative"> <div class="navbar-header"> <!-- NAVBAR TOGGLE --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- SLIDEBAR TOGGLE --> <button type="button" class="slidebar-toggle btn-st-trigger" data-effect="st-effect-1"> <span class="sr-only">Toggle slidebar</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- LOGO --> <a class="navbar-logo" href="index.<?php echo $pageExt; ?>"> <img id="logoOne" src="images/logo/logo-1-a.png" class="hide"> <img id="logoTwo" src="images/logo/logo-1-b.png"> </a> </div> <div id="navbar-collapse" class="navbar-collapse collapse" aria-expanded="false" style="height: 1px;"> <ul class="nav navbar-nav navbar-right"> <!-- Search form for small resolutions only --> <li class="hidden-md hidden-lg"> <form class="form-mobile-nav" role="form"> <div class="input-group input-group-lg"> <input type="text" class="form-control" placeholder="Search for things you want ..."> <span class="input-group-btn"> <button class="btn btn-base-1" type="button"> <i class="fa fa-search"></i> </button> </span> </div> </form> </li> <!-- Navbar links come below this comment --> ... </ul> </div> </div> </nav> </div>
Slide left (Visio alternative)
You can find the live example and code separately in page-mobile-nav-2.html
.
<div class="header" id="header"> <!-- NAVBAR --> <nav class="navbar navbar-main navbar-shadow" role="navigation" id="slide-nav"> <div class="container relative"> <div class="navbar-header"> <!-- NAVBAR TOGGLE --> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- SLIDEBAR TOGGLE --> <button type="button" class="slidebar-toggle btn-st-trigger" data-effect="st-effect-1"> <span class="sr-only">Toggle slidebar</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <!-- LOGO --> <a class="navbar-logo" href="index.<?php echo $pageExt; ?>"> <img id="logoOne" src="images/logo/logo-1-a.png" class="hide"> <img id="logoTwo" src="images/logo/logo-1-b.png"> </a> </div> <div id="slidemenu"> <ul class="nav navbar-nav navbar-right"> <!-- Search wrapper for small resolutions only --> <li class="hidden-md hidden-lg"> <form class="form-mobile-nav" role="form"> <div class="input-group input-group-lg"> <input type="text" class="form-control" placeholder="Search for things you want ..."> <span class="input-group-btn"> <button class="btn btn-base-1" type="button"> <i class="fa fa-search"></i> </button> </span> </div> </form> </li> <!-- Navbar links come below this comment --> ... </ul> </div> </div> </nav> </div>
4.6 Footers
You have available many types of footers. You can find the live example and code separately in the pages that have the filename beginning with footer-
.
4.7 Helper classes
There are a lot of helpful classes in this theme that can be used in a a large number of scenarios. Below is the table with all the helper classes and what do they do:
Note
All helper classes are located in helper.less
Remove/Reset classes
Class | Description |
---|---|
no-margin |
Remove any margin of the element on which it is applied. |
no-padding |
Remove any padding of the element on which it is applied. |
no-border |
Remove the borders of the element on which it is applied. |
no-radius |
Remove the rounded corners of elements on which it is applied. |
Quick font customization
Class | Description |
---|---|
text-caps |
Transform the text to caps lock. |
text-capitalize |
Capitalize the first letter of each word from the text container. |
text-normal |
Remove any text transform. |
text-right |
Align text to right. |
text-left |
Align text to left. |
text-center |
Center text. |
strong |
Make the font weight bold. |
strong-400 |
You have different weight font values, if the font familly has all this options. |
strong-500 |
Light bold font weight. |
strong-600 |
Bold font weight. |
strong-700 |
Strong bold font weight. |
Quick border classes
The quick border class color value can be changed from the variables file: variables.less
.
Edit the border color by setting a new value to the @borderColor
variable.
Class | Description |
---|---|
ba |
Add a 1px solid border around the element you applied the class on. |
bt |
Add a 1px solid border on top of the element you applied the class on. |
br |
Add a 1px solid border on right of the element you applied the class on. |
bb |
Add a 1px solid border on bottom of the element you applied the class on. |
bl |
Add a 1px solid border on left of the element you applied the class on. |
Quick border radius classes
Easily you can make any element have the corners rounded. Change the default border radius from variables.less
.
Class | Description |
---|---|
rounded |
Adds the default roundness to the element on which it is applied. Edit its value by setting a new value to @borderRadius-default variable. |
rounded-xs |
Adds the extra small roundness to the element on which it is applied. Edit its value by setting a new value to @borderRadius-xs variable. |
rounded-sm |
Adds the small roundness to the element on which it is applied. Edit its value by setting a new value to @borderRadius-sm variable. |
rounded-md |
Adds the medium roundness to the element on which it is applied. Edit its value by setting a new value to @borderRadius-md variable. |
rounded-lg |
Adds the large roundness to the element on which it is applied. Edit its value by setting a new value to @borderRadius-lg variable. |
Quick width and height classes
Class | Description |
---|---|
width-10 width-20 width-30 ... width-100
|
Set a width on the element on which it is applied. The width value is in percentage [%] (ex: width-10 -> width: 10%, width-20 -> width: 20% and so on). |
min-height-100 min-height-200 min-height-300 ... min-height-600
|
Set a minimum height on the element on which it is applied. The min-height value is in pixels [px] (ex: min-height-100 -> min-height: 100px, min-height-200 -> min-height: 200px and so on). |
Quick padding classes
Class | Description |
---|---|
p-10 p-20 p-30 p-40 p-50 |
Set the general padding of the element on which it is applied in pixels [px]. For example: p-10 -> padding: 10px; p-20 -> padding: 20px; and so on. |
pt-10 pt-15 pt-20 pt-30 pt-40 pt-50 |
Set the top padding of the element on which it is applied in pixels [px]. For example: pt-10 -> padding-top: 10px; pt-20 -> padding-top: 20px; and so on. |
pr-10 pr-15 pr-20 pr-30 pr-40 pr-50 |
Set the right padding of the element on which it is applied in pixels [px]. For example: pr-10 -> padding-right: 10px; pr-20 -> padding-right: 20px; and so on. |
pb-10 pb-15 pb-20 pb-30 pb-40 pb-50 |
Set the bottom padding of the element on which it is applied in pixels [px]. For example: pb-10 -> padding-bottom: 10px; pb-20 -> padding-bottom: 20px; and so on. |
pl-10 pl-15 pl-20 pl-30 pl-40 pl-50 |
Set the left padding of the element on which it is applied in pixels [px]. For example: pl-10 -> padding-left: 10px; pl-20 -> padding-left: 20px; and so on. |
Quick margin classes
Class | Description |
---|---|
m-10 m-20 m-30 m-40 m-50 |
Set the general margin of the element on which it is applied in pixels [px]. For example: m-10 -> margin: 10px; m-20 -> margin: 20px; and so on. |
mt-10 mt-15 mt-20 mt-30 mt-40 mt-50 |
Set the top margin of the element on which it is applied in pixels [px]. For example: mt-10 -> margin-top: 10px; mt-20 -> margin-top: 20px; and so on. |
mr-10 mr-15 mr-20 mr-30 mr-40 mr-50 |
Set the right margin of the element on which it is applied in pixels [px]. For example: mr-10 -> margin-right: 10px; mr-20 -> margin-right: 20px; and so on. |
mb-10 mb-15 mb-20 mb-30 mb-40 mb-50 |
Set the bottom margin of the element on which it is applied in pixels [px]. For example: mb-10 -> margin-bottom: 10px; mb-20 -> margin-bottom: 20px; and so on. |
ml-10 ml-15 ml-20 ml-30 ml-40 ml-50 |
Set the left margin of the element on which it is applied in pixels [px]. For example: ml-10 -> margin-left: 10px; ml-20 -> margin-left: 20px; and so on. |
5. Other
5.1 Free updates: Learn more
With each purchased license for Visio you get free lifetime updates. Access the following link to get yours: Wrapboostrap - Download resender
5.2 Credits
All the plugins are located in the assets
folder.
Free plugins
Plugin name | Description | URL |
---|---|---|
Animate | A cross-browser library of CSS animations. As easy to use as an easy thing. | http://daneden.github.io/animate.css |
Bootstrap | Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. | http://getbootstrap.com/ |
Bootstrap RTL | Bootstrap RTL provides simple yet robust right-to-left capability for Bootstrap 3, by employing new theming feature of it. Simply put its CSS after bootstrap's original CSS, to the pages designed by Bootstrap 3. It works just like an extension on top of the original Bootstrap: | https://github.com/morteza/bootstrap-rtl |
Easy Pie Chart | Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices. http://rendro.github.io/easy-pie-chart/ | |
Fancybox | Modern lightbox for media showing. | http://fancybox.net/ |
Isotope | Filter & sort magical layouts | http://isotope.metafizzy.co/ |
Milestone counter | Milestone counter is for animating numbers in certain intervals. | |
Page scroller | Easy scroll-to-top functionality | http://mattvarone.com/web-design/uitotop-jquery-plugin/ |
Owl carousel 2 | Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. | http://owlcarousel.owlgraphic.com/ |
Parallax | Parallax.js is a dirt simple parallax scrolling effect inspired by Spotify.com and implemented as a jQuery plugin. | http://pixelcog.github.io/parallax.js/ |
Time Circles | TimeCircles is a jQuery plugin that provides a nice looking way to either count down towards a certain time, or to count up from a certain time. The goal for TimeCircles is to provide a simple yet dynamic tool that makes it very easy to provide visitors an attractive countdown or timer. | https://github.com/wimbarelds/TimeCircles |
Waypoints | Waypoints is the easiest way to trigger a function when you scroll to an element. | http://imakewebthings.com/waypoints/ |
Wow Animation | Reveal Animations When You Scroll. Easily customize animation settings: style, delay, length, offset, iterations. | http://mynameismatthieu.com/WOW/ |
Vide | Easy as hell jQuery plugin for video backgrounds. | http://vodkabears.github.io/vide/ |
Premium plugins
Note Premium plugins need their own license before using it in your project. You can find in the table below the URL where you can purchase any othe the needed plugins.
Plugin name | Description | URL |
---|---|---|
Cubeportfolio | Cube Portfolio is a jQuery grid plugin that provides powerfull portfolio system, beautiful animated filtering, custom captions and it’s perfect for portfolio projects, horizontal slider, images gallery, team members, blog posts or any other ordered grid content. | http://codecanyon.net/item/cube-portfolio-responsive-jquery-grid-plugin/6372959 |
Layer Slider | LayerSlider is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects. | http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/ |
Image and other graphic sources
Even though we are using free-comercial licensed images and graphic, below you can find the table with the image sources we used in our template.
All images are used for preview purpose only. If you would like to use any of these images in your project, please make sure that you have a proper license
Image sources
All images contained in this folder are properly licensed for free commercial use. You can find below the sources used to get all images categorized by the folder's name:Graphics (icons, patterns, mockups)
Note Take a look at the license.txt located in theimages
folder. You will find there the source and URL for each image we have used in Visio.