@nucliweb

joan.leon@gmail.com

Developer Advocate & Training Manager @SchibstedSpain

#HTML5 #CSS3 #SASS #Javascript #Node.js #Animation #PostCSS #AtomEditor #Games

github.com/nucliweb

Joan León

ITCSS

by Harry Roberts

@csswizardry

ITCSS

Inverted Triangle architecture for CSS

¿Qué no es ITCSS?

Un template CSS
Una librería de componentes
Un pre-procesador CSS
Un post- procesador CSS
Un remplazo de Bootstrap, Fundation...

¿Qué es ITCSS?

Una arquitectura sana, escalable y manejable
Una filosofía, no una librería
Un meta framework, un frameworks para frameworks
Increíblemente simple

Settings

Configuración
Configuración a nivel de proyecto y conmutadores de características.
Núcleo
Configuración básica del proyecto.
Global
Variables y ajustes de todo el proyecto.

/settings/

inuitcss

Tools

Font-size
Mixin que garantiza el baseline-friendly line-heights.
Clearfix
Micro clearfix mixin.
Hidden
Mixin para ocultar elementos.
Sass MQ
Mixin de media query predeterminado del proyecto.

/tools/

inuitcss

Generic

Box-sizing
Mejorar o normalizar 'box-sizing'.
Normalize.css
Normalizar el comportamoento de los navegadores.
Reset
Modificaciones para complementar Normalice.css.
Shared
Declaraciones compartidas para ciertos elementos.

/generic/

inuitcss

Elements

Page
Definimos el 'font-size' y 'line-height' por defecto de todo el proyecto.
Headings
Mínima definición (sólo tamaño de fuente) para los encabezados 1 a 6.
Images
Estilos base de las imágenes.
Tables
Estilos básicos para las tablas.

/elements/

inuitcss

Objects

Wraper
Objeto contenedor en la página.
Layout
Layout genérico del proyecto
Media
Omjeto media: imagne + texto.
Ratio
Contenedor para mantener la proporción del contenido.
...

/objects/

inuitcss

Components

Button
Componente botón 🤗
...

/components/

inuitcss

Utilities (Trumps)

Clearfix
Widths
Headings
Spacings
Responsive-Spacings
Print
Hide
...

/utilities/

inuitcss

ITCSS + BEM

BEM

.block__element--modifier

/bem/


    .form { }                    /* Block */
    .form--theme-xmas { }        /* Modifier */
    .form--simple { }            /* Modifier */
    .form__input { }             /* Element */
    .form__submit { }            /* Element */
    .form__submit--disabled { }  /* Modifier */

ITCSS + BEM

BEMIT

BEMIT namespaces

/bemit/

c- para Componente
o- para Objetos
u- para Utilidades
is- / has- para Estados


    <div class="o-media  c-user  c-user--premium">
      <img src="" alt="" class="o-media__img  c-user__photo  c-avatar" />
      <p class="o-media__body  c-user__bio">...</p>
    </div>

BEMIT namespaces


    $s-config__path--img:                 "../img" !default;
    $s-config__path--fonts:               "../fonts" !default;

    $s-config__breakpoint--separator:     \@ !default;

    @function s-core-breakpoint-suffix($_bp-name) {
      @return unquote("#{$s-config__breakpoint--separator}#{$_bp-name}");
    }

    $f-color__brand-primary:              #f25f5c !default;
    $f-color__brand-secondary:            #69b7a4 !default;
    $f-color__brand-accent:               #ffe066 !default;

    @mixin t-mq(
      $from:          false,
      $until:         false,
      $and:           false,
      $media-type:    $t-sass-mq__media-type,
      $breakpoints:   $t-sass-mq__breakpoints
    ) {
        ...
    }

También en las variable, mixins y funciones

BEMIT suffixes

/bemit/

@<breakpoint> para la definición de los brackpoints


    <div class="o-media@md  c-user  c-user--premium">
      <img src="" alt="" class="o-media__img@md  c-user__photo  c-avatar" />
      <p class="o-media__body@md  c-user__bio">...</p>
    </div>

@print para el medio print


    @media print {

      .u-hidden\@print {
        display: none;
      }

    }

ITCSS utilities

Principio de responsabilidad única

Principio de inmutabilidad

Una regla por utilidad


    .u-color-primary {
      color: $s-color-primary;
    }

Valor immutable


    .u-color-primary {
      color: $s-color-primary !important;
    }

Alineación


    .u-align-left {
      text-align: left !important;
    }

    .u-align-center {
      text-align: center !important;
    }

    .u-align-right {
      text-align: right !important;
    }

ejemplo de @danifornells

Colores


    $s-colors-brand: (
      first:   #ec1b2d,
      second:  #f9eb2d,
      third:   #20a0de,
    ) !default;

    @each $name, $color in $s-colors-brand {
      .u-color-#{$name} {
        color: $color !important;
      }
    }

ejemplo de @danifornells


    .u-color-first {
      color: #ec1b2d !important;
    }

    .u-color-second {
      color: #f9eb2d !important;
    }

    .u-color-third {
      color: #20a0de !important;
    }

Anchuras


    // Utilidad de anchuras, en fracciones: .u-1/3

    $u-widths-fractions:  1 2 3 4 5 !default;

    @each $denominator in $u-widths-fractions {
      @for $numerator from 1 through $denominator {
        .u-#{$numerator}\/#{$denominator} {
          width: ($numerator / $denominator) * 100% !important;
        }
      }
    }

ejemplo de @danifornells


  .u-1\/1 {
    width: 100% !important;
  }

  .u-1\/2 {
    width: 50% !important;
  }

  .u-2\/2 {
    width: 100% !important;
  }

  .u-1\/3 {
    width: 33.33333% !important;
  }

  .u-2\/3 {
    width: 66.66667% !important;
  }

  .u-3\/3 {
    width: 100% !important;
  }

  .u-1\/4 {
    width: 25% !important;
  }

  .u-2\/4 {
    width: 50% !important;
  }

  .u-3\/4 {
    width: 75% !important;
  }

  .u-4\/4 {
    width: 100% !important;
  }

  .u-1\/5 {
    width: 20% !important;
  }

  .u-2\/5 {
    width: 40% !important;
  }

  .u-3\/5 {
    width: 60% !important;
  }

  .u-4\/5 {
    width: 80% !important;
  }

  .u-5\/5 {
    width: 100% !important;
  }


    <form>
        <input class="u-1/2" type="text">
    </form>

Anchuras Responsive


    // Utilidad de anchuras, en fracciones: .u-1/3@md

    $u-widths-fractions:  1 2 3 4 5 !default;

    @each $bp-name, $bp-value in $s-breakpoints {
      @include t-mq($from: $bp-name) {
        @each $denominator in $u-widths-fractions {
          @for $numerator from 1 through $denominator {
            .u-#{$numerator}\/#{$denominator}\@#{$breakpoint} {
              width: ($numerator / $denominator) * 100% !important;
            }
          }
        }
      }
    }

ejemplo de @danifornells

.u-1\/1 {
  width: 100% !important; }

.u-1\/2 {
  width: 50% !important; }

.u-1\/3 {
  width: 33.33333% !important; }

.u-2\/3 {
  width: 66.66667% !important; }

.u-1\/4 {
  width: 25% !important; }

.u-2\/4 {
  width: 50% !important; }

.u-3\/4 {
  width: 75% !important; }

.u-1\/5 {
  width: 20% !important; }

.u-2\/5 {
  width: 40% !important; }

.u-3\/5 {
  width: 60% !important; }

.u-4\/5 {
  width: 80% !important; }

@media (min-width: 480px) {
  .u-1\/1\@xs {
    width: 100% !important; }

  .u-1\/2\@xs {
    width: 50% !important; }

  .u-1\/3\@xs {
    width: 33.33333% !important; }

  .u-2\/3\@xs {
    width: 66.66667% !important; }

  .u-1\/4\@xs {
    width: 25% !important; }

  .u-2\/4\@xs {
    width: 50% !important; }

  .u-3\/4\@xs {
    width: 75% !important; }

  .u-1\/5\@xs {
    width: 20% !important; }

  .u-2\/5\@xs {
    width: 40% !important; }

  .u-3\/5\@xs {
    width: 60% !important; }

  .u-4\/5\@xs {
    width: 80% !important; } }
@media (min-width: 600px) {
  .u-1\/1\@sm {
    width: 100% !important; }

  .u-1\/2\@sm {
    width: 50% !important; }

  .u-1\/3\@sm {
    width: 33.33333% !important; }

  .u-2\/3\@sm {
    width: 66.66667% !important; }

  .u-1\/4\@sm {
    width: 25% !important; }

  .u-2\/4\@sm {
    width: 50% !important; }

  .u-3\/4\@sm {
    width: 75% !important; }

  .u-1\/5\@sm {
    width: 20% !important; }

  .u-2\/5\@sm {
    width: 40% !important; }

  .u-3\/5\@sm {
    width: 60% !important; }

  .u-4\/5\@sm {
    width: 80% !important; } }
@media (min-width: 840px) {
  .u-1\/1\@sml {
    width: 100% !important; }

  .u-1\/2\@sml {
    width: 50% !important; }

  .u-1\/3\@sml {
    width: 33.33333% !important; }

  .u-2\/3\@sml {
    width: 66.66667% !important; }

  .u-1\/4\@sml {
    width: 25% !important; }

  .u-2\/4\@sml {
    width: 50% !important; }

  .u-3\/4\@sml {
    width: 75% !important; }

  .u-1\/5\@sml {
    width: 20% !important; }

  .u-2\/5\@sml {
    width: 40% !important; }

  .u-3\/5\@sml {
    width: 60% !important; }

  .u-4\/5\@sml {
    width: 80% !important; } }
@media (min-width: 960px) {
  .u-1\/1\@md {
    width: 100% !important; }

  .u-1\/2\@md {
    width: 50% !important; }

  .u-1\/3\@md {
    width: 33.33333% !important; }

  .u-2\/3\@md {
    width: 66.66667% !important; }

  .u-1\/4\@md {
    width: 25% !important; }

  .u-2\/4\@md {
    width: 50% !important; }

  .u-3\/4\@md {
    width: 75% !important; }

  .u-1\/5\@md {
    width: 20% !important; }

  .u-2\/5\@md {
    width: 40% !important; }

  .u-3\/5\@md {
    width: 60% !important; }

  .u-4\/5\@md {
    width: 80% !important; } }
@media (min-width: 1280px) {
  .u-1\/1\@lg {
    width: 100% !important; }

  .u-1\/2\@lg {
    width: 50% !important; }

  .u-1\/3\@lg {
    width: 33.33333% !important; }

  .u-2\/3\@lg {
    width: 66.66667% !important; }

  .u-1\/4\@lg {
    width: 25% !important; }

  .u-2\/4\@lg {
    width: 50% !important; }

  .u-3\/4\@lg {
    width: 75% !important; }

  .u-1\/5\@lg {
    width: 20% !important; }

  .u-2\/5\@lg {
    width: 40% !important; }

  .u-3\/5\@lg {
    width: 60% !important; }

  .u-4\/5\@lg {
    width: 80% !important; } }
@media (min-width: 1440px) {
  .u-1\/1\@xl {
    width: 100% !important; }

  .u-1\/2\@xl {
    width: 50% !important; }

  .u-1\/3\@xl {
    width: 33.33333% !important; }

  .u-2\/3\@xl {
    width: 66.66667% !important; }

  .u-1\/4\@xl {
    width: 25% !important; }

  .u-2\/4\@xl {
    width: 50% !important; }

  .u-3\/4\@xl {
    width: 75% !important; }

  .u-1\/5\@xl {
    width: 20% !important; }

  .u-2\/5\@xl {
    width: 40% !important; }

  .u-3\/5\@xl {
    width: 60% !important; }

  .u-4\/5\@xl {
    width: 80% !important; } }
@media (min-width: 1600px) {
  .u-1\/1\@xxl {
    width: 100% !important; }

  .u-1\/2\@xxl {
    width: 50% !important; }

  .u-1\/3\@xxl {
    width: 33.33333% !important; }

  .u-2\/3\@xxl {
    width: 66.66667% !important; }

  .u-1\/4\@xxl {
    width: 25% !important; }

  .u-2\/4\@xxl {
    width: 50% !important; }

  .u-3\/4\@xxl {
    width: 75% !important; }

  .u-1\/5\@xxl {
    width: 20% !important; }

  .u-2\/5\@xxl {
    width: 40% !important; }

  .u-3\/5\@xxl {
    width: 60% !important; }

  .u-4\/5\@xxl {
    width: 80% !important; } }
@media (min-width: 1920px) {
  .u-1\/1\@xxxl {
    width: 100% !important; }

  .u-1\/2\@xxxl {
    width: 50% !important; }

  .u-1\/3\@xxxl {
    width: 33.33333% !important; }

  .u-2\/3\@xxxl {
    width: 66.66667% !important; }

  .u-1\/4\@xxxl {
    width: 25% !important; }

  .u-2\/4\@xxxl {
    width: 50% !important; }

  .u-3\/4\@xxxl {
    width: 75% !important; }

  .u-1\/5\@xxxl {
    width: 20% !important; }

  .u-2\/5\@xxxl {
    width: 40% !important; }

  .u-3\/5\@xxxl {
    width: 60% !important; }

  .u-4\/5\@xxxl {
    width: 80% !important; } }

Utilities...

.u-align-left{text-align:left!important}.u-align-center{text-align:center!important}.u-align-right{text-align:right!important}@media(min-width:480px){.u-align-left\@xs{text-align:left!important}.u-align-center\@xs{text-align:center!important}.u-align-right\@xs{text-align:right!important}}@media(min-width:600px){.u-align-left\@sm{text-align:left!important}.u-align-center\@sm{text-align:center!important}.u-align-right\@sm{text-align:right!important}}@media(min-width:840px){.u-align-left\@sml{text-align:left!important}.u-align-center\@sml{text-align:center!important}.u-align-right\@sml{text-align:right!important}}@media(min-width:960px){.u-align-left\@md{text-align:left!important}.u-align-center\@md{text-align:center!important}.u-align-right\@md{text-align:right!important}}@media(min-width:1280px){.u-align-left\@lg{text-align:left!important}.u-align-center\@lg{text-align:center!important}.u-align-right\@lg{text-align:right!important}}@media(min-width:1440px){.u-align-left\@xl{text-align:left!important}.u-align-center\@xl{text-align:center!important}.u-align-right\@xl{text-align:right!important}}@media(min-width:1600px){.u-align-left\@xxl{text-align:left!important}.u-align-center\@xxl{text-align:center!important}.u-align-right\@xxl{text-align:right!important}}@media(min-width:1920px){.u-align-left\@xxxl{text-align:left!important}.u-align-center\@xxxl{text-align:center!important}.u-align-right\@xxxl{text-align:right!important}}.u-bg-color__brand-primary{background-color:#f25f5c!important}.u-bg-color__brand-secondary{background-color:#69b7a4!important}.u-bg-color__brand-accent{background-color:#ffe066!important}.u-bg-color__brand-primary--ultra-light{background-color:#fef4f4!important}.u-bg-color__brand-primary--light{background-color:#f68d8b!important}.u-bg-color__brand-primary--semi-light{background-color:#f47674!important}.u-bg-color__brand-primary--semi-dark{background-color:#f04844!important}.u-bg-color__brand-primary--dark{background-color:#ec1915!important}.u-bg-color__brand-secondary--ultra-light{background-color:#f5faf9!important}.u-bg-color__brand-secondary--light{background-color:#8bc8b9!important}.u-bg-color__brand-secondary--semi-light{background-color:#7abfae!important}.u-bg-color__brand-secondary--semi-dark{background-color:#58af9a!important}.u-bg-color__brand-secondary--dark{background-color:#458f7d!important}.u-bg-color__brand-accent--ultra-light{background-color:#fffdf4!important}.u-bg-color__brand-accent--light{background-color:#ffea99!important}.u-bg-color__brand-accent--semi-light{background-color:#ffe580!important}.u-bg-color__brand-accent--semi-dark{background-color:#ffdb4d!important}.u-bg-color__brand-accent--dark{background-color:#ffd11a!important}.u-bg-color__neutral-white{background-color:#fff!important}.u-bg-color__neutral-black{background-color:#000!important}.u-bg-color__neutral-grey--ultra-light{background-color:#f2f2f2!important}.u-bg-color__neutral-grey--light{background-color:#e6e6e6!important}.u-bg-color__neutral-grey--semi-light{background-color:#ccc!important}.u-bg-color__neutral-grey{background-color:#b3b3b3!important}.u-bg-color__neutral-grey--semi-dark{background-color:#4d4d4d!important}.u-bg-color__neutral-grey--dark{background-color:#333!important}.u-bg-color__neutral-grey--ultra-dark{background-color:#1a1a1a!important}.u-bg-color__neutral-white--transparent{background-color:hsla(0,0%,100%,0)!important}.u-bg-color__neutral-black--transparent{background-color:transparent!important}.u-bg-color__state-success{background-color:#36ba33!important}.u-bg-color__state-info{background-color:#20a0de!important}.u-bg-color__state-warning{background-color:#f99500!important}.u-bg-color__state-danger{background-color:#c1101f!important}.u-bg-color__state-success--ultra-light{background-color:#f1faf1!important}.u-bg-color__state-success--light{background-color:#54cf51!important}.u-bg-color__state-success--semi-light{background-color:#40ca3d!important}.u-bg-color__state-success--semi-dark{background-color:#30a62e!important}.u-bg-color__state-success--dark{background-color:#257e23!important}.u-bg-color__state-info--ultra-light{background-color:#eff8fd!important}.u-bg-color__state-info--light{background-color:#4cb3e5!important}.u-bg-color__state-info--semi-light{background-color:#36aae2!important}.u-bg-color__state-info--semi-dark{background-color:#1d90c8!important}.u-bg-color__state-info--dark{background-color:#16709b!important}.u-bg-color__state-warning--ultra-light{background-color:#fff8ed!important}.u-bg-color__state-warning--light{background-color:#ffab2d!important}.u-bg-color__state-warning--semi-light{background-color:#ffa014!important}.u-bg-color__state-warning--semi-dark{background-color:#e08600!important}.u-bg-color__state-warning--dark{background-color:#ad6700!important}.u-bg-color__state-danger--ultra-light{background-color:#fbeeef!important}.u-bg-color__state-danger--light{background-color:#ec182a!important}.u-bg-color__state-danger--semi-light{background-color:#d91223!important}.u-bg-color__state-danger--semi-dark{background-color:#a90e1b!important}.u-bg-color__state-danger--dark{background-color:#7a0a14!important}.u-bg-color__vendor-facebook{background-color:#3b5998!important}.u-bg-color__vendor-twitter{background-color:#00aced!important}.u-bg-color__vendor-facebook--ultra-light{background-color:#f7f7f7!important}.u-bg-color__vendor-facebook--light{background-color:#dfe3ee!important}.u-bg-color__vendor-facebook--semi-light{background-color:#8b9dc3!important}.u-bg-color__vendor-twitter--ultra-light{background-color:#fff!important}.u-bg-color__vendor-twitter--light{background-color:#c0deed!important}.u-bg-color__vendor-twitter--semi-light{background-color:#1dcaff!important}.u-bg-color__vendor-twitter--dark{background-color:#0084b4!important}.u-bg-color__other-digital-blue{background-color:#0070d2!important}.u-color__brand-primary{color:#f25f5c!important}.u-color__brand-secondary{color:#69b7a4!important}.u-color__brand-accent{color:#ffe066!important}.u-color__brand-primary--ultra-light{color:#fef4f4!important}.u-color__brand-primary--light{color:#f68d8b!important}.u-color__brand-primary--semi-light{color:#f47674!important}.u-color__brand-primary--semi-dark{color:#f04844!important}.u-color__brand-primary--dark{color:#ec1915!important}.u-color__brand-secondary--ultra-light{color:#f5faf9!important}.u-color__brand-secondary--light{color:#8bc8b9!important}.u-color__brand-secondary--semi-light{color:#7abfae!important}.u-color__brand-secondary--semi-dark{color:#58af9a!important}.u-color__brand-secondary--dark{color:#458f7d!important}.u-color__brand-accent--ultra-light{color:#fffdf4!important}.u-color__brand-accent--light{color:#ffea99!important}.u-color__brand-accent--semi-light{color:#ffe580!important}.u-color__brand-accent--semi-dark{color:#ffdb4d!important}.u-color__brand-accent--dark{color:#ffd11a!important}.u-color__neutral-white{color:#fff!important}.u-color__neutral-black{color:#000!important}.u-color__neutral-grey--ultra-light{color:#f2f2f2!important}.u-color__neutral-grey--light{color:#e6e6e6!important}.u-color__neutral-grey--semi-light{color:#ccc!important}.u-color__neutral-grey{color:#b3b3b3!important}.u-color__neutral-grey--semi-dark{color:#4d4d4d!important}.u-color__neutral-grey--dark{color:#333!important}.u-color__neutral-grey--ultra-dark{color:#1a1a1a!important}.u-color__neutral-white--transparent{color:hsla(0,0%,100%,0)!important}.u-color__neutral-black--transparent{color:transparent!important}.u-color__state-success{color:#36ba33!important}.u-color__state-info{color:#20a0de!important}.u-color__state-warning{color:#f99500!important}.u-color__state-danger{color:#c1101f!important}.u-color__state-success--ultra-light{color:#f1faf1!important}.u-color__state-success--light{color:#54cf51!important}.u-color__state-success--semi-light{color:#40ca3d!important}.u-color__state-success--semi-dark{color:#30a62e!important}.u-color__state-success--dark{color:#257e23!important}.u-color__state-info--ultra-light{color:#eff8fd!important}.u-color__state-info--light{color:#4cb3e5!important}.u-color__state-info--semi-light{color:#36aae2!important}.u-color__state-info--semi-dark{color:#1d90c8!important}.u-color__state-info--dark{color:#16709b!important}.u-color__state-warning--ultra-light{color:#fff8ed!important}.u-color__state-warning--light{color:#ffab2d!important}.u-color__state-warning--semi-light{color:#ffa014!important}.u-color__state-warning--semi-dark{color:#e08600!important}.u-color__state-warning--dark{color:#ad6700!important}.u-color__state-danger--ultra-light{color:#fbeeef!important}.u-color__state-danger--light{color:#ec182a!important}.u-color__state-danger--semi-light{color:#d91223!important}.u-color__state-danger--semi-dark{color:#a90e1b!important}.u-color__state-danger--dark{color:#7a0a14!important}.u-color__vendor-facebook{color:#3b5998!important}.u-color__vendor-twitter{color:#00aced!important}.u-color__vendor-facebook--ultra-light{color:#f7f7f7!important}.u-color__vendor-facebook--light{color:#dfe3ee!important}.u-color__vendor-facebook--semi-light{color:#8b9dc3!important}.u-color__vendor-twitter--ultra-light{color:#fff!important}.u-color__vendor-twitter--light{color:#c0deed!important}.u-color__vendor-twitter--semi-light{color:#1dcaff!important}.u-color__vendor-twitter--dark{color:#0084b4!important}.u-color__other-digital-blue{color:#0070d2!important}.u-hidden{display:none!important}@media(min-width:480px){.u-hidden-from\@xs{display:none!important}}@media(min-width:600px){.u-hidden-from\@sm{display:none!important}}@media(min-width:840px){.u-hidden-from\@sml{display:none!important}}@media(min-width:960px){.u-hidden-from\@md{display:none!important}}@media(min-width:1280px){.u-hidden-from\@lg{display:none!important}}@media(min-width:1440px){.u-hidden-from\@xl{display:none!important}}@media(min-width:1600px){.u-hidden-from\@xxl{display:none!important}}@media(min-width:1920px){.u-hidden-from\@xxxl{display:none!important}}@media(max-width:479px){.u-hidden-until\@xs{display:none!important}}@media(max-width:599px){.u-hidden-until\@sm{display:none!important}}@media(max-width:839px){.u-hidden-until\@sml{display:none!important}}@media(max-width:959px){.u-hidden-until\@md{display:none!important}}@media(max-width:1279px){.u-hidden-until\@lg{display:none!important}}@media(max-width:1439px){.u-hidden-until\@xl{display:none!important}}@media(max-width:1599px){.u-hidden-until\@xxl{display:none!important}}@media(max-width:1919px){.u-hidden-until\@xxxl{display:none!important}}.u-mt--none{margin-top:0!important}.u-mr--none{margin-right:0!important}.u-mb--none{margin-bottom:0!important}.u-ml--none{margin-left:0!important}.u-mv--none{margin-top:0!important;margin-bottom:0!important}.u-mh--none{margin-left:0!important;margin-right:0!important}.u-mt--tiny{margin-top:.375rem!important}.u-mr--tiny{margin-right:.375rem!important}.u-mb--tiny{margin-bottom:.375rem!important}.u-ml--tiny{margin-left:.375rem!important}.u-mv--tiny{margin-top:.375rem!important;margin-bottom:.375rem!important}.u-mh--tiny{margin-left:.375rem!important;margin-right:.375rem!important}.u-mt--small{margin-top:.75rem!important}.u-mr--small{margin-right:.75rem!important}.u-mb--small{margin-bottom:.75rem!important}.u-ml--small{margin-left:.75rem!important}.u-mv--small{margin-top:.75rem!important;margin-bottom:.75rem!important}.u-mh--small{margin-left:.75rem!important;margin-right:.75rem!important}.u-mt--medium{margin-top:1.5rem!important}.u-mr--medium{margin-right:1.5rem!important}.u-mb--medium{margin-bottom:1.5rem!important}.u-ml--medium{margin-left:1.5rem!important}.u-mv--medium{margin-top:1.5rem!important;margin-bottom:1.5rem!important}.u-mh--medium{margin-left:1.5rem!important;margin-right:1.5rem!important}.u-mt--large{margin-top:3rem!important}.u-mr--large{margin-right:3rem!important}.u-mb--large{margin-bottom:3rem!important}.u-ml--large{margin-left:3rem!important}.u-mv--large{margin-top:3rem!important;margin-bottom:3rem!important}.u-mh--large{margin-left:3rem!important;margin-right:3rem!important}.u-mt--huge{margin-top:6rem!important}.u-mr--huge{margin-right:6rem!important}.u-mb--huge{margin-bottom:6rem!important}.u-ml--huge{margin-left:6rem!important}.u-mv--huge{margin-top:6rem!important;margin-bottom:6rem!important}.u-mh--huge{margin-left:6rem!important;margin-right:6rem!important}.u-pt--none{padding-top:0!important}.u-pr--none{padding-right:0!important}.u-pb--none{padding-bottom:0!important}.u-pl--none{padding-left:0!important}.u-pv--none{padding-top:0!important;padding-bottom:0!important}.u-ph--none{padding-left:0!important;padding-right:0!important}.u-pt--tiny{padding-top:.375rem!important}.u-pr--tiny{padding-right:.375rem!important}.u-pb--tiny{padding-bottom:.375rem!important}.u-pl--tiny{padding-left:.375rem!important}.u-pv--tiny{padding-top:.375rem!important;padding-bottom:.375rem!important}.u-ph--tiny{padding-left:.375rem!important;padding-right:.375rem!important}.u-pt--small{padding-top:.75rem!important}.u-pr--small{padding-right:.75rem!important}.u-pb--small{padding-bottom:.75rem!important}.u-pl--small{padding-left:.75rem!important}.u-pv--small{padding-top:.75rem!important;padding-bottom:.75rem!important}.u-ph--small{padding-left:.75rem!important;padding-right:.75rem!important}.u-pt--medium{padding-top:1.5rem!important}.u-pr--medium{padding-right:1.5rem!important}.u-pb--medium{padding-bottom:1.5rem!important}.u-pl--medium{padding-left:1.5rem!important}.u-pv--medium{padding-top:1.5rem!important;padding-bottom:1.5rem!important}.u-ph--medium{padding-left:1.5rem!important;padding-right:1.5rem!important}.u-pt--large{padding-top:3rem!important}.u-pr--large{padding-right:3rem!important}.u-pb--large{padding-bottom:3rem!important}.u-pl--large{padding-left:3rem!important}.u-pv--large{padding-top:3rem!important;padding-bottom:3rem!important}.u-ph--large{padding-left:3rem!important;padding-right:3rem!important}.u-pt--huge{padding-top:6rem!important}.u-pr--huge{padding-right:6rem!important}.u-pb--huge{padding-bottom:6rem!important}.u-pl--huge{padding-left:6rem!important}.u-pv--huge{padding-top:6rem!important;padding-bottom:6rem!important}.u-ph--huge{padding-left:6rem!important;padding-right:6rem!important}.u-1\/1{width:100%!important}.u-1\/2{width:50%!important}.u-1\/3{width:33.33333%!important}.u-2\/3{width:66.66667%!important}.u-1\/4{width:25%!important}.u-2\/4{width:50%!important}.u-3\/4{width:75%!important}.u-1\/5{width:20%!important}.u-2\/5{width:40%!important}.u-3\/5{width:60%!important}.u-4\/5{width:80%!important}@media(min-width:480px){.u-1\/1\@xs{width:100%!important}.u-1\/2\@xs{width:50%!important}.u-1\/3\@xs{width:33.33333%!important}.u-2\/3\@xs{width:66.66667%!important}.u-1\/4\@xs{width:25%!important}.u-2\/4\@xs{width:50%!important}.u-3\/4\@xs{width:75%!important}.u-1\/5\@xs{width:20%!important}.u-2\/5\@xs{width:40%!important}.u-3\/5\@xs{width:60%!important}.u-4\/5\@xs{width:80%!important}}@media(min-width:600px){.u-1\/1\@sm{width:100%!important}.u-1\/2\@sm{width:50%!important}.u-1\/3\@sm{width:33.33333%!important}.u-2\/3\@sm{width:66.66667%!important}.u-1\/4\@sm{width:25%!important}.u-2\/4\@sm{width:50%!important}.u-3\/4\@sm{width:75%!important}.u-1\/5\@sm{width:20%!important}.u-2\/5\@sm{width:40%!important}.u-3\/5\@sm{width:60%!important}.u-4\/5\@sm{width:80%!important}}@media(min-width:840px){.u-1\/1\@sml{width:100%!important}.u-1\/2\@sml{width:50%!important}.u-1\/3\@sml{width:33.33333%!important}.u-2\/3\@sml{width:66.66667%!important}.u-1\/4\@sml{width:25%!important}.u-2\/4\@sml{width:50%!important}.u-3\/4\@sml{width:75%!important}.u-1\/5\@sml{width:20%!important}.u-2\/5\@sml{width:40%!important}.u-3\/5\@sml{width:60%!important}.u-4\/5\@sml{width:80%!important}}@media(min-width:960px){.u-1\/1\@md{width:100%!important}.u-1\/2\@md{width:50%!important}.u-1\/3\@md{width:33.33333%!important}.u-2\/3\@md{width:66.66667%!important}.u-1\/4\@md{width:25%!important}.u-2\/4\@md{width:50%!important}.u-3\/4\@md{width:75%!important}.u-1\/5\@md{width:20%!important}.u-2\/5\@md{width:40%!important}.u-3\/5\@md{width:60%!important}.u-4\/5\@md{width:80%!important}}@media(min-width:1280px){.u-1\/1\@lg{width:100%!important}.u-1\/2\@lg{width:50%!important}.u-1\/3\@lg{width:33.33333%!important}.u-2\/3\@lg{width:66.66667%!important}.u-1\/4\@lg{width:25%!important}.u-2\/4\@lg{width:50%!important}.u-3\/4\@lg{width:75%!important}.u-1\/5\@lg{width:20%!important}.u-2\/5\@lg{width:40%!important}.u-3\/5\@lg{width:60%!important}.u-4\/5\@lg{width:80%!important}}@media(min-width:1440px){.u-1\/1\@xl{width:100%!important}.u-1\/2\@xl{width:50%!important}.u-1\/3\@xl{width:33.33333%!important}.u-2\/3\@xl{width:66.66667%!important}.u-1\/4\@xl{width:25%!important}.u-2\/4\@xl{width:50%!important}.u-3\/4\@xl{width:75%!important}.u-1\/5\@xl{width:20%!important}.u-2\/5\@xl{width:40%!important}.u-3\/5\@xl{width:60%!important}.u-4\/5\@xl{width:80%!important}}@media(min-width:1600px){.u-1\/1\@xxl{width:100%!important}.u-1\/2\@xxl{width:50%!important}.u-1\/3\@xxl{width:33.33333%!important}.u-2\/3\@xxl{width:66.66667%!important}.u-1\/4\@xxl{width:25%!important}.u-2\/4\@xxl{width:50%!important}.u-3\/4\@xxl{width:75%!important}.u-1\/5\@xxl{width:20%!important}.u-2\/5\@xxl{width:40%!important}.u-3\/5\@xxl{width:60%!important}.u-4\/5\@xxl{width:80%!important}}@media(min-width:1920px){.u-1\/1\@xxxl{width:100%!important}.u-1\/2\@xxxl{width:50%!important}.u-1\/3\@xxxl{width:33.33333%!important}.u-2\/3\@xxxl{width:66.66667%!important}.u-1\/4\@xxxl{width:25%!important}.u-2\/4\@xxxl{width:50%!important}.u-3\/4\@xxxl{width:75%!important}.u-1\/5\@xxxl{width:20%!important}.u-2\/5\@xxxl{width:40%!important}.u-3\/5\@xxxl{width:60%!important}.u-4\/5\@xxxl{width:80%!important}}

ITCSS objects

Patrones de diseño reusables

Propiedades de los objetos

display, positioning & float
margin & padding
alignment & direction
width & ratio
clearfix

Object box


  .o-box {
    @include inuit-clearfix();
    display: block; /* [1] */
    padding: $inuit-global-spacing-unit;

    > :last-child {
      margin-bottom: 0;
    }

  }

/@danifornells/o-box/

Object media


.o-media {
  @include inuit-clearfix();
  display: block;
}


  .o-media__img {
    float: left;
    margin-right: $inuit-global-spacing-unit;

    > img {
      display: block;
    }

  }


  .o-media__body {
    overflow: hidden;
    display: block;

    &,
    > :last-child {
      margin-bottom: 0;
    }

  }

/@danifornells/o-media/

Object pack


.o-pack {
  width: 100%;
  margin-left: 0;
  display: table;
  table-layout: fixed;
  border-spacing: map-get($s-spaces, "medium");
}

.o-pack__item {
  display: table-cell;
  vertical-align: top;
}

/@danifornells/o-pack/

Object layout


.o-layout {
  display: block;
  margin: 0;
  padding: 0;
  margin-left: -(map-get($s-spaces, "medium"));
}

.o-layout__item {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: top;
  width: 100%;
  padding-left: map-get($s-spaces, "medium");
}

/@danifornells/o-layout/

ITCSS components

Principios de los componentes

Aislamiento
Reusabilidad
Flexibilidad
Agnósticos de su contenido

Propiedades de los componentes

Colores y bordes
Tipografía y tamaño de fuente
Propiedades del modelo de caja de los elementos hijos

Variaciones de los componentes

La variación es aquella mutación que no va a cambiar durante la vida de la página. Usa modificadores.

  $avatar-size:       $global-spacing-unit * 3;
  $avatar-size-large: $avatar-size * 2;
  $avatar-size-small: $avatar-size / 2;

  .c-avatar {
    display: block;
    width:  $avatar-size;
    height: $avatar-size;
    border-radius: 100%;
  }

  .c-avatar--small {
    width:  $avatar-size-small;
    height: $avatar-size-small;
  }

  .c-avatar--large {
    width:  $avatar-size-large;
    height: $avatar-size-large;
  }

Estados de los componentes

Es estado es aquel comportamiento susceptible de ser cambiado durante la vida de la página. Usa clases de estado.



    .c-nav-primary__link {
      display: inline-block;
      padding-right: $global-spacing-unit;
      padding-left:  $global-spacing-unit;
      @include font-weight(normal);

      &.is-active {
        text-decoration: underline;
        cursor: default;
      }

    }

Distribución de los componentes

Usa los objetos para envolver un componente y distribuirlo en una página

    <ul class="o-list-inline">
      <li class="o-list-inline__item">
        <a href="#0" class="c-nav-primary__link">Home</a>
      <li class="o-list-inline__item">
        <a href="#0" class="c-nav-primary__link">Feed</a>
      <li class="o-list-inline__item">
        <a href="#0" class="c-nav-primary__link">My Discovries</a>
      <li class="o-list-inline__item">
        <a href="#0" class="c-nav-primary__link  is-active">Top Discovries</a>
      <li class="o-list-inline__item">
        <a href="#0" class="c-nav-primary__link">Sign Out</a>
    </ul>

<main class="o-pack">

  <form class="o-pack__item c-site-search">
    <input class="c-site-search__field" type="text">
    <button class="c-site-search__btn">Submit</button>
  </form>

  <article class="o-pack__item c-post">
    <!-- ... -->
  </article>

</main>

Distribución de los componentes

Los elementos del componente, preferiblemente deben de ser distribuidos en los estilos del componente.


.c-nav-secondary {
  text-align: center;
}

  .c-nav-secondary__item {
    padding-right: $global-spacing-unit-small;
    padding-left:  $global-spacing-unit-small;
  }

    .c-nav-secondary__link {
      @include font-weight(normal);
    }

Distribución de los componentes

Si el componente es un elemento de otro componente padre puedes usar tal comportamiento para su distribución en ese contexto

<article class="c-post">

  <h1 class="c-post__title"></h1>
  <!-- ... -->

  <form class="c-post__search c-site-search">
    <input class="site-search__field" type="text">
    <button class="site-search__btn">Submit</button>
  </form>

</article>


    .c-post {}
    .c-post__title {}

    .c-post__search {
      float: right;
      max-width: 40%;
    }

ITCSS añadiendo capas

Una arquitectura flexible

Capa animación

Animaciones y transiciones reusables


    .a-lift-reveal {
      opacity: 0;
      transition: transform $s-timing--fast ease-out, opacity $s-timing--fast linear;
      transform: translate(0, -25%);

      &.in {
        opacity: 1;
        transform: translate(0, 0);
      }
    }

Capa scope

Un scope para controlarlos a todos


  .s-wysinwyg {
    h1, h2, h3, h4, h5, h6 {
      font-size: $s-core-font-size;
    }
    ul, ol {
      margin-left: $s-space;
    }
    br + br {
      display: none;
    }
    [style]:after {
      content: " ¡¡ Como me cambies el color te meto dos yoyas !!";
      color: red;
    }
  }

Capa shame

Pracmátismo desde el Craftsmanship


  // c-site-search__field
  // Bug PV-563 on IE <= 10

  ._c-site-search__field {
    margin-left: -2px;
    margin-right: -2px;
  }

Mejorando ITCSS

Con 🍍HaitiCSS

🍍HaitiCSS

Made with tons of front-end ❤ for you from Girona

/haiticss.io/

Just another baseline perspective to wear any project with the ITCSS architecture

Daniel Fornells

Arnau Pujol

Judit Abellí

David Asensio

🍍HaitiCSS

HaitiCSS Foundations

Lenguaje visual para ser heredado

Breakpoints
Espaciado
Colores
Fuentes
...

HaitiCSS Material

Demasiado simple para ser un componente

Títulos y cuerpo de letra
Iconos y sprites
Imágenes, video, frames
...

HaitiCSS Animations

Abstracción de movimientos y transiciones reusables

Translaciones
Lift reveal (modal)
...

HaitiCSS Color Schemes

Patrones de colores heredables

Modificadores de botones
Estados y validación
Resaltado (oferta, nuevo, ...)
...

"Talk is cheap. Show me the code"

Linus Torvals

/HaitiCSS/

ITCSS + JavaScript

Arquitectura CSS en un mundo dominado por frameworks*

* Frameworks y librerías

· ITCSS +

@nucliweb

joan.leon@gmail.com

Developer Advocate & Training Manager @SchibstedSpain

#HTML5 #CSS3 #SASS #Javascript #Node.js #Animation #PostCSS #AtomEditor #Games

github.com/nucliweb

Joan León

Gracias

Gracias a Harry Roberts , autor de ITCSS y a Daniel Fornell , quien me ha inspirado a usar esta arquitectura y cedido material de su workshop HaitiCSS.

Arquitectura CSS con ITCSS

By Joan León

Arquitectura CSS con ITCSS

5,047

Joan León PRO

⚡️ Web Performance Consultant | Speaker | Staff Frontend Engineer at @AdevintaSpain | @GoogleDevExpert in #WebPerf | @cloudinary Ambassador

ITCSS

by Harry Roberts

@csswizardry

ITCSS

Inverted Triangle architecture for CSS

¿Qué no es ITCSS?

¿Qué es ITCSS?

Settings

Tools

Generic

Elements

Objects

Components

Utilities (Trumps)

ITCSS + BEM

BEM

ITCSS + BEM

BEMIT

BEMIT namespaces

BEMIT namespaces

También en las variable, mixins y funciones

BEMIT suffixes

ITCSS utilities

Principio de responsabilidad única

Principio de inmutabilidad

Una regla por utilidad

Valor immutable

Alineación

Colores

Anchuras

Anchuras Responsive

Utilities...

ITCSS objects

Patrones de diseño reusables

Propiedades de los objetos

Object box

Object media

Object pack

Object layout

ITCSS components

Principios de los componentes

Propiedades de los componentes

Variaciones de los componentes

Estados de los componentes

Distribución de los componentes

Distribución de los componentes

Distribución de los componentes

ITCSS añadiendo capas

Una arquitectura flexible

Capa animación

Capa scope

Capa shame

Mejorando ITCSS

Con 🍍HaitiCSS

🍍HaitiCSS

🍍HaitiCSS

HaitiCSS Foundations

HaitiCSS Material

HaitiCSS Animations

HaitiCSS Color Schemes

"Talk is cheap. Show me the code"

/HaitiCSS/

ITCSS + JavaScript

Arquitectura CSS en un mundo dominado por frameworks*

· ITCSS +

· ITCSS +

· ITCSS +

· ITCSS +

· ITCSS +

Gracias

Arquitectura CSS con ITCSS

More from Joan León