Plik z bibliotekami *.LIBRARIES.yml

Kategoryzacja plików CSS według SMACSS-style

Base - CSS resetowanie i normalizacja. Weight: CSS_BASE = -200
Dotyczy podstawowych reguł, które nie powinny zawierać selektorów klas. Style podstawowe powinny odzwierciedlać możliwie najprostszy wygląd każdego elementu.

Layout - układ strony. Weight: CSS_LAYOUT = -100
Dotyczy rozmieszczenia głównych elementów, w tym systemu GRID.

Component - style wielokrotnego użytku. Weight: CSS_COMPONENT = 0
Elementy interfejsu użytkownika wielokrotnego użytku.

State - style zmian komponentów po stronie klienta. Weight: CSS_STATE = 100
Style dotyczące tymczasowych zmian w wyglądzie podczas interakcji witryny z użytkownikiem.
Np.: najeżdżanie na linki lub otwieranie modalnego okna dialogowego.

Główne sposoby stylizacji stanu to:

• klasy niestandardowe, często, ale nie zawsze, stosowane przez JavaScript. Te powinny być poprzedzone prefiksem .is- np.: .is-transitioning, .is-open
• pseudoklasy, takie jak :hover i :checked
• atrybuty HTML z semantyką stanu. Np.: details[open]
• media queries - style zmieniające wygląd ze względu na rozmiar ekranu

Theme - stylizacja komponentu. Weight: CSS_THEME = 200
Styl czysto wizualny, taki jak obramowanie, cień pola, kolory i tła, właściwości czcionek itp.

Szerzej o tym temacie: https://www.drupal.org/node/1887918#separate-concerns

Dodanie plików CSS i JS

global-styling:
  css:
    layout:
      css/styles.css: {}
  js:
    js/javascript.js: {}