Difference between revisions of "Helpfull CSS classes"

Latest revision as of 05:32, 30 March 2015

Here are the list of helpful CSS classes that are there to primarily help you in building business sites.

WordPress default classes and some generic ones

• alignleft:Left aligns an element.
• alignleft:Left aligns a element.
• aligncenter:Centre aligns a element.
• clear:No floating elements allowed on either the left or the right side
• clearfix:Uh oh... this image is taller than the element containing it, and it's floated, so it's overflowing outside of its container! Boo. Fix this by adding clearfix to the container div.
• shadow: Adds shadow effect to the element. Usually used with img tag.
• full: Make the element width to be 100% of the parent.

Responsive classes

• hide-on-desktop: Hided on desktops. (Window width greater than site width)
• hide-on-tablet: Hides on tablets. (Width between 580px to 780px)
• hide-on-mobile: Hides on mobiles. (Screen width less than 580px)

Specially built for use with page builder

In Swift design options/layout settings we have a setting named airy where regular = 20px airy = 40px more airy = 60px lot more airy = 80px

spacing between columns.

The below classes depend on the value you select for the airy setting. If you select regular pull_* will be 10px and pull_*_2x will be 20px, if you select more airy pull_* will be 30px and pull_*_2x will be 60px. Same logic applies to pad (padding) also.

.pull_t
.pull_r
.pull_b
.pull_l
.pull_rl
.pull_tb
.pull_trl
.pull_rlb
.pull_all

.pad_t
.pad_r
.pad_l
.pad_b
.pad_rl
.pad_tb
.pad_trl
.pad_rlb
.pad_all

.pull_t_2x
.pull_r_2x
.pull_b_2x
.pull_l_2x
.pull_rl_2x
.pull_tb_2x
.pull_trl_2x
.pull_rlb_2x
.pull_all_2x

.pad_t_2x
.pad_r_2x
.pad_l_2x
.pad_b_2x
.pad_rl_2x
.pad_tb_2x
.pad_trl_2x
.pad_rlb_2x
.pad_all_2x

pull* classes pull the element in the direction specified (t,r,b,l). pad* classes add padding in direction specified.

Why use these classes when you can specify them inline or in page CSS ?

This is because Swift is truly responsive and we want the sites you develop also to scale beautifully. Imagine having 80px spacing between 2 or 3 columns on a mobile device, AWKWARD right? So, airy setting is ignored on tablets and mobiles. Using these classes ensures that you get appropriate spacing based on screen size.

Twitter bootstrap CSS classes

We included some twitter bootstrap goodies like

• buttons
• info/alert boxes
• forms

to create a button add classes btn to declare it as button btn-primary/success/danger/warning/default/inverse to specify the type of button. The colors will be blue,green,red,orange, white and black respectively. btn-large/small/mini to specify the size of the button.

You can find the demo of these buttons on the shortcode examples page you can read more about them on the bootstrap docs buttons.

Fontawesome classes

Swift includes 4 sets highly optimised font awesome icons, you can choose the set you want at swift design options/advanced. Along with the icons, it also included all of font awesome CSS.

Please check the examples here on how to use them