according to most neuroscience studies, 82% of the population agrees that their number one fear is public speaking.

number two is death.

Adrià Fontcuberta

@afontcu_

Software Engineer at Calidae

Adrià Fontcuberta

@afontcu_

Frontend Dev at Calidae

Adrià Fontcuberta

@afontcu_

UI Engineer at Calidae

Adrià Fontcuberta

@afontcu_

Webmaster at Calidae

Chapter 1

"wat CSS"

body.product .content-body-wrapper.tabs-block .switch
.offer section.accommodation .content-width .accommodation
.select-accommodation-box .list .map { width: 100%; height: 300px; }

body.product .content-body-wrapper.tabs-block .switch .offer
section.accommodation .content-width .accommodation
.select-accommodation-box .list .list-content .items
.accommodation-info #formAccomodation .accommodation-form 
.mealplan .select-price input { display: inline-block }

wat happened, CSS?

CSS Zen Garden happened

.sidebar .design-selection nav ul li a {
  display: inline;
}

"we are using separation of concerns"

separation of wat?

<div class="remove-product">
  <h1>...
  <div>
    <img>...
    <p>...
  </div>
  <div>
    <button class="remove">...
    <button>...
  </div>
</div>

.remove-product {
  > h1 { ... }
  > div {
      img { ... }
      p { ... }
    }
  > div {
    > button {
      &.remove { ... }
    }
  }
}

The "P" in CSS stands for "Principles"

The worst part about front-end development was that the other people solving your problems were front-end developers.

Adam Morse

Issues

1) HTML and CSS are too coupled.

2) CSS is not reusable.

<div class="remove-product">
  ...
</div>

content-semantic classes is not a good idea.

Chapter 2 Goals

1) decouple CSS from HTML.

2) from semantic CSS to visual CSS.

<div class="remove-product">
  <h1>...
  <div>
    <img>...
    <p>...
  </div>
  <div>
    <button class="remove">...
    <button>...
  </div>
</div>

<div class="remove-product">
  <h1 class="remove-product-title">
  <div class="remove-product-body">
    <img class="remove-product-image">
    <p class="remove-product-message">
  </div>
  <div class="remove-product-buttons">
    <button class="remove">
    <button>
  </div>
</div>

<div class="modal">
  <h1 class="modal-title">
  <div class="modal-body">
    <img class="modal-icon">
    <p class="modal-message">
  </div>
  <div class="modal-buttons">
    <button class="btn primary">
    <button class="btn">
  </div>
</div>

what if...

.modal-messages {
  .modal-icon { ... }
  .modal-message { ... }
}

.alert-content {
  .alert-img { ... }
  .alert-text { ... }
}

.text-with-icon {}

.icon-text {}

The media object is an image to the left, with descriptive content to the right.

Nicole Sullivan

<div class="modal">
  <h1 class="modal-title">
  <div class="modal-body">
    <img class="modal-icon">
    <p class="modal-message">
  </div>
  <div class="modal-buttons">
    <button class="btn primary">
    <button class="btn">
  </div>
</div>

<div class="modal">
  <h1 class="modal-title">
  <div class="media">
    <img class="media-img">
    <p class="media-body">
  </div>
  <div class="modal-buttons">
    <button class="btn primary">
    <button class="btn">
  </div>
</div>

<div class="media alert">
  <img class="media-img">
  <p class="media-body alert-content">
</div>

our CSS classes were now reusable across projects.

a component made of components.

modal = media + button + card + ...

we were not building pages anymore.

we were building components of a system.

from styling pages to creating design systems.

SENIOR DESIGN SYSTEM ENGINEER

Design systems

Principles

Rules

Constraints

Principles: Spacing should help establish relationship between elements.

Rules: Spacing values must be proportional.

Constraints: Only 5 spacing values available.

$baseline: 6px;

$unit-factor-tiny:   1;
$unit-factor-small:  2;
$unit-factor:        4;
$unit-factor-large:  8;
$unit-factor-huge:  16;

$spacing-unit-tiny  =  $baseline * $unit-factor-tiny;  // 6px
$spacing-unit-small =  $baseline * $unit-factor-small; // 12px
$spacing-unit       =  $baseline * $unit-factor;       // 24px
$spacing-unit-large =  $baseline * $unit-factor-large; // 48px
$spacing-unit-huge  =  $baseline * $unit-factor-huge;  // 96px

❤️ backends

what about file structure?

what about naming?

ITCSS

Inverted Triangle CSS

(by Harry Roberts)

1-Settings/
    _colors.scss
2-Tools/
    _mixins.scss
3-Base/
    _normalize.scss
4-Generic/
    _image.scss
5-Objects/
    _media.scss
6-Components/
    _modal.scss
7-Utilities/
    _hidden.scss

/scss/1-Settings/_core.scss

$baseline: 6px;

$unit-factor-tiny:   1;
$unit-factor-small:  2;
$unit-factor:        4;
$unit-factor-large:  8;
$unit-factor-huge:  16;

/scss/5-Objects/_media.scss

.media { ... }

.media-img { ... }

.media-body { ... }

/scss/6-Components/_modal.scss

.modal { ... }

.modal-buttons { ... }

you get the idea.

BEM

(Block - Element - Modifier)

.block {}

.block__element {}

.block--modifier {}

.block__element--modifier {}

.person {}

.person__eyes {}

.person--tall {}

.person__eyes--blue {}

last question:

how do we differentiate objects, components and utilities?

Namespaces

Objects (.o-)

Components (.c-)

Utilities (.u-)

/scss/5-Objects/_objects.media.scss

.o-media { display: flex; align-items: flex-start; }

.o-media__body { flex: 1; }

.o-media__image { margin-right: $spacing-unit; }

.o-media--large .o-media__image { margin-right: $spacing-unit-large; }

<div class="c-card c-card--rounded">
  <h1 class="c-card__header u-text-hairline">
  <div class="c-card__body">
    <div class="o-media o-media--center u-padding">
      <img class="o-media__img">
      <p class="o-media__body u-text-h5 u-text-hairline">
    </div>
    <div class="c-card__footer c-card__footer--between">
      <button class="c-btn c-btn--ghost">
      <button class="c-btn c-btn--primary">
    </div>
  </div>
</div>

<div class="c-card c-card--rounded">
  <h1 class="c-card__header u-text-hairline">
  <div class="c-card__body">
    <div class="o-media o-media--center u-padding">
      <img class="o-media__img">
      <p class="o-media__body u-text-h5 u-text-hairline">
    </div>
    <div class="c-card__footer c-card__footer--between">
      <button class="c-btn c-btn--ghost">
      <button class="c-btn c-btn--primary">
    </div>
  </div>
</div>

it looks weird.

death by repetition

.o-media--large .o-media__image {
  margin-right: $spacing-unit-large; }

.c-list_item--large {
  margin-right: $spacing-unit-large; }

.c-actions-list__item {
  margin-right: $spacing-unit-large; }

.u-margin-right-large {
  margin-right: $spacing-unit-large !important;
}

Flexbox utilities

Padding and margin utilities

Width and height utilities

Text sizes, colors, styles and weights

Chapter 3

utility-first CSS.

create a lot of small, reusable, focused CSS classes, and use them to build your UI.

<div class="u-padding u-border-radius u-background-white u-shadow-large">
  <h1 class="u-padding u-text-hairline">
  <div class="u-padding-vertical-small">
    <div class="o-media u-flex-items-center u-padding">
      <img class="o-media__img">
      <p class="o-media__body u-text-h5 u-text-hairline">
    </div>
    <div class="u-padding-small u-background-dark-gray
                u-flex u-flex-justify-between">
      <button class="c-btn c-btn--ghost">
      <button class="c-btn u-background-primary">
    </div>
  </div>
</div>