A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Espaciado

15/25
Recursos

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

Aportes 16

Preguntas 0

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

Lo bonito de este curso es que soy un bebe de luzūü§ó

Increíble esta clase!

MAS PARECE UN CURSO DE SASS

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 */

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.

Esto combinado con el curso de preprocesadores es MAGIA

SUPER CLASE

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

Muy buena aplicación de los mixins

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

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

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.

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.

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

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

f