8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 1/16

  RGANIZING CSS

Sanjeev Prajapati

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 2/16

CHANGE IS OBVIOUS

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 3/16

CSS is Simple

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 4/16

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 5/16

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 6/16

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 7/16

Guideline for organizing css

1. Set up Bases

2. Make it modular

3. Follow OOCSS, SMACSS, BM!. "se #ss pre$pro#essor %ess, sass,

st&lus

'. Automate desi(n task). *o#ument t+e St&le uide

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 8/16

Se up !ase

-ei(+twidt+

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 9/16

Se up !ase

/+ead$+ei(+t0 in#+

.od&4widt+0 /+ead$

+ei(+t52+ei(+t0 /+ead$

+ei(+t5.'6

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 10/16

Se up !ase

/ase$#olor0 per7e#t8lue/ase$7ont$si9e0 1!p:/ase$7ont$7amil&0 -elveti#a, Sans$seri7

.+eadin(4#olor0 darken;/ase$#olor, 2<=>7ont$si9e0 /ase$7ont$si9e ? !p:

7ont$7amil&0 /ase$7ont$7amil&6

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 11/16

"a#e css modular 

 //in csss fle human_style.cssseparate partial fles are imported

/import @8ase.#ss

/import @ 8+ead.#ss/import @8+and.#ss/import @8torso.#ss/import @8le(.#ss

/import@8Dt8t+e8+uman8in8Moile.#ss i.e /import @8media.#ss

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 12/16

$ollo% principles

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 13/16

Use css &reprocessor 

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 14/16

Auomae 'ou repeaing as#

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 15/16

(ocumen 'our S'le Guide

• A livin( st&le uide t+at +elps etterunderstand &our #ode,

• St&le uide also +elp to #o$ordinatewit+ ot+er developer

8/19/2019 Organizing Css

http://slidepdf.com/reader/full/organizing-css 16/16

sanjeevpraja/(mail.#omsanjeevpraja/(it+u.io