6.5. Rad sa CSS u Drupalu. Breakpoint-i, responzivna podešavanja u Drupal temi

U prethodnim uputstvima već smo povezali CSS sa našom temom. Za to smo u datoteci drupalbook.info.yml naveli:

libraries:
  - drupalbook/global-styling

Zatim smo napravili datoteku drupalbook.libraries.yml, gde smo već naveli koje CSS fajlove treba uključiti:

global-styling:
  version: 1.x
  css:
    theme:
      css/style.css: {}
      css/print.css: { media: print }

Sada ćemo detaljnije pogledati kako raditi sa CSS-om u našoj temi.

Već smo u prethodnom članku napisali da za svaki CSS fajl možete odrediti media u vitičastim zagradama. Za print.css smo naveli media: print kako bi se taj CSS uključivao samo u verziji za štampu. Takođe postoji media: all (podrazumevano) za sve prikaze CSS-a i media: screen za režime koji nisu štampa.

CSS nadjačavanja drugih biblioteka

Možete koristiti libraries-override da nadjačate core CSS fajlove:

libraries-override:
  # Zamena cele biblioteke.
  core/drupal.collapse: mytheme/collapse
  
  # Zamena pojedinačnih delova biblioteke, kao što je CSS fajl.
  subtheme/library:
    css:
      theme:
        css/layout.css: css/my-layout.css
    
  # Uklanjanje dela biblioteke.
  drupal/dialog:
    css:
      theme:
        dialog.theme.css: false
    
  # Uklanjanje cele biblioteke.
  core/modernizr: false

Breakpoint-i u Drupalu

Breakpoint-i u Drupalu su deo konfiguracije teme, oni omogućavaju da prilagodite izgled teme u zavisnosti od veličine ekrana uređaja na kome se sajt prikazuje. Ovo omogućava da sajt bude adaptivan za različite uređaje - desktop računare, tablete, telefone, pa čak i satove. Modul Breakpoint standardizuje korišćenje breakpoint-a, omogućava praćenje rezolucije uređaja i pruža željeni breakpoint. Potrebno je samo opisati neophodne dimenzije za breakpoint-e.

Ovo naravno dobro zvuči, ali ako podesite breakpoint-e u temi, a ništa ne uradite više, neće se ništa desiti. Kao primer, možete uključiti dodatni core modul Responsive Image i tada će biti moguće, pomoću breakpoint-a, prikazivati slike sa različitim preset-ima za različite breakpoint-e. Dodajmo breakpoint-e u našu temu.

Breakpoint se sastoji od zaglavlja i media query-ja. Media query je standardni način za opis breakpoint-a. Na primer, za breakpoint širine 40em, napisali bismo '(min-width: 40em)'. Ovde je breakpoint zapravo media query, ali breakpoint-i mogu sadržavati dodatne informacije.

Da biste dodali breakpoint, potrebno je da napravite fajl myTheme.breakpoints.yml, ja imam temu drupalbook, pa će fajl biti drupalbook.breakpoints.yml.

Svaki unos u ovom fajlu je poseban breakpoint, koji se sastoji od mašinski jedinstvenog imena breakpoint-a i podređenih elemenata sa parametrima breakpoint-a:

1. label: naslov breakpoint-a
2. mediaQuery: tekst koji definiše veličinu ekrana uređaja za ovaj breakpoint
3. weight: težina breakpoint-a. Možete postaviti breakpoint-e sa preklapajućim mediaQuery veličinama, pa vam treba težina da odredite koji breakpoint će se izvršiti prvi.
4. multiplier: pokazuje koliko da se pomnoži broj piksela da bi se odredio mediaQuery. Neki uređaji, kao iPhone, koriste retina displeje gde se za prikaz jednog piksela sajta koriste dva fizička piksela.

Primer sadržaja drupalbook.breakpoints.yml:

drupalbook.mobile:
  label: mobile
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
drupalbook.narrow:
  label: narrow
  mediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'
  weight: 1
  multipliers:
    - 1x
drupalbook.wide:
  label: wide
  mediaQuery: 'all and (min-width: 851px)'
  weight: 2
  multipliers:
    - 1x

Ovaj fajl treba da dodate u vašu temu, samo će umesto drupalbook biti ime vaše teme.

Responzivne slike

Sada uključimo modul Responsive Image:

Ako odete na stranicu za uređivanje Responsive image stilova:

/admin/config/media/responsive-image-style

Možete otvoriti za uređivanje responsive preset Narrow:

/admin/config/media/responsive-image-style/narrow

I podesiti da veličine Narrow dolaze iz vaše teme:

(screenshot)

Sada možete za Narrow preset podesiti različite veličine za svaki breakpoint posebno:

(screenshot)

Ako sada za neki polje postavite da se prikazuje preko Narrow preseta, biće prikazane različite slike za različite rezolucije ekrana:

(screenshot)