The CSS Stylesheet structure:

Custom.css stylesheet:#

This stylesheet is where you add your own css styles. The file is separate because template.css or other stylesheets surely will be updated and we cannot afford such terrible thing to happen. Make sure you add your own styles here, either new styles or simply override others. Custom.css is loaded lastly so that you can easily override any properties.

Bootstrap.css stylesheet:#

This stylesheet contains thousands of really cool styles generated by the famous Bootstrap UI Toolkit (UI Framework). To build your own custom built please follow this link http://getbootstrap.com/customize/?id=5fdbc01a38262c94ce5f and choose what to load or not.  This is a unique link that holds the configuration of the Boostrap build. For example you might not want all sorts of things that’s loaded inside and removing stuff will optimize page speed. There are thousands of documentation lines on the Bootstrap’s website so i highly recommend having a look and try using stuff that’s already loaded in the template, before loading other plugins.

Base-sizing.css stylesheet#

This stylesheet holds preset classes that are duplicated for each main media resolution breakpoint (xs , sm , md , lg). This offers immense customisation power with just a few classes added to a certain block or element.

I highly recommend having a look overall in the stylesheet and keep in mind what’s inside and what you can use from it. I added lot’s of html markup examples with these classes applied.

 Template.css stylesheet#

This is the main stylesheet which contains almost everything that the template is styled upon. Please keep in mind that i will surely update the template therefore this file too so i highly recommend NOT to edit or alter it, and instead add your own css code into custom.css stylesheet. It’s very important not to overwrite your work.

The template itself serves as a database of examples of html markup and css styles applied. In the Styles menu pages you can see there are lots of examples of the classes and styles added to the elements. I really don;t know what to add here as i would actually recommend scanning the file by yourself and see what’s inside. If there’s no patience for this, no problem, just copy/paste code from the existing html files and then debug styles using the Chrome Developer Tools (see TIPS section with a few tutorials).

 Responsive.css stylesheet (part 2 – responsive styles)#

At the end of the stylesheet you will find the @media queries and responsive design styles. Please keep in mind that the styles are desktop first, not mobile first.

To debug responsive css styles, open the Chrome Developer Tools in a new window and resize your browser. On the right side css styles pane you will notice that media queries appear and you can simply figure out what styles are applied.