View source for Helpfull CSS classes

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.
<pre style="width:160px;float:left;margin-right:20px">
.pull_t
.pull_r
.pull_b
.pull_l
.pull_rl
.pull_tb
.pull_trl
.pull_rlb
.pull_all
</pre>
<pre style="width:160px;float:left;margin-right:20px">
.pad_t
.pad_r
.pad_l
.pad_b
.pad_rl
.pad_tb
.pad_trl
.pad_rlb
.pad_all
</pre>
<pre style="width:160px;float:left;margin-right:20px">
.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
</pre>
<pre style="width:160px;float:left">
.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
</pre>
<div style="clear:both"></div>
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 
<code>btn</code> to declare it as button
<code>btn-primary/success/danger/warning/default/inverse</code> to specify the type of button. The colors will be blue,green,red,orange, white and black respectively.
<code>btn-large/small/mini</code> 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 [http://getbootstrap.com/css/#buttons 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 [http://fontawesome.io/examples/ examples here] on how to use them