$30 off During Our Annual Pro Sale. View Details »

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

Tamás Hajas
November 15, 2014

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

Tamás Hajas

November 15, 2014
Tweet

More Decks by Tamás Hajas

Other Decks in Technology

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