Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Szépségszalon a vertikális végtelenhez – Drupal...

Tamás Hajas
November 14, 2015

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

Tamás Hajas

November 14, 2015
Tweet

More Decks by Tamás Hajas

Other Decks in Technology

Transcript

  1. 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:
  2. 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:
  3. 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)
  4. 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
  5. 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
  6. # 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
  7. • Base • Layout • Component Module • State •

    Theme SMACSS-szerű CSS fájl-struktúra
  8. <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
  9. 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
  10. {% if site_slogan %} <div class="site-slogan"> {{ site_slogan }} </div>

    {% endif %} {# Show slogan if it is set #} *.html.twig
  11. {{ html }} {{ page }} {{ page.header }} {{

    page.aside }} {{ page.footer }} {{ page.content }} {{ content }} {{ submitted }} {{ tags }} {{ text }} {{ image }} field field
  12. {{ html }} {{ page }} {{ page.header }} {{

    page.aside }} {{ page.footer }} {{ page.content }} {{ content|without(‘image’) }} {{ submitted }} {{ tags }} {{ text }} {{ content.image }}
  13. {{ html }} {{ page }} {{ page.header }} {{

    page.aside }} {{ page.footer }} {{ page.content }} {{ content|without(‘image’,’tags’) }} {{ submitted }} {{ content.tags }} {{ text }} {{ content.image }}
  14. {% set foo="Bar" %} {{ foo }} … Bar *.html.twig

    változó definiálása utasítás változó értéke változó neve eredmény
  15. {% trans %} Submitted by {{ author_name|passthrough }} on {{

    date|passthrough }} {% endtrans %} {{ ‘webconf’|t }} *.html.twig fordítás
  16. • 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!