1 of 33

Metodología con Sentido Atomic Design, Sass y BEM

Cristian Felipe Calderón Fonseca

2 of 33

Atomic Design.

“Es una metodología para crear sistemas”

“Is a methodology for creating systems”

3 of 33

“Es una metodología para crear sistemas”

Es una forma de hacer las cosas, resolver problemas o completar tareas.

4 of 33

“Es una metodología para crear sistemas”

En general se refiere a un producto o solución final.

5 of 33

Atomic Design.

Átomos, Moléculas, Organismos, Templates y Páginas

“Is a methodology for creating systems”

6 of 33

Atomic Design.

“Is a methodology for creating systems”

Átomos: La unidad más simple y básica del sistema.

7 of 33

Atomic Design.

“Is a methodology for creating systems”

Moléculas: El conjunto y agrupación de átomos.

8 of 33

Atomic Design.

“Is a methodology for creating systems”

Organismos: Complejas estructuras formadas de moléculas.

9 of 33

Organismos.

“Complejas estructuras formadas de moléculas.”

Molécula “Navegación Superior”.

10 of 33

Organismos.

“Complejas estructuras formadas de moléculas.”

Molécula “Introducción Perfil de Usuario”.

11 of 33

Organismos.

“Complejas estructuras formadas de moléculas.”

Molécula “Navegación Inferior”.

12 of 33

Atomic Design.

“Is a methodology for creating systems”

Templates: Combinación de organismos.

13 of 33

Template.

“Complejas estructuras formadas de organismos.”

14 of 33

Atomic Design.

“Is a methodology for creating systems”

Pages: Instancias de los templates, pero con más detalles del sistema.

15 of 33

Pages.

“Instancias de los templates pero con más detalle.”

16 of 33

Atomic Design.

“Is a methodology for creating systems”

17 of 33

Sass. (Syntactically Awesome Style Sheets)

“Archivo preprocesado que nos habilita hacer más cosas con CSS”

“CSS with super powers”

18 of 33

“Archivo preprocesado que nos habilita hacer más cosas con CSS”

Sass. (Syntactically Awesome Style Sheets)

“CSS with super powers”

19 of 33

“Archivo preprocesado que nos habilita hacer más cosas con CSS”

20 of 33

“Archivo preprocesador que nos habilita hacer más cosas con CSS”

“Syntax friendly”

“Variables”

“Nesting”

“Mixins”

“Divide and conquer, modules”

“Comunidad”

21 of 33

BEM. (Block-Element-Modifier)

“Es una metodología o bien un acuerdo para nombrar elementos”

“Naming convention”

22 of 33

Block sintaxis

Block HTML

Block CSS

BEM. (Block-Element-Modifier)

“Naming convention”

23 of 33

Element sintaxis

Element HTML

Element CSS

BEM. (Block-Element-Modifier)

“Naming convention”

24 of 33

Modifier sintaxis

Modifier HTML

Modifier CSS

BEM. (Block-Element-Modifier)

“Naming convention”

25 of 33

BEM. (Block-Element-Modifier)

“Es una metodología o bien un acuerdo para nombrar elementos”

“Naming convention”

26 of 33

Ejercicio.AtomicDesign-Sass-BEM.

27 of 33

Ejercicio.AtomicDesign-Sass-BEM.

28 of 33

Ejercicio.AtomicDesign-Sass-BEM.

29 of 33

Ejercicio.AtomicDesign-Sass-BEM.

HTML

30 of 33

Ejercicio.AtomicDesign-Sass-BEM.

HTML

Sass

31 of 33

Ejercicio.AtomicDesign-Sass-BEM.

HTML

32 of 33

Ejercicio.AtomicDesign-Sass-BEM.

Sass

33 of 33

Cristian Felipe Calderón Fonseca

Github: cristianfelipe94

cristianpipe0494@gmail.com

“Metodología con sentido AtomicDesign, Sass y BEM.”