Collection of the main CSS classes and Javascript functions
| Class name | Description | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| boxed-layout |
Add this class to the body to set a boxed layout. Use this css code to set the boxet width:
.boxed-layout .navbar-fixed-top, .boxed-layout .navbar-fixed-top, .boxed-layout header, .boxed-layout .parallax-mirror, .boxed-layout .content-parallax, .boxed-layout footer,
.boxed-layout [class*="header-"], .boxed-layout #fullpage-main,.boxed-layout .container {
max-width: px;
}
|
||||||||||
| text-color | The main text color. CSS: color: #337ab7; |
||||||||||
| bg-color | The main background color. CSS: background-color: #337ab7; |
||||||||||
| bg-cover | Used for assign a background image to a container like a <div></div>. CSS: background-repeat: no-repeat; background-position: center center; background-size: cover; |
||||||||||
| bg-transparent | Make transparent the background, this class is combined to other objects like menu and header for enforce transparent background and borders where needed. CSS: background-color: rgba(0, 0, 0, 0) !important; |
||||||||||
| white | Convert font color to white and assign a dark background, this class is combined to other objects. CSS: color: #FAFAFA; |
||||||||||
| text-center | Text aligned to center. CSS: text-align: center;. Use text-center-xs for center the content only on mobole devices. |
||||||||||
| text-right | Text aligned to right. CSS: text-align: right; |
||||||||||
| text-blod | Text ultra bold style. CSS: font-weight: 900; |
||||||||||
| text-xxl | Font size of text, size ultra extra large. CSS: font-size: 110px; |
||||||||||
| text-xl | Font size of text, size extra large. CSS: font-size: 50px; |
||||||||||
| text-l | Font size of text, size large. CSS: font-size: 27px; |
||||||||||
| text-m | Font size of text, size medium. CSS: font-size: 18px; |
||||||||||
| text-s | Font size of text, size small. CSS: font-size: 13px; |
||||||||||
| text-xs | Font size of text, size extra small. CSS: font-size: 11px; |
||||||||||
| col-center | Center a bootstrap column or a container into a bootstrap column. CSS: float: none !important; margin-left: auto !important; margin-right: auto !important; |
||||||||||
| clear | Clear the objects that use css float: left or float: right insert a <div class="clear"></div> after all floating objects to maintain correct height of page. CSS: clear: both; width: 100%; |
||||||||||
| space |
Create a vertical space between objects. CSS: border:none !important; clear:both; height: 70px; margin: 0;
There are four space sizes:
<hr />. Example <hr class="space xs" />.
You can use also horizontal space with code <span class="space"></span>.
|
||||||||||
| circle | Circle shape container. CSS: border-radius: 50%; position: relative; |
||||||||||
| overlay-container |
To place a content over a other content use the two classes overlay-container and inner class overlay-content.Example <div class="overlay-container"> ... <div class="overlay-content></div></div>
|
||||||||||
| fixed-bottom-area |
Place a target element to the bottom of page, always visible and fixed bottom area.
Example <div class="fixed-bottom-area"> ... </div>
|
||||||||||
| proporzional-row |
Add this class to a row and all columns and inner contents will have the same height.
Example <div class="row proporzional-row"><div class="col-md-6"> ... </div><div class="col-md-6"> ... </div></div>Use class clear-proporzional for remove the full height on childred objects.
|
||||||||||
| vertical-row |
Add this class to a row and all columns will be vertically centered
Example <div class="row vertical-row"><div class="col-md-6"> ... </div><div class="col-md-6"> ... </div></div>
|
||||||||||
| Boxed container |
You can assign to a column (col-md-) the classes boxed and boxed-inverse. Boxed set tha background color with the main color, boxed-inverse set a white background.
Example <div class="col-md-6 boxed-inverse"> ... </div>
|
| Class name | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| device-[dimension] |
Class for responsive functionality, added on <body> object.
Based on Bootstrap responsive utilties.
Classes are 4 and based on screen size:
|
||||||||
visible-xs |
Show the object only on smartphones. | ||||||||
visible-sm |
Show the object only on smartphones and tablets. | ||||||||
visible-md |
Show the object only on desktops. | ||||||||
visible-lg |
Show the object only on large desktops. | ||||||||
hidden-xs |
Hide the object only on smartphones. | ||||||||
hidden-sm |
Hide the object only on smartphones and tablets. | ||||||||
hidden-md |
Hide the object only on desktops. | ||||||||
hidden-lg |
Hide the object only on large desktops. | ||||||||
col-sm-12 |
Set a full width column only on smartphones and tablets. | ||||||||
col-sm-6 |
Set a 50% width column only on smartphones and tablets. | ||||||||
text-center-xs |
Text align centerd only on smartphones. | ||||||||
text-center-sm |
Text align centerd only on smartphones and tablets. | ||||||||
text-left-xs |
Text align left only on smartphones. | ||||||||
text-left-sm |
Text align left only on smartphones and tablets. | ||||||||
text-right-xs |
Text align right only on smartphones. | ||||||||
text-right-sm |
Text align right only on smartphones and tablets. | ||||||||
pull-none-xs |
Remove the floating layout only on smartphones. | ||||||||
no-bg-xs |
Remove the background image or other contents only on smartphones. | ||||||||
height-full-xs |
Height 100% only on smartphones. | ||||||||
text-xs-xs |
Text xs only on smartphones. | ||||||||
text-s-xs |
Text s only on smartphones. | ||||||||
text-m-xs |
Text m only on smartphones. | ||||||||
text-xs-sm |
Text xs on smartphones and tablets. | ||||||||
text-s-sm |
Text s on smartphones and tablets. | ||||||||
text-m-sm |
Text m on smartphones and tablets. |
| Name | Description | Usage | Example |
|---|---|---|---|
| Scroll hide | Hide a object on page scroll. |
Add class scroll-hide to object you want hide on scroll.
Add class scroll-show-mobile if you want show only on mobile.
|
<div class="scroll-hide"> ... </div> |
| Scroll show | Show a object on page scroll. It add class showed on scroll and remove it on top. |
Add class scroll-show to object you want show on scroll. |
<div class="scroll-show"> ... </div> |
| Scroll class change | Change class on page scroll. |
Add class scroll-change to object you want to change class on scroll, after scroll this object will have class scroll-css.
|
<div class="scroll-change"> ... </div> |
| Fixed area | Maintain the target object fixed on the screen, always visible, while scrolling. |
Add class fixed-area to object you want show on scroll.
You can set the distance from top with attribute data-topscroll="123", replace 123 with n° of px.
If attribute not inserted the default value is auto calculated. Fixed area use class active when scrolling and remove it on top.
You can set a bottom margin with attribute data-bottom="123", replace 123 with n° of px.
|
<div class="fixed-area" data-topscroll="50"> ... </div> |
| Scroll viewport monitor | Check if a object is visible in viewport, so when a user scroll the page check if a object has become visible on the screen. | On page scroll check if visible with function isScrollView("#target") |
$(window).scroll(function () {
if (isScrollView("#target")) {
//#target object is visible
}
});
|
| Scroll to top | Scroll the page to top | Add class scroll-top to target object, when clicked, page scroll to top. |
<div class="scroll-top"> ... </div> |
| Scroll top button | Show the mobile button for scroll the page to top |
Add HTML code <i class="scroll-top scroll-top-mobile fa fa-sort-asc"></i> just before the footer tag.
To maintain always visible the button add class show.
|
<i class="scroll-top scroll-top-mobile fa fa-sort-asc"></i> |
| Link | Classic link on click |
Add attribute data-href="target" to every object you want, use attribute data-target="_blank" for open the link in a new window.
|
<div data-href="http://www.google.com/" data-target="_blank"> ... </div> |
| Scroll to target object | Scroll the page to target object |
Add class scroll-to and set href attribute href="#target" or HTML attribute data-scroll-to="#target"
to trigger object, when clicked, page scroll to target object. You can directly use Javascript method $(#target).scrollTo();
|
<!-- EXAMPLE 1 --> <div class="scroll-to" data-scroll-to="#target"> ... </div> <!-- EXAMPLE 2 --> <a class="scroll-to" href="#target"> ... </a> |
| Vertical middle | Center vertically a object inside a parent container |
You have two options: 1. Add class middle-content to container object.2. Add class box-middle-container to parent container and add class box-middle to object to center.
You can directly use Javascript method $(#container).setMiddleBox()
|
<div class="box-middle-container">
<div class="box-middle"> ... </div>
</div>
|
| Full screen size | Set height and width of target object to full screen size. |
Add class full-screen-size to target object.
Use attribute data-sub-height="123" to subtract overflow height, if needed, replace 123 with height in px.
You can directly use Javascript method $(#target).sizeFullScreen()
|
<div class="full-screen-size" data-sub-height="0">
...
</div>
|
| Click toggle | Generate first and second click functions |
$("#target").toggleClick(function () {
//First click
}, function () {
//Second click
});
|
|
| Javascript link | Open a link via Javascript |
Add attribute data-click="your-link" to the target object. Use data-click-target="_blank" for open it in a new windows.
Use data-click-trigger=".selector"' to assign the click event to a different object.
|
<div data-click="http://codecanyon.net/follow_feed" data-click-trigger=".mfp-content" data-trigger="load"></div> |
| HTML javascript options | Get a array of options from HTML |
Add HTML attribute data-options="option_1:value, option_2:value, option_3:value, ..." to target object and use javascript code of example to get the values.
Supported values are strings, numbers, boolean (true/false).
HTML options overwrite default options and HTML options can contain options for multiple plugins, methods and arrays, not existing options will be ignored. |
HTML target object<div data-options="option_1:value,default_option_2:value,option_3:value"> ... </div> Javascript
var optionsString = $("#target").attr("data-options");
var optionsArr;
//Default options array
var options = {
default_option_1: "value",
default_option_2: "value"
//Other options
}
if (!isEmpty(optionsString)) {
optionsArr = optionsString.split(",");
options = getOptionsString(optionsString, options);
}
//Array "options" now contain default options and HTML options.
|
<div class="bg-cover overlay-container" style="background-image:url('image.jpg')">
<div class="bg-overlay dotted"></div>
<div class="overlay-content text-center">
<h2 class="demo-overlay">Some content here</h2>
</div>
</div>
| Name | Type | Description | ||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Overlay types | CSS Class |
Set overyal types by add overlay class on target obejct.
|
||||||||||||||||||
| Add new overlays | CSS Class | You can found a complete list from transparenttextures.com and patternify.com |