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

Drupal Hétvége 2014 előadásom diái
http://drupal.hu/konferencia/2014/program#d8smink

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. 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
   

   View Slide

6. !
   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
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. # 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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. 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
    

    View Slide

18. • 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)
    

    View Slide

19. 
    
    
    
    
    
    
    
    
    
    John Albin: Managing complex projects with design components
    BEM
    

    View Slide

20. # 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
    

    View Slide

21. hook_library_info()
    Drupal 7
    

    View Slide

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

    View Slide

23. 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
    

    View Slide

24. 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
    

    View Slide

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

    View Slide

26. Breakpoints
    Drupal 8
    

    View Slide

27. 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
    

    View Slide

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

    View Slide

29. View Slide

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

    View Slide

31. Képstílusok
    a sminkben
    Drupal 8
    

    View Slide

32. • 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
    

    View Slide

33. 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
    

    View Slide

34. *.tpl.php
    Drupal 7
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

43. Twig coding standards: https://drupal.org/node/1823416
    *.html.twig
    for loop
    
    {% for user in users %}
    
    {{ user.username }}
    
    {% endfor %}
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

47. Twig debug
    

    View Slide

48. 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:
    

    View Slide

49. template.php
    Drupal 7
    

    View Slide

50. bitangjo.theme
    Drupal 8
    template.php
    Drupal 7
    

    View Slide

51. 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';
    }
    

    View Slide

52. Headless Drupal
    Drupal 8
    

    View Slide

53. !
    ‑
    Böngésző
    Weboldal megjelnítése
    Headless Drupal
    Adatbázis
    ‑
    PHP

    „adatszolgáltatás”

    !
    ⬍
    JS

    adatfeldolgozás, HTML render
    

    View Slide

54. View Slide

55. • 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
    

    View Slide

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

    View Slide