Rad sa breakpoint-ovima u Drupalu 8

U Drupalu 8 ne postoji korisnički interfejs za uređivanje breakpoint-ova. Zbog toga što su breakpoint-ovi definisani u konfiguracionim fajlovima, nije moguće obezbediti korisnički interfejs ni u contrib modulima.

Breakpoint-ovi se koriste za podešavanje visine ili širine viewport-a (ekrana, štampača i drugih tipova medijskog izlaza) na određene tačke i omogućavaju situacije kada se responzivni dizajn prilagođava za ispravan prikaz na različitim uređajima. Modul Breakpoints standardizuje upotrebu breakpoint-ova i omogućava modulima i temama da podešavaju ili koriste breakpoint-ove jedni drugih. Modul Breakpoints prati breakpoint-ove po visini, širini i rezoluciji.

Napomena: unos vaših CSS breakpoint-ova u fajl breakpoints.yml je potreban samo kada Drupal treba da komunicira sa breakpoint-ovima, kao u slučaju modula Responsive Images.

Terminologija

Breakpoint-ovi

Breakpoint se sastoji od oznake i media query-ja. Media query je formalni način za kodiranje breakpoint-ova. Na primer, breakpoint širine 40em se zapisuje kao media query '(min-width: 40em)'. Breakpoint-ovi su zapravo media query-ji sa dodatnim metapodacima kao što su ime i multiplikatori.

Teme i moduli mogu definisati breakpoint-ove kreiranjem konfiguracionog fajla naziva myThemeOrModule.breakpoints.yml, gde je myThemeOrModule ime vaše teme ili modula.

Svaki zapis u ovom fajlu definiše jedan breakpoint, koji se jedinstveno identifikuje mašinskim imenom, na primer bartik.mobile, i njegove osobine:

• label – čitljiv naziv za breakpoint.
• mediaQuery – tekst media query-ja, npr. 'all and (min-width: 851px)'.
• weight – pozicioni prioritet (redosled) za breakpoint.
• multipliers – podržani faktori rezolucije piksela.

Napomena. Redosled breakpoint-ova po vrednosti weight je veoma važan. Breakpoint-ovi sa najmanjom minimalnom širinom treba da imaju najmanju vrednost weight, dok breakpoint-ovi sa većom minimalnom širinom treba da imaju veću vrednost weight. Po defaultu moduli sortiraju breakpoint-ove od najmanjeg do najvećeg. Međutim, moduli mogu promeniti ovaj redosled ako je potrebno, na primer modul Responsive Image može preurediti breakpoint-ove od najvećeg ka najmanjem na osnovu weight vrednosti.

Primer (bartik.breakpoints.yml):

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

Grupa breakpoint-ova

Breakpoint-ovi mogu biti organizovani u grupe. Moduli i teme treba da koriste grupe za razdvajanje breakpoint-ova koji se koriste za različite svrhe, kao što su breakpoint-ovi za layout ili breakpoint-ovi za definisanje veličine slike.

Grupa breakpoint-ova je kombinacija breakpoint-ova. Svaka tema ili modul može definisati jednu ili više grupa breakpoint-ova. Breakpoint se kreira pomoću posebnih identifikatora i ključeva breakpoint-ova. Nije obavezno navesti grupu; ako je ne navedete, grupa će se zvati kao vaša tema ili modul.

Na primer, u yourtheme.breakpoints.yml možete napraviti sledeće dve grupe breakpoint-ova:

yourtheme.group1.mobile:
  label: narrow
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
  group: yourtheme.group1
yourtheme.group1.narrow:
  label: narrow
  mediaQuery: '(min-width: 560px)'
  weight: 0
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group1
yourtheme.group1.wide:
  label: wide
  mediaQuery: '(min-width: 851px)'
  weight: 1
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group1

yourtheme.group2.mobile:
  label: narrow
  mediaQuery: ''
  weight: 0
  multipliers:
    - 1x
  group: yourtheme.group2
yourtheme.group2.narrower:
  label: narrow
  mediaQuery: '(min-width: 400px)'
  weight: 0
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group2
yourtheme.group2.wider:
  label: wide
  mediaQuery: '(min-width: 1001px)'
  weight: 1
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group2

Korišćenje identifikatora breakpoint-a koji počinje mašinskim imenom teme ili modula, zatim tačke, pa mašinskog imena grupe, i upotreba istog identifikatora theme/module.group kao vrednosti ključa group, kreira breakpoint grupe. Svi breakpoint-ovi sa istim ključevima pojaviće se u jednoj grupi.

Trenutno nije moguće kreirati prilagođenu oznaku za breakpoint grupe van mašinskog imena koje se prikazuje kao naziv grupe. Ovo je oznaka koja će biti prikazana, na primer, pri izboru grupa breakpoint-ova u korisničkom interfejsu modula Responsive Image.

Napredna upotreba

Možete takođe dodati breakpoint u breakpoint grupe definisane od strane drugih modula ili tema, ali morate koristiti puni naziv.

Na primer, u yourmodule.breakpoints.yml možete uraditi sledeće:

yourmodule.yourtheme.group2.superwide:
  label: superwide
  mediaQuery: '(min-width: 1501px)'
  weight: 1
  multipliers:
    - 1x
    - 2x
  group: yourtheme.group2

Ovo će dodati breakpoint definisan u vašem modulu u grupu breakpoint-ova definisanu u vašoj temi.

Multiplikatori

Multiplikatori predstavljaju meru rezolucije uređaja viewport-a, definisanu kao odnos između fizičke veličine piksela na aktivnom uređaju i nezavisne veličine piksela. Na primer, „retina“ ekrani imaju multiplikator 2x.

Modul Breakpoint definiše multiplikatore 1x, 1.5x i 2x. Prilikom definisanja breakpoint-a, moduli i teme mogu odrediti koji multiplikatori važe za svaki breakpoint.

Primer:

'1.5x' // podržava Android
'2x'   // podržava Mac retina ekran

Učitavanje novih breakpoint fajlova

Ako dodate novi konfiguracioni fajl breakpoint tokom testiranja teme, možete obnoviti keš da biste videli nove breakpoint-ove.

Resursi

• Media query-ji: W3C preporuka od 19. juna 2012.
• Breakpoint-sass.com