Difference between revisions of "Helpfull CSS classes"

From WikiName
Jump to: navigation, search
(Specially built for use with page builder)
Line 6: Line 6:
 
*'''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.
 
*'''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.
 
*'''shadow''': Adds shadow effect to the element. Usually used with img tag.
 +
*'''full''': Make the element width to be 100% of the parent.
  
 
===Specially built for use with page builder===  
 
===Specially built for use with page builder===  

Revision as of 16:13, 24 March 2015

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

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

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 login applies to pad 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 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.