Use of responsive classes
As you already know all our templates are fully responsive. What happens if you want some modules or elements on the template to be visibile only on large resolution or only on mobile phones?
The solution actually is quite easy. All you need to do is use the following classes either as a module suffix or directly on your HTML code.
The following classes hide elements or modules on different viewports.
.hide-on-small-phones - Hides your element only on smaller viewports. Below 320 pixels.
.hide-on-phones - Hides your element on viewports smaller than 569 pixels.
.hide-on-tablet - Hides your element on viewports ranging from 569 up to 800 pixels in width
.hide-on-desktop - Hides your element on desktop viewports. 801 pixels and up.
The following classes show elements or modules on different viewports.
.show-on-small-phones, .show-on-phone, .show-on-tablet, .show-on-desktop.
Remember you can always use these classes with the .hidden class, in order to avoid writing any unnecessary CSS code.
Examples
If you want a module to be shown only on viewports below 320px you can use the .hidden and .show-on-small-phones classes as the module suffix. Please note that you have to use the show-on- class last.
The same applies if you want an element to be printed or not or even to be shown only on the printed page. You can use the .hide-on-print and .print-only classes.
Other layout classes
Most of the templates use different classes for their layouts but some classes are common for all templates.
A basic HTML/CSS knowledge is required for the use of these classes.
.alpha - This class always floats your element or module to the left with no left margin.
.right - This will float your element or module to right with no right margins.
.floatLeft and .floatRight will float your element but the will not alter any margins.
.clr you can use this class as a suffix or as a div like <div class="clr"></div> to clear any floating elements.
Editing Files
The css files that are included in each template are k2.css for the K2 Component and its modules, and template.css for everything else. Since nuModusVersus template (mid July 2013), though, we provide all styles in template.css file and the color variations in colorvariations.css file.
All template.css files contain a Table of Contents to use as a guide.
It is advised to make any modifications or additions in the custom.css file. That way you won't be losing any of your changes upon update.