Difference between revisions of "Helpfull CSS classes"
| 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. | ||
| + | |||
| + | ===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* 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. | ||
Revision as of 15:59, 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.
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* 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.
