Szépségszalon a Vertikális Végtelenhez – Drupal 8 sminkelés

Slide 1

Slide 1 text

Szépségszalon a Vertikális Végtelenhez Drupal 8 sminkelés

Slide 2

Slide 2 text

Hajas Tamás Drupal tanácsadó Integral Vision Kft

Slide 3

Slide 3 text

bitangjo.info Drupal 7 sites/all/themes/bitangjo/

Slide 4

Slide 4 text

bitangjo.info.yml themes/bitangjo/ Drupal 8 bitangjo.info Drupal 7 sites/all/themes/bitangjo/

Slide 5

Slide 5 text

kulcs_neve: érték kettőspont ':' (nem egyenlőségjel) # komment: kettőskereszt '#' (nem pontossvessző) struktúra: behúzással jelezve Change record: https://drupal.org/node/1935708 YAML szintaktika

Slide 6

Slide 6 text

! description: Ez egy bitang jó smink! :) version: 1.0 ! ! ! ! package: custom screenshot: bitangjo.png Creating a D8 sub-theme: https://drupal.org/node/2165673 type: theme name: Bitangjó smink ! ! core: 8.x base theme: classy # engine: twig bitangjo.info.yml

Slide 7

Slide 7 text

https://www.drupal.org/node/2289511 A „Banán egyezség”

Slide 8

Slide 8 text

Forrás: https://github.com/sqndr/d8-theming-guide/blob/master/img/theme-overview.png

Slide 9

Slide 9 text

Forrás: https://github.com/sqndr/d8-theming-guide/blob/master/img/custom-theme.png

Slide 10

Slide 10 text

bitangjo.info.yml stylesheets: all: - css/base.css screen: - css/components.css print: - css/print.css

Slide 11

Slide 11 text

# Stíluslap felülbírálása ! ! # Stíluslap „etávolítása” Change record: https://drupal.org/node/1876600 stylesheets-override: - normalize.css ! ! stylesheets-remove: - jquery.ui.dialog.css bitangjo.info.yml

Slide 12

Slide 12 text

SMACSS + BEM CSS coding standards: https://drupal.org/node/1886770 Drupal 8

Slide 13

Slide 13 text

• Base • Layout • Module • State • Theme SMACSS CSS fájl-struktúra

Slide 14

Slide 14 text

• Base • Layout • Module • State • Theme SMACSS-szerű CSS fájl-struktúra

Slide 15

Slide 15 text

• Base • Layout • Component Module • State • Theme SMACSS-szerű CSS fájl-struktúra

Slide 16

Slide 16 text

• Base • Layout • Component Module • State • Theme SMACSS-szerű CSS fájl-struktúra

Slide 17

Slide 17 text

base • elements.css • typography.css layout • layout.css • node-add.css • … components • buttons.css • buttons.theme.css • … theme • install-page.css • appearance-  page.css SMACSS-szerű CSS fájl-struktúra (smink) Forrás: seven theme

Slide 18

Slide 18 text

• module_name.module.css   (layout, component, state) • module_name.theme.css • module_name.admin.css   (layout, component, state) • module_name.admin.theme.css • module_name.base.css SMACSS-szerű CSS fájl-struktúra (modul)

Slide 19

Slide 19 text

John Albin: Managing complex projects with design components BEM

Slide 20

Slide 20 text

# Smink régiók Forrás: seven.info.yml regions: content: Content help: Help page_top: 'Page top' page_bottom: 'Page bottom' sidebar_first: 'First sidebar' regions_hidden: - sidebar_first bitangjo.info.yml

Slide 21

Slide 21 text

hook_library_info() Drupal 7

Slide 22

Slide 22 text

bitangjo.libraries.yml Drupal 8 hook_library_info() Drupal 7 Change record: https://drupal.org/node/2201089

Slide 23

Slide 23 text

base: version: 1.x js: js/bitangjo.js: {} dependencies: - core/drupal - core/jquery - core/jquery.once Forrás: https://github.com/sqndr/d8-theming-guide bitangjo.libraries.yml

Slide 24

Slide 24 text

Forrás: https://github.com/sqndr/d8-theming-guide bitangjo.libraries.yml picker: version: 3.1.0 remote: http://formstone.it/components/picker js: lib/picker/js/jquery.fs.picker.js: {} css: theme: lib/picker/css/jquery.fs.picker.css: {} dependencies: - core/jquery

Slide 25

Slide 25 text

bitangjo.info.yml* libraries: - bitangjo/base *Hol a picker? Nemsokára kiderül… ;)

Slide 26

Slide 26 text

Breakpoints Drupal 8

Slide 27

Slide 27 text

bartik.mobile: label: mobile mediaQuery: '(min-width: 0px)' 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 bartik.breakpoints.yml

Slide 28

Slide 28 text

Breakpoints » Responsive images • Responsive images modul • Mapping beállítása • Breakpoint group • Breakpoint – Image style

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

Breakpoints » Responsive images • Responsive images modul • Mapping beállítása • Breakpoint group • Breakpoint – Image style • RI image formatter • Mapping választása

Slide 31

Slide 31 text

Képstílusok a sminkben Drupal 8

Slide 32

Slide 32 text

• Képstílus létrehozása (admin felület)  /admin/config/media/image-styles/add • Képstílus exportja admin felületről  /admin/config/development/ configuration/single/export • Exportált YAML a sminkbe  bitangjo/config/install/ image.style.style_name.yml Képstílusok a sminkben

Slide 33

Slide 33 text

uuid: 311e7c58-c64a-4c9e-b544-68b12b560e36 langcode: en status: true dependencies: { } name: thumbnail label: 'Thumbnail (100×100)' effects: 1cfec298-8620-4749-b100-ccb6c4500779: uuid: 1cfec298-8620-4749-b100-ccb6c4500779 id: image_scale weight: 0 data: width: 100 height: 100 upscale: false third_party_settings: { } image.style.thumbnail.yml

Slide 34

Slide 34 text

*.tpl.php Drupal 7

Slide 35

Slide 35 text

*.html.twig Drupal 8 *.tpl.php Drupal 7

Slide 36

Slide 36 text

Biztonságos Gyors Érthető PHPTemplate & Twig comparison: https://drupal.org/node/1918824 *.html.twig

Slide 37

Slide 37 text

Twig coding standards: https://drupal.org/node/1823416 *.html.twig változó {{ page.primary_menu }}

Slide 38

Slide 38 text

Twig coding standards: https://drupal.org/node/1823416 *.html.twig ﬁlter {{ content|without('links') }}

Slide 39

Slide 39 text

Twig coding standards: https://drupal.org/node/1823416 {{ 'Home'|t }} *.html.twig ﬁlter

Slide 40

Slide 40 text

Twig coding standards: https://drupal.org/node/1823416 *.html.twig fordítás {% trans %} Submitted by {{ author_name|passthrough }} on {{ date|passthrough }} {% endtrans %}

Slide 41

Slide 41 text

Twig coding standards: https://drupal.org/node/1823416 *.html.twig komment {# Kód komment #}

Slide 42

Slide 42 text

Twig coding standards: https://drupal.org/node/1823416 *.html.twig if funkció {% if site_slogan %}

{% endif %}

Slide 43

Slide 43 text

Twig coding standards: https://drupal.org/node/1823416 *.html.twig for loop

{{ user.username }}

Slide 44

Slide 44 text

Twig coding standards: https://drupal.org/node/1823416 *.html.twig Twig változó deﬁniálása {% set foo="bar" %} {{ foo }} …

Slide 45

Slide 45 text

Twig coding standards: https://drupal.org/node/1823416 *.html.twig Twig változó deﬁniálása {% set classes = [ 'admin-list', compact ? 'compact', ] %} ! … !

Slide 46

Slide 46 text

Twig debug parameters: twig.config: debug: true auto_reload: true cache: false sites/default/services.yml

Slide 47

Slide 47 text

Twig debug

Slide 48

Slide 48 text

Twig debug $ cp example.settings.local.php   default/settings.local.php if (file_exists(__DIR__ . '/settings.local.php')) { include __DIR__ . '/settings.local.php'; } …és a settings.php-ben:

Slide 49

Slide 49 text

template.php Drupal 7

Slide 50

Slide 50 text

bitangjo.theme Drupal 8 template.php Drupal 7

Slide 51

Slide 51 text

Change record-ok: https://www.drupal.org/node/2352319, https://drupal.org/node/2169605 bitangjo.theme /** * Implements hook_form_FORM_ID_alter(). */ function bitangjo_form_recipe_alter(&$form, &$form_state) { ! // Use Picker to replace default checkboxes and radios. $form['#attached']['library'][] = 'bitangjo/picker'; }

Slide 52

Slide 52 text

Headless Drupal Drupal 8

Slide 53

Slide 53 text

! ‑ Böngésző Weboldal megjelnítése Headless Drupal Adatbázis ‑ PHP  „adatszolgáltatás”  ! ⬍ JS  adatfeldolgozás, HTML render

Slide 54

Slide 54 text

No content

Slide 55

Slide 55 text

• https://drupal.org/theme-guide/8 • Change records (theme): http://j.mp/1qFSKXq • http://d8.sqndr.com • https://amsterdam2014.drupal.org/session/twig- and-new-drupal-8-theme-system • Twig Coding Standards: https://drupal.org/node/ 1823416 • CSS CS: https://drupal.org/node/1886770 • JS CS: https://drupal.org/node/172169 további infók

Slide 56

Slide 56 text

Tamás Hajas Drupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas