CSS and Javascript

Collection of the main CSS classes and Javascript functions

CSS

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:
CSS class Description
space CSS: height: 70px;
space.m CSS: height: 40px;
space.s CSS: height: 20px;
space.xs CSS: height: 10px;
Best way to use space class is with <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>

CSS - Responsive

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:
CSS class Description
device-xs Small and extra small devices. Smartphones and tablets. (<994px)
device-m Medium devices. Desktops (≥994px)
device-l Large devices. Desktops (≥1200px)
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.

Bootstrap responsive utilties

Javascript

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.

Overelay patterns

Examples

Some content here

Some content here

Some content here

Some content here

Some content here

Some content here

Some content here

Some content here

Some content here


Usage

<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>

Main settings

Name Type Description
Overlay types CSS Class Set overyal types by add overlay class on target obejct.

CSS class Example
dotted <div class="bg-overlay dotted"></div>
line-45 <div class="bg-overlay line-45"></div>
carbonio <div class="bg-overlay carbonio"></div>
tile <div class="bg-overlay tile"></div>
transparent-dark <div class="bg-overlay transparent-dark"></div>
transparent-light <div class="bg-overlay transparent-light"></div>
tv <div class="bg-overlay tv"></div>
squares <div class="bg-overlay squares"></div>
Add new overlays CSS Class You can found a complete list from transparenttextures.com and patternify.com