@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.