Szépségszalon a vertikális végtelenhez – Drupal 8 front-end fejlesztés

Drupal sminkelés előadásom #webkonfhu 2015 változata. http://webconf.hu/2015/program/index.php

Transcript

1. Szépségszalon a Vertikális Végtelenhez 8
2. Szépségszalon a Vertikális Végtelenhez Drupal 8 sminkelés
3. Hajas Tamás Web Project Manager Front-end Developer Integral Vision Kft
4. Hajas Tamás thamas.github.io
5. Smink létrehozása
6. Hol? [gyökérkönyvtár]/themes/custom/[sminkneve]
8. Konfig fájlok
9. *.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok
10. *.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok
11. alap info CSS és JS örökölt
 CSS és JS felülbírálása régiók
12. A Drupal 8 sminkjei Seven HTML, CSS, JS változhat Bartik HTML, CSS, JS változhat Stark HTML, CSS, JS változhat Stable HTML, CSS, JS nem változhat <div></div> Drupal 8 core HTML, CSS, JS változhat Classy HTML, CSS, JS nem változhat <div class=“foo”></div> base theme: false base theme: classy base theme:
13. Drupal 8 alapsmink használat Klassz Sminkem Alakuló Sminkem Stable HTML, CSS, JS nem változhat <div></div> Drupal 8 core HTML, CSS, JS változhat Classy HTML, CSS, JS nem változhat <div class=“foo”></div> Stabil Sminkem base theme: false base theme: classy base theme:
14. Drupal 8 alapsmink használat Klassz Sminkem base theme: classy klasszsminkem.info.yml <div class="node node--article"> … </div> HTML kimenet (Nem fog változni Drupal 8.x-ben)
15. Drupal 8 alapsmink használat base theme: false alakulosminkem.info.yml <div class="node node--article"> … </div> HTML kimenet (Megváltozhat! CSS, JS is!) Alakuló Sminkem
16. Drupal 8 alapsmink használat stabilsminkem.info.yml Stabil Sminkem base theme nincs megadva <div> … </div> HTML kimenet (Nem fog változni Drupal 8.x-ben) Change record: https://www.drupal.org/node/2580687
17. *.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok
18. # Libraries libraries: -sminkem/global-assets global-assets: version: 1.x css: theme: css/style.css: {} css/print.css: { media: print } js: js/script.js: {} dependencies: - core/jquery - core/jquery.once sminkem.info.yml sminkem.libraries.yml https://www.drupal.org/theme-guide/8/assets
19. Change record: https://www.drupal.org/node/2497313 libraries override / extend sminkem.info.yml
20. Change record: https://www.drupal.org/node/2497313 libraries override / extend sminkem.info.yml
21. • Base • Layout • Component Module • State • Theme SMACSS-szerű CSS fájl-struktúra
22. <div class="flower__bed"> <div class="flower flower--tulip is-pollinating"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> John Albin: Managing complex projects with design components BEM
23. *.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok
24. 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
26. *.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok
27. bartik.theme
28. Sablonrendszer
29. html page region region region region node block field field field field field field
31. Twig sablonok https://www.drupal.org/theme-guide/8/twig
32. block.html.twig
33. Twig coding standards: https://drupal.org/node/1823416 *.html.twig {{ változó }} {# kód komment #} {% utasítás %}
34. {% if site_slogan %} <div class="site-slogan"> {{ site_slogan }} </div> {% endif %} {# Show slogan if it is set #} *.html.twig
35. $yo[‘drupal_where’]->is[‘und’][0]–>my_data Drupal 7 :(
36. *.html.twig változón elemének megjelenítése {{ content.links.readmore }}
37. *.html.twig változó megjelenítése kihagyással {{ content|without('image') }} változó (tömb) szűrő változó elemének neve
38. {{ html }} {{ page }} {{ page.header }} {{ page.aside }} {{ page.footer }} {{ page.content }} {{ content }} {{ submitted }} {{ tags }} {{ text }} {{ image }} field field
39. {{ html }} {{ page }} {{ page.header }} {{ page.aside }} {{ page.footer }} {{ page.content }} {{ content|without(‘image’) }} {{ submitted }} {{ tags }} {{ text }} {{ content.image }}
40. {{ html }} {{ page }} {{ page.header }} {{ page.aside }} {{ page.footer }} {{ page.content }} {{ content|without(‘image’,’tags’) }} {{ submitted }} {{ content.tags }} {{ text }} {{ content.image }}
41. https://www.drupal.org/node/2296163 {{ username|raw }} *.html.twig autoescape Kép: http://www.legalleadersblog.com/2012/04/30/
 you-gotta-feel-sorry-for-those-angry-difficult-partners/
42. {% set foo="Bar" %} {{ foo }} … Bar *.html.twig változó definiálása utasítás változó értéke változó neve eredmény
43. *.html.twig változó definiálása tömb tartalomtípus pl. „article” összefűzés
44. {<div{{ attributes }}> block.html.twig html attribútumok
45. <article{{ attributes.addClass(classes) }}> *.html.twig attribútumok kezelése
46. attribútumok kezelése *.html.twig
47. {% trans %} Submitted by {{ author_name|passthrough }} on {{ date|passthrough }} {% endtrans %} {{ ‘webconf’|t }} *.html.twig fordítás
48. XYZ oldal Copyleft… T artalom címe Twig block
49. Twig block page.html.twig
50. Twig block page--front.html.twig
51. Twig block page.html.twig XYZ oldal Copyleft… Üdv a címlapon!
52. Eszközök
53. parameters: twig.config: debug: true auto_reload: true cache: false sites/default/services.yml Twig debug
54. Twig debug
55. Twig debug
56. Forrás: https://drupalize.me/blog/201405/lets-debug-twig-drupal-8 Devel + Devel Kint modulok
57. • https://drupal.org/theme-guide/8 • Change records (theme): http://j.mp/1qFSKXq • https://events.drupal.org/barcelona2015/ sessions/drupal-8-theming-0
 • 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 Nagyban építettem erre!
58. Hajas Tamás Web Project Manager Front-end Developer Integral Vision Kft integralvision.hu thamas.github.io