Espaciado

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

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

Never Andrés Aparicio Hernandéz

student•

Lo bonito de este curso es que soy un bebe de luz🤗

Platzi Team

student•

Mateo Buitrago

student•

Increíble esta clase!

Abraham Caso Torres

student•

MAS PARECE UN CURSO DE SASS

Juan Esteban Galvis

student•

Hay uno dedicado a Sass: https://platzi.com/cursos/sass/

Rulótico lo usa y explica lo que utiliza, pero lo llama archivo .scss y lo compila con express (a diferencia del curso de Sass que compila con Prepros)

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.

Jhon Alexander Romero Gonzaga

student•

Me parece un curso muy completo, el saber separar por carpetas los estilos al principio es muy confuso e incluso definir nombres y reglas por default.

Jair Neri

student•

Esto combinado con el curso de preprocesadores es MAGIA

Alexander Valencia

student•

++SUPER CLASE++

Jose Morales Varon

student•

Sistema de diseño es un conjunto de reglas a utilizar para un producto o proyecto que puede cambiar.

Edward Fabian Martinez Aparicio

student•

Muy buena aplicación de los mixins

lesier gg

student•

Creo que para mi simple blog, este sistema es demasiado. :V

Harold David Avila Sabogal

student•

siempre depende de tus gustos y de las necesidades de tu proyecto

Alexander Valencia

student•

y si tu ++simple blog++ se convierte en un ++super blog famoso++? 🤐🤐

Platzi Team

student•

Si de pronto alguien se siente perdido en este punto del curso, recomendaría tomar los curso de preprocesadores y sass, les ayudara bastante

Daniel Esteban Santos Mendez

student•

Muy flayera esta clase, después del curso de Preprocesadores Css elegí Sass también hice el curso y ando estudiandolo bastante, me gusto esta manera de aplicar los mixins.

Juan Esteban Galvis

student•

Pienso que hubiera sido más rápido compilar ese código y mostrar como quedo en css jajaja y muy recomendable ver el curso de Sass para entender los mixin, mandar parámetros y la diferencia con las funciones.

Aarón Fabricio Santa Cruz Valdez

student•

Un sistema de diseño es un conjunto de reglas. Eso si se me quedo bien grabado en la mente.

Diego Alvaro Parra Abad

student•

Que bueno haber llevado el curso de Preprocesadores y Sass antes de este curso sino fácil andaría un poco perdido.

Naldo Duran

student•

Raul Goncalves

student•

Tremendo aporte

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