Grid�Systems
voodoo
1
Acerca de �mí
José Jesús Ochoa Torres (Pepe) �Software Engineer @ Wizeline
josejesus.dev
2
Articulo relacionado
3
Demo
4
¿Qué es un grid system?
“En términos básicos, es una estructura que nos permite posicionar contenido tanto en el eje horizontal como en el vertical de una manera consistente”
5
Origen
6
Contexto
7
8
¿Qué es un grid system?
Donec sit amet eros a:��Donec sit amet eros a nisi elementum condimentum. Ut porta eu mi eu luctus. Suspendisse eu rhoncus eros. Mauris sed condimentum felis. Nunc porttitor dui in dui pharetra.�
varius ultrices tortor:��Venenatis. Vivamus ac augue non quam tristique posuere. Donec hendrerit felis et sem.��Donec sit amet eros a nisi elementum condimentum. Ut porta eu mi eu luctus. Suspendisse eu rhoncus eros. Mauris sed condimentum felis.
Fila
Columna
Columna
Columna
Columna
9
¿Qué es un grid system?
Row (Fila)
Column (Columna)
Column (Columna)
10
16 columnas, 12, 10, n % 2 === 0
11
Línea de tiempo
Tables
Floats
Flexbox
Grid
12
Línea de tiempo - Tables�
<table width="100%" height="400px">
<tr>
<td colspan="3”
height="100px” class="header">...</td>� </tr>
� <tr>� <td width="20%" class="left">...</td>
<td width="60%" class="middle">...</td>� <td width="20%" class="right">...</td>� </tr>�
<tr>� <td colspan="3”
height="100px" class="footer">...</td>� </tr>�</table>
13
Línea de tiempo
Floats
Tables
Flexbox
Grid
14
Línea de tiempo Floats�
*, *::beforre, *::after {
box-sizing: border-box;
margin: 0;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.row {
padding-bottom: 20px;
}
.row::after {
content: "";
display: table;
clear: both;
}
[class*='col-’] {
float: left;
}
.col-1 { width: 16.66%; }
.col-2 { width: 33.33%; }
.col-3 { width: 50%; }
.col-4 { width: 66.66%; }
.col-5 { width: 83.33%; }
.col-6 { width: 100%; }
<div class="container">
<div class="row">
<div class="col-1">Col 1 of 6</div>
</div>
<div class="row”
<div class="col-3">Col 3 of 6</div>
<div class="col-3">Col 3 of 6</div>
</div>
<div class="row">
<div class="col-6">Col 6 of 6</div>
</div>
</div>
15
Línea de tiempo - Floats�
16
Línea de tiempo
Flexbox
Tables
Floats
Grid
17
Línea de tiempo - Flexbox�
18
Línea de tiempo - Flexbox�
19
Línea de tiempo - Flexbox�
20
Línea de tiempo - Flexbox�
21
22
Línea de tiempo - Flexbox�
23
Línea de tiempo - Flexbox�
24
Línea de tiempo - Flexbox�
25
Línea de tiempo - Flexbox�
26
Línea de tiempo
Flexbox
Tables
Floats
Grid
27
Línea de tiempo - Flexbox�
*,�*::before,�*::after {� box-sizing: border-box;
}
Box sizing
Row
.row {
display: flex;
flex-wrap: wrap;
}
28
Línea de tiempo - Flexbox�
Columnas
.col-12 { width: 100% } �.col-11 { width: 91.666% }
.col-10 { width: 83.333% }
.col-9 { width: 75% }
.col-8 { width: 66.666% }
.col-7 { width: 58.333% }
.col-6 { width: 50% }
.col-5 { width: 41.666% }
.col-4 { width: 33.333% }
.col-3 { width: 25% }
.col-2 { width: 16.666% }
.col-1 { width: 8.333% }
29
Línea de tiempo
Regla de tres
12 = 100% �N = ?%
------------------
(1 * 100) / 12 = 8.333%
30
Línea de tiempo - Flexbox�
Responsive Breakpoints / Puntos de quiebre responsivos
// Small devices (landscape phones, etc)�$screen-xs-max: 768px;��// Medium devices (tablets, 768px and up)
$screen-sm-min: 769px; ��// Large devices (desktops, 992px and up)
$screen-md-min: 992px;
// Extra large devices (large desktops, 1200px and up) $screen-lg-min: 1200px;
Variables de SASS
31
Línea de tiempo - Flexbox�
Responsive Breakpoints / Puntos de quiebre responsivos
// Small devices (landscape phones, etc)�—screen-xs-max: 768px;��// Medium devices (tablets, 768px and up)
—screen-sm-min: 769px; ��// Large devices (desktops, 992px and up)
—screen-md-min: 992px;
// Extra large devices (large desktops, 1200px and up) —screen-lg-min: 1200px;
Variables de CSS
32
Línea de tiempo Flexbox�
Media query breakpoints
@media (max-width: 768px) {
color: red;
}
// Esto no existe, es para ilustrar el ejemplo
if (max-width: 768px) {
color: red;
}
33
Línea de tiempo Flexbox�
Media query breakpoints
@media (max-width: #{$screen-xs-max}) {}
@media (min-width: #{$screen-sm-min}) {}
@media (min-width: #{$screen-md-min}) {}
@media (min-width: #{$screen-lg-min}) {}
34
Línea de tiempo Flexbox�
Sass Mixin
35
Línea de tiempo Flexbox�
Media query breakpoints
@mixin xs {
@media (max-width: #{$screen-xs-max}) {
@content;
}
}
@mixin sm {
@media (min-width: #{$screen-sm-min}) {
@content;
}
}
@mixin md {
@media (min-width: #{$screen-md-min}) {
@content;
}
}
@mixin lg {
@media (min-width: #{$screen-lg-min}) {
@content;
}
}
36
Línea de tiempo
Flexbox�
Media query breakpoints
@include xs {
.col-xs-12 { width: 100% }
...
.col-xs-1 { width: 8.333% }
}
@include sm {
.col-sm-12 { width: 100% }
...
.col-sm-1 { width: 8.333% }
}
@include md {
.col-md-12 { width: 100% }
...
.col-md-1 { width: 8.333% }
}
@include lg {
.col-lg-12 { width: 100% }
...
.col-lg-1 { width: 8.333% }
}
37
Línea de tiempo
Flexbox�
Generador de columnas
@mixin gridGenerator($breakpoint) {
@for $column from 1 to $columns-number+1 {
.col-#{$breakpoint}-#{$column} {
// flex-basis: percentage($column / $columns-number);
width: (100% * $column) / $columns-number;
}
}
}
38
Línea de tiempo Flexbox�
Generador de columnas
@include xs {
@include gridGenerator($breakpoint: 'xs’);
}
@include sm {
@include gridGenerator($breakpoint: 'sm’);
}
@include md {
@include gridGenerator($breakpoint: 'md’);
}
@include lg {
@include gridGenerator($breakpoint: 'lg’);
}
39
Línea de tiempo - Flexbox�
Media query breakpoints
@include xs {
.col-xs-12 { width: 100% }
...
.col-xs-1 { width: 8.333% }
}
@include sm {
.col-sm-12 { width: 100% }
...
.col-sm-1 { width: 8.333% }
}
@include md {
.col-md-12 { width: 100% }
...
.col-md-1 { width: 8.333% }
}
@include lg {
.col-lg-12 { width: 100% }
...
.col-lg-1 { width: 8.333% }
}
40
Metodologias de CSS
BEM
OOCSS
Atomic / Functional CSS
41
Metodologias de CSS - BEM
42
Metodologias de CSS - BEM
43
Metodologias de CSS - OOCSS
44
Metodologias de CSS - OOCSS
45
Metodologias de CSS – Atomic / Functional CSS
46
Metodologias de CSS – Atomic / Functional CSS
47
Metodologias de CSS – Atomic / Functional CSS
48
Sass - Mixin
Generador de CSS funcional o atomico
49
Sass - Mixin
Generador de CSS funcional o atomico
50
SASS - Mixin
Generador de CSS funcional o atomico
51
Línea de tiempo
Grid
Tables
Floats
Flexbox
52
Línea de tiempo - Grid�
1 dimensión:
Floats
Flexbox
2 dimensiones:
Grid
53
Línea de tiempo - Grid�
54
Línea de tiempo - Grid�
55
Línea de tiempo - Grid�
56
Línea de tiempo - Grid�
57
Línea de tiempo - Grid�
58
Grid�no está�remplazando a Flexbox
59
Un grid system no
es siempre la mejor opción
60
CSS in JS
61
Componentes web��
62
Componentes web��
63
(NO/SI) construyas otro framework de CSS
64
Contribuye
65
Gracias
josejesus.dev
66