Breakpoints-ով աշխատանք Drupal 8-ում

Drupal 8-ում breakpoints-ների խմբագրման համար օգտագործողի ինտերֆեյս չկա։ Քանի որ breakpoints-ները սահմանված են կոնֆիգուրացիոն ֆայլերում, նաև հնարավոր չէ տրամադրել օգտագործողի ինտերֆեյս contrib-ում։

Breakpoints-ները օգտագործվում են դիտման տարածքների (էկրանների, տպիչների և այլ մեդիայի տեսակների) բարձրությունն ու լայնությունը փուլավորելու համար և ապահովում են դեպք, երբ ադապտիվ դիզայնը կարգավորվում է տարբեր սարքավորումների ճիշտ ցուցադրման համար։ Breakpoints մոդուլը ստանդարտացնում է breakpoints-ների օգտագործումը և թույլ է տալիս մոդուլներին ու թեմաներին սահմանել կամ օգտագործել միմյանց breakpoints-ները։ Breakpoints մոդուլը հետևում է breakpoints-ներին ըստ բարձրության, լայնության և լուծաչափի։

Հիշեք, որ ձեր breakpoints CSS-ը breakpoints.yml ֆայլում ավելացնելը անհրաժեշտ է միայն այն դեպքերում, երբ Drupal-ը պետք է աշխատի breakpoints-ների հետ, ինչպես օրինակ՝ Responsive Images մոդուլի դեպքում։

Տերմինաբանություն

Breakpoints

Breakpoints-ը բաղկացած է տեգից և մեդիա հարցումից։ Մեդիա հարցումները breakpoints-ների ֆորմալ կոդավորման ձևն են։ Օրինակ, 40em լայնության breakpoint-ը մեդիա հարցման մեջ գրանցվում է որպես '(min-width: 40em)'։ Breakpoints-ները իրականում մեդիա հարցումներ են որոշ լրացուցիչ մետատվյալներով, ինչպես անուն և բազմապատիկ։

Թեմաներն ու մոդուլները կարող են սահմանել Breakpoints՝ ստեղծելով կոնֆիգուրացիոն ֆայլ myThemeOrModule.breakpoints.yml անունով, որտեղ myThemeOrModule-ը ձեր թեմայի կամ մոդուլի անունն է։

Այս ֆայլի յուրաքանչյուր գրառում սահմանում է մեկ Breakpoint՝ անունով, որը համակարգչի կողմից յուրահատուկ է՝ օրինակ bartik.mobile, և նրա ենթաբաժինները սահմանում են breakpoint-ի հատկությունները՝

• label - ընթեռնելի անվանումը breakpoints-ի համար։
• mediaQuery - մեդիա հարցման տեքստը, օրինակ՝ 'all and (min-width: 851px)'։
• weight - breakpoint-ի դիրքի (կարգը) քաշը։
• multipliers - սատարվող պիքսելային լուծաչափի բազմապատիկները։

Նշում. Breakpoints-ների դասավորության կարգը ըստ քաշի չափազանց կարևոր է։ Փոքրագույն նվազագույն լայնության breakpoints-ները պետք է ունենան ամենափոքր քաշը, իսկ ավելի մեծ նվազագույն լայնություն ունեցող breakpoints-ները՝ ավելի մեծ քաշ։ Նախնական կարգով մոդուլները դասավորում են breakpoints-ները ամենափոքրից մինչև ամենամեծ։ Սակայն անհրաժեշտության դեպքում մոդուլները կարող են փոխել այդ կարգը․ օրինակ Responsive Image մոդուլը դասավորում է breakpoints-ները ամենամեծից մինչև ամենափոքր՝ քաշի արժեքի հիման վրա։

Օրինակ (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

Breakpoint խմբեր

Breakpoints-ները կարող են կազմակերպվել խմբերով։ Մոդուլներն ու թեմաները պետք է խմբավորեն breakpoints-ները՝ տարբեր նպատակների համար, օրինակ՝ layout-ի breakpoints կամ պատկերի չափի breakpoints։

Breakpoint խմբը breakpoints-ների համակցություն է։ Յուրաքանչյուր թեմա կամ մոդուլ կարող է սահմանել զրո կամ ավելի breakpoint խմբեր։ Breakpoint սահմանվում է հատուկ նույնականիչներով և breakpoint բանալիներով։ Խումբը նշելը պարտադիր չէ․ եթե խմբի անուն չեք նշի, այն կստանա ձեր թեմայի կամ մոդուլի անունը։

Օրինակ yourtheme.breakpoints.yml-ում կարող եք ստեղծել հետևյալ երկու breakpoint խմբերը՝

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

Breakpoint-ների նույնականիչը սկսվում է թեմայի կամ մոդուլի անունով, հետո հաջորդում է կետի անունը, հետո խմբի մեքենայական անունը, իսկ խմբի բանալին նույնը է՝ theme/module.group։ Սա է ստեղծում breakpoint խմբերը։ Նույն բանալիներով բոլոր breakpoint-ները կհամախմբվեն մեկ խմբում։

Ներկայումս հնարավոր չէ breakpoint խմբերի համար սահմանել օգտագործողի տեգ խմբի անվանից դուրս։ Այս տեգը կցուցադրվի որպես լեյբլ, օրինակ՝ Responsive Image մոդուլի ինտերֆեյսում breakpoint խմբերը ընտրելիս։

Ընդլայնված օգտագործում

Դուք կարող եք նաև breakpoint ավելացնել ուրիշ մոդուլների կամ թեմաների սահմանած breakpoint խմբերին, բայց պետք է օգտագործեք ամբողջական անունը։

Օրինակ yourmodule.breakpoints.yml-ում կարող եք գրել՝

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

Սա կավելացնի ձեր մոդուլում սահմանված breakpoint-ը ձեր թեմայի սահմանած breakpoint խմբին։

Մուլտիպլայերներ

Մուլտիպլայերները դիտման տարածքի սարքի լուծաչափի չափման միավոր են, որը սահմանվում է որպես ֆիզիկական պիքսելի չափի և սարքից անկախ պիքսելի չափի հարաբերությունը։ Օրինակ, «retina» էկրանները ունեն 2x մուլտիպլայեր։

Breakpoint մոդուլը սահմանում է 1x, 1.5x և 2x մուլտիպլայերներ։ Breakpoint սահմանելիս մոդուլներն ու թեմաները կարող են նշել, թե որ մուլտիպլայերները կկիրառվեն յուրաքանչյուր breakpoint-ի համար։

Օրինակ՝

'1.5x' // սատարում է Android
'2x'   // սատարում է Mac retina էկրանները

Նոր breakpoint ֆայլերի ներբեռնում

Եթե թեմայի փորձարկման ժամանակ ավելացնեք նոր breakpoint կոնֆիգուրացիոն ֆայլ, կարող եք վերակառուցել քեշերը՝ նոր breakpoint-ները տեսնելու համար։

Ռեսուրսներ

• Մեդիա հարցումներ․ W3C առաջարկությունը 2012 թ. հունիսի 19
• Breakpoint-sass.com