▽ Dressing ITCSS - Daniel Fornells Talk

ITCSS.md

▽ Dressing ITCSS

Source

• Video Daniel Fornerlls - Dressing ITCSS
• Slides https://danifornells.github.io/dressing-itcss/#/

Layers

01. Settings

• Configuración del núcleo
  • Root font size
  • Espaciado
• Variables
  • Tipos
  • Colores
  • Breakpoints

02. Tools

• Funciones globales
  • Conversión unidades
• Mixins globales
  • Media Queries
  • Ratios
  • Clearfix

03. Generic

• Normalización navegadores
• Modelo de caja
• Inicialización de comportamiento
• Espaciado y ritmo vertical

04. Elements

• Apariencia de los elementos HTML

05. Objects

• Patrones repetibles de diseño
• Propiedades asociadas a la distribución
• Heredables por los componentes

06. Components

• Componentes visuales reusables
• Semántica asociada a su apariencia, no a su función ni contenido
• Con o sin jerarquía entre ellos

99. Utilities

• Diseñadas para las excepciones
• Una sola propiedad, !important

BEMIT

Namespaces

Settings $s-

$s-color-primary: #247ba0 !default;

Components .c-

.c-site-search {}

Important: "tokenize" variables at component level:

$c-site-search__btn-color:  $s-color-primary !default;

Suffixes

.u-visible\@md {} // Toggle visibility
.u-visible\@lg {}
.u-visible\@xl {}

INUITCSS

INUITCSS on GitHub

Utilities

One rule per utility.

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

Example: colors.

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

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

Example: widths.

// 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;
} } }

Example: responsive widths.

// 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;
} } } } }

Remove the unused utilities to avoid big size CSS with commutation variables.

$u-color__colors-brand--enabled: true !default;

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

Reduce the maps

$u-color__colors-brand: map_remove($s-colors-brand, third) !default;

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

Objects

Properties

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

Example: box (demo).

.o-box {
  @include t-clearfix();
  display: block;
  padding: map-get($s-spaces, "medium");

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

Example: media (demo).

.o-media {
  @include t-clearfix;
  display: block;
}
.o-media__img {
  float: left;
  margin-right: map-get($s-spaces, "medium");
  > img { display: block; }
}
.o-media__body {
  overflow: hidden;
  display: block;
  &, > :last-child { margin-bottom: 0; }
}

Example: pack (demo).

.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;
}

Example: layout (demo).

.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");
}

Use only what you need. Commute and reduce.

$o-layout-enabled:            true !default;
$o-layout__spaces:            map_remove($s-spaces, "large", "huge") !default;
$o-layout__spaces--default:   "medium" !default;
$o-layout__spaces--enable:    true !default;

@if ($o-layout-enabled and $o-layout__spaces--enable) {
  @each $space-name, $space-value in $o-layout__spaces {
    @if ($space-name != $o-layout__spaces--default) {
      .o-layout--space-#{$space-name} {
        margin-left: -$space-value;
        > .o-layout__item {
          padding-left: $space-value;
} } } } }

Components

• Isolation
• Reusability
• Flexibility
• Agnostics of its content

Properties

• colors & borders
• typography
• forms
• box model properties on child elements

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

// Xmas modifier

.c-site-search--xmas {

  &.c-site-search {
    background-color: $s-color__xmas--bg;
  }

  &.c-site-search__btn {
    background-color: $s-color__xmas--complementary;
    color: $s-color__xmas--accent;
  }
}

Component states: El estado es aquél comportamiento susceptibe de ser cambiado durante la vida de la página. Usa clases de estado.

// Disabled state
.is-disabled {

  &.c-site-search {
    opacity: .5;
  }

  &.c-site-search__field,
  &.c-site-search__btn {
    pointer-events: none;
  }
}

Component distribution: Usa los objetos para envolver tu componente y distribuírlo en una página.

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

Los elementos del componente, preferiblemente deben der distribuídos en los estilos del componente.

.c-site-search {}

.c-site-search__field {
  display: inline-block;
  width: 70%;
}

.c-site-search__btn {
  display: inline-block;
  width: 30%;
}

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%;
}

Hierarchy between components.

Animation layer

Movimientos 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);
  }
}

Scopes layer

La caja negra que te saca de los apuros.

.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;
  }
}

Scope ITCSS

$s-core-font-size:          12px;

@import '01_settings/settings';
@import '02_tools/tools';

.s-itcss {
  @import '03_generic/generic';
  @import '04_elements/elements';
}

@import '05_objects/objects';
@import '06_components/components';
@import '09_utilities/utilities';

Desde el centro al exterior.

<div class="pagAnuMainColumn">
  <div class="pagAnuTituloBox">
    <a href="/seat-de-segunda-mano/seat-124-1430-220687839.htm">SEAT - 124 1430</a>
  </div>
  <!-- ITCSS scoped -->
  <div class="s-itcss">
    <form class="c-site-search">
      <input class="c-site-search__field" type="text">
      <button class="c-site-search__btn">Submit</button>
    </form>
  </div>
  <!-- ITCSS scope ending -->
  <div class="pagAnuPrecioBox">
    <div class="pagAnuPrecioTexto">1.999 <sup>€</sup></div>
  </div>
</div>

Defense layer

// old.css overrides color by 0|0|3|1
// Solution: Specificity needs to increase

.c-site-search__btn {
  html &#{&}#{&} {
    color: $s-color-primary;
  }
}

Shame layer

Technical debt.

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

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

Remedies to specificity.

// #buscador {
[id="buscador"] {}

// ul li
html body li {}

// .cabecera .logo
.logo.logo.logo {}

Debug

// Highlight scoped ITCSS
[class^="s-itcss"],
[class*=" s-itcss"] {
  outline: 10px solid green;
}

// Highlight components
[class^="c-"],
[class*=" c-"] {
  outline: 10px solid cyan;
}

HAITI CSS by Daniel Fornells