Espaciado

Clase 15 de 25 • Curso de Sistemas de Diseño para Desarrolladores

Contenido del curso

Introducción

Instalación y flujos de trabajo

Automatización

Paradigmas

Grillas

Mi primer componente

18
Mi primer componente
08:39 min

Documentación

19
Documentación
08:45 min

Testing

Deploy y versionamiento

Design review

Tomar examen

Resumen

Ya que tenemos elementos dentro de nuestro sistema, ahora tenemos que poner a prueba nuestros tokens de espaciado para ello crearemos un organismo para ver cuál es el efecto de nuestras reglas cuando los átomos conviven en un ecosistema de elementos.

El organismo más común de toda plataforma es el formulario que nos ayuda a recopilar información del usuario. Para esto tomaremos elementos como:

Label
Input
Alert
Btn
Modals

Miguel Angel Reyes Moreno

student•

Me parece que hubiera sido mejor mostrar cómo se genera el código css para ver lo que explicaba Rulótico. Aquí muestro la comparación entre el código SASS (son 56 líneas) y el CSS (son 204) SASS:

@import "../tokens/spacing.scss";

@mixin constructor($num) {
    padding: $num;
    &_margin{
        margin: $num;
    }
    &_top{
        padding-top: $num;
        &_margin{
            margin-top: $num;
        }
    }
    &_bottom{
        padding-top: $num;
        &_margin{
            margin-bottom: $num;
        }
    }
    &_left{
        padding-top: $num;
        &_margin{
            margin-left: $num;
        }
    }
    &_right{
        padding-top: $num;
        &_margin{
            margin-right: $num;
        }
    }
}

.spaced{
    padding: $space;
}

.space{
    @include constructor($space)
}

.space_2{
    @include constructor($space*2)
}

.space_3{
    @include constructor($space*3)
}

.space_4{
    @include constructor($space*4)
}

.space_5{
    @include constructor($space*5)
}

css:

.spaced {
  padding: 10px;
}

.space {
  padding: 10px;
}

.space_margin {
  margin: 10px;
}

.space_top {
  padding-top: 10px;
}

.space_top_margin {
  margin-top: 10px;
}

.space_bottom {
  padding-top: 10px;
}

.space_bottom_margin {
  margin-bottom: 10px;
}

.space_left {
  padding-top: 10px;
}

.space_left_margin {
  margin-left: 10px;
}

.space_right {
  padding-top: 10px;
}

.space_right_margin {
  margin-right: 10px;
}

.space_2 {
  padding: 20px;
}

.space_2_margin {
  margin: 20px;
}

.space_2_top {
  padding-top: 20px;
}

.space_2_top_margin {
  margin-top: 20px;
}

.space_2_bottom {
  padding-top: 20px;
}

.space_2_bottom_margin {
  margin-bottom: 20px;
}

.space_2_left {
  padding-top: 20px;
}

.space_2_left_margin {
  margin-left: 20px;
}

.space_2_right {
  padding-top: 20px;
}

.space_2_right_margin {
  margin-right: 20px;
}

.space_3 {
  padding: 30px;
}

.space_3_margin {
  margin: 30px;
}

.space_3_top {
  padding-top: 30px;
}

.space_3_top_margin {
  margin-top: 30px;
}

.space_3_bottom {
  padding-top: 30px;
}

.space_3_bottom_margin {
  margin-bottom: 30px;
}

.space_3_left {
  padding-top: 30px;
}

.space_3_left_margin {
  margin-left: 30px;
}

.space_3_right {
  padding-top: 30px;
}

.space_3_right_margin {
  margin-right: 30px;
}

.space_4 {
  padding: 40px;
}

.space_4_margin {
  margin: 40px;
}

.space_4_top {
  padding-top: 40px;
}

.space_4_top_margin {
  margin-top: 40px;
}

.space_4_bottom {
  padding-top: 40px;
}

.space_4_bottom_margin {
  margin-bottom: 40px;
}

.space_4_left {
  padding-top: 40px;
}

.space_4_left_margin {
  margin-left: 40px;
}

.space_4_right {
  padding-top: 40px;
}

.space_4_right_margin {
  margin-right: 40px;
}

.space_5 {
  padding: 50px;
}

.space_5_margin {
  margin: 50px;
}

.space_5_top {
  padding-top: 50px;
}

.space_5_top_margin {
  margin-top: 50px;
}

.space_5_bottom {
  padding-top: 50px;
}

.space_5_bottom_margin {
  margin-bottom: 50px;
}

.space_5_left {
  padding-top: 50px;
}

.space_5_left_margin {
  margin-left: 50px;
}

.space_5_right {
  padding-top: 50px;
}

.space_5_right_margin {
  margin-right: 50px;
}
/*# sourceMappingURL=spacing.css.map */

Luis Alejandro Vera Hernandez

student•

Excelente comparacion

Lucas Frezzini

student•

Además de la cantidad de lineas, que si lo minimizas no se hace problema por la cantidad, es la reutilización y la mantenibilidad del código. Eso es lo mejor de todo.

Intenta cambiar via CSS cada margin y padding, perdes tiempo, mantension, calidad, escalabilidad, etc.

Never Andrés Aparicio Hernandéz

Juan David Franco

Mateo Buitrago

Abraham Caso Torres

Juan Esteban Galvis

Jhon Alexander Romero Gonzaga

Jair Neri

Alexander Valencia

Jose Morales Varon

Edward Fabian Martinez Aparicio

lesier gg

Harold David Avila Sabogal

Platzi Team

Daniel Esteban Santos Mendez

Aarón Fabricio Santa Cruz Valdez

Diego Alvaro Parra Abad

Naldo Duran

Raul Goncalves

Espaciado

Introducción

Qué aprenderás sobre los sistemas de diseño para desarrolladores

Conoce Sistemas de Diseño populares

Instalación y flujos de trabajo

Bonus: Personalizando la Terminal

Instalación y flujos de trabajo

Instalación de Node / Express desde 0

Bonus: html, css, js

Automatización

Automatización (Pre procesadores)

Continuando con la automatización

Paradigmas

SMACSS: Arquitectura de CSS escalable y modular

OCSS: Orientación de objetos en CSS

BEM

Bonus: Bootstrap

Naming

Naming

Qué son los tokens

¿Qué son los tokens?

Espaciado

Espaciado

Grillas

Grillas

Bonus: Animando en CSS

Mi primer componente

Mi primer componente

Documentación

Documentación

Testing

Testing

Bonus: Debug en el navegador

Deploy y versionamiento

Cómo empezar en Github

Deploy y versionamiento

Design review

Design review

Cierre