OOCSS sand SMACSS

Post on 27-Jan-2015

129 views 1 download

Preview:

Click to see full reader

Tags:

Report this document
SHARE

description

Ideas

Transcript of OOCSS sand SMACSS

OOCSS&

SMACSS

Stanislav Usoltsev

Overview

• Encapsulation• Inheritance• Polymorphism• Mixins• Aggregation• Composition• Namespaces• States

2

Encapsulation

<div style=“width: 50%; color: red;”>Inline Styles

</div>

3

Encapsulation

<div style=“width: 50%; color: red;”>Inline Styles

</div><div class=“cls1”>

Use .class</div>

4

Inheritance

.cls1 {width: 50%; color: red;

}

.subcls1 {/* new properties */

}

5

Inheritance :: Type #1

.cls1 {width: 50%; color: red;

}

/* via classes */

.cls1.subcls1 {…

}6

Inheritance :: Type #1

.btns {background: url(‘sprite.png’);

}

.btns.submit {background-position: -40px 0;

}

7

Inheritance :: Type #1

class Button {protected $_background;

}

class ButtonSubmit extends Button {protected $_bg_position_x = 40,

$_bg_position_y = 0;}

8

Inheritance :: Type #1

9

0 0 0 0 0 0 0 0

Inheritance :: Type #1

10

!important

inline #ID .class tag inline #ID .class tag

0 0 0 0 0 0 0 0

Inheritance :: Type #1

11

!important

inline #ID .class tag inline #ID .class tag

0 0 0 0 0 0 0 0

Bad Practice

Inheritance :: Type #1

12

!important

inline #ID .class tag inline #ID .class tag

0 0 0 0 0 0 0 0

Bad Practice

Inheritance :: Type #1

13

!important

inline #ID .class tag inline #ID .class tag

0 0 0 0 0 0 0 0

Don’t use #ID in OOCSS and SMACSSUse #ID for JavaScript

Inheritance :: Type #1

14

!important

inline #ID .class tag inline #ID .class tag

0 0 0 0 0 0 0 0

Don’t use tags in OOCSS and SMACSSTags - unpredictable

Inheritance :: Type #1

.btns {background: url(‘sprite.png’);

}

.btns.submit {background-position: -40px 0;

}

15

.class

1

.class

2

+ cascade

Inheritance :: Type #2

.cls1 {width: 50%; color: red;

}

/* via media queries */

@media … {…

}16

Inheritance :: Type #2

17

Init: 960gs, 12units

Inheritance :: Type #2

18

.unit-1 { width: 60px; margin: 10px; }

.unit-2 { width: 140px; margin: 10px; }

.unit-3 { width: 220px; margin: 10px; }

.unit-4 { width: 300px; margin: 10px; }

.unit-5 { width: 380px; margin: 10px; }

.unit-6 { width: 460px; margin: 10px; }

.unit-7 { width: 540px; margin: 10px; }

.unit-8 { width: 620px; margin: 10px; }

.unit-9 { width: 700px; margin: 10px; }

.unit-10 { width: 780px; margin: 10px; }

.unit-11 { width: 860px; margin: 10px; }

.unit-12 { width: 940px; margin: 10px; }

Init: 960gs, 12units

Inheritance :: Type #2

19

.unit-1 { width: 60px; margin: 10px; }

.unit-2 { width: 140px; margin: 10px; }

.unit-3 { width: 220px; margin: 10px; }

.unit-4 { width: 300px; margin: 10px; }

.unit-5 { width: 380px; margin: 10px; }

.unit-6 { width: 460px; margin: 10px; }

.unit-7 { width: 540px; margin: 10px; }

.unit-8 { width: 620px; margin: 10px; }

.unit-9 { width: 700px; margin: 10px; }

.unit-10 { width: 780px; margin: 10px; }

.unit-11 { width: 860px; margin: 10px; }

.unit-12 { width: 940px; margin: 10px; }

Init: 960gs, 12units Final: 1280gs, 16units

Inheritance :: Type #2

20

.unit-1 { width: 60px; margin: 10px; }

.unit-2 { width: 140px; margin: 10px; }

.unit-3 { width: 220px; margin: 10px; }

.unit-4 { width: 300px; margin: 10px; }

.unit-5 { width: 380px; margin: 10px; }

.unit-6 { width: 460px; margin: 10px; }

.unit-7 { width: 540px; margin: 10px; }

.unit-8 { width: 620px; margin: 10px; }

.unit-9 { width: 700px; margin: 10px; }

.unit-10 { width: 780px; margin: 10px; }

.unit-11 { width: 860px; margin: 10px; }

.unit-12 { width: 940px; margin: 10px; }

.unit-1 { width: 60px; margin: 10px; }

.unit-2 { width: 140px; margin: 10px; }

.unit-3 { width: 220px; margin: 10px; }

.unit-4 { width: 300px; margin: 10px; }

.unit-5 { width: 380px; margin: 10px; }

.unit-6 { width: 460px; margin: 10px; }

.unit-7 { width: 540px; margin: 10px; }

.unit-8 { width: 620px; margin: 10px; }

.unit-9 { width: 700px; margin: 10px; }

.unit-10 { width: 780px; margin: 10px; }

.unit-11 { width: 860px; margin: 10px; }

.unit-12 { width: 940px; margin: 10px; }

Init: 960gs, 12units Final: 1280gs, 16units

Inheritance :: Type #2

21

.unit-1 { width: 60px; margin: 10px; }

.unit-2 { width: 140px; margin: 10px; }

.unit-3 { width: 220px; margin: 10px; }

.unit-4 { width: 300px; margin: 10px; }

.unit-5 { width: 380px; margin: 10px; }

.unit-6 { width: 460px; margin: 10px; }

.unit-7 { width: 540px; margin: 10px; }

.unit-8 { width: 620px; margin: 10px; }

.unit-9 { width: 700px; margin: 10px; }

.unit-10 { width: 780px; margin: 10px; }

.unit-11 { width: 860px; margin: 10px; }

.unit-12 { width: 940px; margin: 10px; }

.unit-1 { width: 60px; margin: 10px; }

.unit-2 { width: 140px; margin: 10px; }

.unit-3 { width: 220px; margin: 10px; }

.unit-4 { width: 300px; margin: 10px; }

.unit-5 { width: 380px; margin: 10px; }

.unit-6 { width: 460px; margin: 10px; }

.unit-7 { width: 540px; margin: 10px; }

.unit-8 { width: 620px; margin: 10px; }

.unit-9 { width: 700px; margin: 10px; }

.unit-10 { width: 780px; margin: 10px; }

.unit-11 { width: 860px; margin: 10px; }

.unit-12 { width: 940px; margin: 10px; }

.unit-13 { width: 1020px; margin: 10px; }

.unit-14 { width: 1100px; margin: 10px; }

.unit-15 { width: 1180px; margin: 10px; }

.unit-16 { width: 1260px; margin: 10px; }

Init: 960gs, 12units Final: 1280gs, 16units

Inheritance :: Type #2

22

.unit-1 { width: 60px; margin: 10px; }

.unit-2 { width: 140px; margin: 10px; }

.unit-3 { width: 220px; margin: 10px; }

.unit-4 { width: 300px; margin: 10px; }

.unit-5 { width: 380px; margin: 10px; }

.unit-6 { width: 460px; margin: 10px; }

.unit-7 { width: 540px; margin: 10px; }

.unit-8 { width: 620px; margin: 10px; }

.unit-9 { width: 700px; margin: 10px; }

.unit-10 { width: 780px; margin: 10px; }

.unit-11 { width: 860px; margin: 10px; }

.unit-12 { width: 940px; margin: 10px; }

.unit-1 { width: 60px; margin: 10px; }

.unit-2 { width: 140px; margin: 10px; }

.unit-3 { width: 220px; margin: 10px; }

.unit-4 { width: 300px; margin: 10px; }

.unit-5 { width: 380px; margin: 10px; }

.unit-6 { width: 460px; margin: 10px; }

.unit-7 { width: 540px; margin: 10px; }

.unit-8 { width: 620px; margin: 10px; }

.unit-9 { width: 700px; margin: 10px; }

.unit-10 { width: 780px; margin: 10px; }

.unit-11 { width: 860px; margin: 10px; }

.unit-12 { width: 940px; margin: 10px; }

.unit-13 { width: 1020px; margin: 10px; }

.unit-14 { width: 1100px; margin: 10px; }

.unit-15 { width: 1180px; margin: 10px; }

.unit-16 { width: 1260px; margin: 10px; }

.has-grid-16-units { display: block; }

Init: 960gs, 12units Final: 1280gs, 16units

Inheritance :: Type #2

23

.unit-1 { width: 60px; margin: 10px; }

.unit-2 { width: 140px; margin: 10px; }

.unit-3 { width: 220px; margin: 10px; }

.unit-4 { width: 300px; margin: 10px; }

.unit-5 { width: 380px; margin: 10px; }

.unit-6 { width: 460px; margin: 10px; }

.unit-7 { width: 540px; margin: 10px; }

.unit-8 { width: 620px; margin: 10px; }

.unit-9 { width: 700px; margin: 10px; }

.unit-10 { width: 780px; margin: 10px; }

.unit-11 { width: 860px; margin: 10px; }

.unit-12 { width: 940px; margin: 10px; }

.unit-13 { width: 0; margin: 10px; }

.unit-14 { width: 0; margin: 10px; }

.unit-15 { width: 0; margin: 10px; }

.unit-16 { width: 0; margin: 10px; }

.has-grid-16-units { display: none; }

.unit-1 { width: 60px; margin: 10px; }

.unit-2 { width: 140px; margin: 10px; }

.unit-3 { width: 220px; margin: 10px; }

.unit-4 { width: 300px; margin: 10px; }

.unit-5 { width: 380px; margin: 10px; }

.unit-6 { width: 460px; margin: 10px; }

.unit-7 { width: 540px; margin: 10px; }

.unit-8 { width: 620px; margin: 10px; }

.unit-9 { width: 700px; margin: 10px; }

.unit-10 { width: 780px; margin: 10px; }

.unit-11 { width: 860px; margin: 10px; }

.unit-12 { width: 940px; margin: 10px; }

.unit-13 { width: 1020px; margin: 10px; }

.unit-14 { width: 1100px; margin: 10px; }

.unit-15 { width: 1180px; margin: 10px; }

.unit-16 { width: 1260px; margin: 10px; }

.has-grid-16-units { display: block; }

Init: 960gs, 12units Final: 1280gs, 16units

Inheritance :: Type #2

24

.unit-1 { width: 60px; margin: 10px; }

.unit-2 { width: 140px; margin: 10px; }

.unit-3 { width: 220px; margin: 10px; }

.unit-4 { width: 300px; margin: 10px; }

.unit-5 { width: 380px; margin: 10px; }

.unit-6 { width: 460px; margin: 10px; }

.unit-7 { width: 540px; margin: 10px; }

.unit-8 { width: 620px; margin: 10px; }

.unit-9 { width: 700px; margin: 10px; }

.unit-10 { width: 780px; margin: 10px; }

.unit-11 { width: 860px; margin: 10px; }

.unit-12 { width: 940px; margin: 10px; }

.unit-13 { width: 0; margin: 10px; }

.unit-14 { width: 0; margin: 10px; }

.unit-15 { width: 0; margin: 10px; }

.unit-16 { width: 0; margin: 10px; }

.is-big-screen { display: none; }

.unit-1 { width: 60px; margin: 10px; }

.unit-2 { width: 140px; margin: 10px; }

.unit-3 { width: 220px; margin: 10px; }

.unit-4 { width: 300px; margin: 10px; }

.unit-5 { width: 380px; margin: 10px; }

.unit-6 { width: 460px; margin: 10px; }

.unit-7 { width: 540px; margin: 10px; }

.unit-8 { width: 620px; margin: 10px; }

.unit-9 { width: 700px; margin: 10px; }

.unit-10 { width: 780px; margin: 10px; }

.unit-11 { width: 860px; margin: 10px; }

.unit-12 { width: 940px; margin: 10px; }

.unit-13 { width: 1020px; margin: 10px; }

.unit-14 { width: 1100px; margin: 10px; }

.unit-15 { width: 1180px; margin: 10px; }

.unit-16 { width: 1260px; margin: 10px; }

.is-big-screen { display: block; }

Init: 960gs, 12units Final: 1280gs, 16units

Inheritance :: Type #2

25

.unit-1 { width: 60px; margin: 10px; }

.unit-2 { width: 140px; margin: 10px; }

.unit-3 { width: 220px; margin: 10px; }

.unit-4 { width: 300px; margin: 10px; }

.unit-5 { width: 380px; margin: 10px; }

.unit-6 { width: 460px; margin: 10px; }

.unit-7 { width: 540px; margin: 10px; }

.unit-8 { width: 620px; margin: 10px; }

.unit-9 { width: 700px; margin: 10px; }

.unit-10 { width: 780px; margin: 10px; }

.unit-11 { width: 860px; margin: 10px; }

.unit-12 { width: 940px; margin: 10px; }

.unit-13 { width: 0; margin: 10px; }

.unit-14 { width: 0; margin: 10px; }

.unit-15 { width: 0; margin: 10px; }

.unit-16 { width: 0; margin: 10px; }

.is-big-screen { display: none; }

.unit-1 { width: 60px; margin: 10px; }

.unit-2 { width: 140px; margin: 10px; }

.unit-3 { width: 220px; margin: 10px; }

.unit-4 { width: 300px; margin: 10px; }

.unit-5 { width: 380px; margin: 10px; }

.unit-6 { width: 460px; margin: 10px; }

.unit-7 { width: 540px; margin: 10px; }

.unit-8 { width: 620px; margin: 10px; }

.unit-9 { width: 700px; margin: 10px; }

.unit-10 { width: 780px; margin: 10px; }

.unit-11 { width: 860px; margin: 10px; }

.unit-12 { width: 940px; margin: 10px; }

.unit-13 { width: 1020px; margin: 10px; }

.unit-14 { width: 1100px; margin: 10px; }

.unit-15 { width: 1180px; margin: 10px; }

.unit-16 { width: 1260px; margin: 10px; }

.is-big-screen { display: block; }

Init: 960gs, 12units Final: 1280gs, 16units

Polymorphism

.cls1 {width: 50%; color: red;

}

.cls1 {width: 60%; color: blue;

}

26

Polymorphism

#content .cls1 {width: 50%; color: red;

}

#sidebar .cls1 {width: 60%; color: blue;

}

27

Polymorphism

…public __construct(Section $section) {

$this->_section = $section;}public function print() {

$this->_section->cls1->render();}

..

$dummy = new Dummy(new Content());$dummy->render();$dummy = new Dummy(new Sidebar());$dummy->render();

28

Mixins

.btn {/* default value of width, e.g. auto or inherit */

}

.small {width: 100px;

}

.big {width: 700px;

}

29

Mixins

<div class=“btn small”>Small</div>

<div class=“btn big”>Big</div>

30

Aggregation

.box {…

}

.box .header {…

}

.box > .footer {…

}

31

Aggregation is Polymorphic

32

Composition

.box {…

}

.box-header {…

}

.box-footer {…

}

33

Namespaces

.page-home { … }

.page-account { … }

.page-home .box { … }

.page-account .box { … }

34

States

.is-state { … }

.has-something { … }

.is-hidden { … }

.has-notifications { … }

35

Combine Stateswith Namespaces

36

States

.box { … }

.box-content { … }

.has-notifications { … }

.has-notifications .box { … }

37

UseLESS/Sass

38

Combine withLESS/Sass

39

Categories in SMACSS

40

Categories in SMACSS

Base RulesLayout RulesModule RulesState RulesTheme Rules

41

You can create own categories

42

Useful Resources

http://oocss.org/http://smacss.com/http://cssdoc.net/

+ Google+ Wikipedia+ Slideshare

+ Books on CSS43

What are Your Questions and Feedback?

44

Thank you

Stanislav Usoltsev

45

Top related

Обозреватель - GitHub Pages · SMACSS ACSS Axiomatic CSS 57. BEM Блок Элемент Модификатор 58. BEM Блок - Функционально независимый
 Documents
Red Clay/Sand & Silica Sand, Baseball Infieldfortlauderdale.gov/purchasing/bids/10612 Red Clay-Sand Silica Sand... · 512-10612 Red Clay/Sand & Silica Sand, Baseball Infield AnnDebra
 Documents
Hoja de Vida - Developer · Vue - Git - SMACSS - OOCSS - BEM. Diseño de interfaces Más que se vea “bonito” un diseño debe ser funcional, presto atención a los detalles para
 Documents
MV-Geology-Map-for-presentation€¦ · SEMAPHORE SAND MEMBER: Quartz beach sand SEMAPHORE SAND MEMBER: Coastal dune sand Beach gravel Alluvial sand in active stream channels Talus
 Documents
Tech Headline - CSS Naming Conventions: Improve your code with OOCSS, SMACSS, DRY and BEM
 Internet
Tytuł oryginału: Less Web Development Essentials, Second ... · Metodologie OOCSS, SMACSS oraz BEM 59 Podsumowanie 60 Rozdziaï 2. Stosowanie zmiennych i wstawek 63 Stosowanie komentarzy
 Documents
Leveling up CSS with SMACSS and BEM
 Technology
Intro to OOCSS Workshop
 Internet
OOCSS and SMACSS
 Engineering
Hydro WasHed Plaster sand & ConCrete sand
 Documents
Benjamin Neary - Squarespace · HTML CSS3 Bootstrap 3 & 4 OOCSS / BEM ... Front End Developer August 2015 ... interfaces with Asp.Net applications using custom css frameworks, ...
 Documents
Quotetion for River Sand & M Sand
 Documents
Soil Classification Using the Cone Penetration Test Classification using the CPT...silty sand to srndy silt sand to silty sand sand gravelly sand to . sand very . stiff fine . grrined
 Documents
Oocss & progressive css3 selectors
 Technology
PSD to Theme: The SMACSS Way
 Technology
Review the OOCSS
 Technology
THE SAND MUSEUM TOTTORI SAND SAND MUSEUM THE 2015 2014
 Documents
SAND, SAND ADDITIVES and SAND PROPERTİES · PDF fileSand Casting of Metals 1 Mold Materials Topics covered: ` Molding sand ` Constituents of molding sand ` Property requirements of
 Documents
REPORT ON GEOTECHNICAL INVESTIGATION FOR ... at Test Depth Sand Clayey Sand Clayey Sand Silt Sand Sand Notes Clayey sand 200mm below test depth REPORT ON GEOTECHNICAL INVESTIGATION
 Documents
CSS Class Naming and BEM - paneru.co.uk · BEM ( Block, Element, Modifier ) SMACSS ( Scalable and Modular Architecture for CSS ) OOCSS ( Object Oriented CSS ) Developed by the team
 Documents

Copyright © 2022 FDOCUMENTS