Drupal Hétvége 2014 előadásom diái http://drupal.hu/konferencia/2014/program#d8smink
Szépségszalon aVertikálisVégtelenhezDrupal 8 sminkelés
View Slide
Hajas TamásDrupal tanácsadóIntegral Vision Kft
bitangjo.infoDrupal 7sites/all/themes/bitangjo/
bitangjo.info.ymlthemes/bitangjo/Drupal 8bitangjo.infoDrupal 7sites/all/themes/bitangjo/
kulcs_neve: értékkettőspont ':' (nem egyenlőségjel)# komment:kettőskereszt '#' (nem pontossvessző)struktúra:behúzással jelezveChange record: https://drupal.org/node/1935708YAML szintaktika
!description: Ez egy bitang jó smink! :)version: 1.0!!!!package: customscreenshot: bitangjo.pngCreating a D8 sub-theme: https://drupal.org/node/2165673type: themename: Bitangjó smink!!core: 8.xbase theme: classy# engine: twigbitangjo.info.yml
https://www.drupal.org/node/2289511A „Banán egyezség”
Forrás: https://github.com/sqndr/d8-theming-guide/blob/master/img/theme-overview.png
Forrás: https://github.com/sqndr/d8-theming-guide/blob/master/img/custom-theme.png
bitangjo.info.ymlstylesheets:all:- css/base.cssscreen:- css/components.cssprint:- css/print.css
# Stíluslap felülbírálása!!# Stíluslap „etávolítása”Change record: https://drupal.org/node/1876600stylesheets-override:- normalize.css!!stylesheets-remove:- jquery.ui.dialog.cssbitangjo.info.yml
SMACSS + BEMCSS coding standards: https://drupal.org/node/1886770Drupal 8
• Base• Layout• Module• State• ThemeSMACSS CSS fájl-struktúra
• Base• Layout• Module• State• ThemeSMACSS-szerű CSS fájl-struktúra
• Base• Layout• Component Module• State• ThemeSMACSS-szerű CSS fájl-struktúra
base• elements.css• typography.csslayout• layout.css• node-add.css• …components• buttons.css• buttons.theme.css• …theme• install-page.css• appearance- page.cssSMACSS-szerű CSS fájl-struktúra (smink)Forrás: seven theme
• 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.cssSMACSS-szerű CSS fájl-struktúra (modul)
John Albin: Managing complex projects with design componentsBEM
# Smink régiókForrás: seven.info.ymlregions:content: Contenthelp: Helppage_top: 'Page top'page_bottom: 'Page bottom'sidebar_first: 'First sidebar'regions_hidden:- sidebar_firstbitangjo.info.yml
hook_library_info()Drupal 7
bitangjo.libraries.ymlDrupal 8hook_library_info()Drupal 7Change record: https://drupal.org/node/2201089
base:version: 1.xjs:js/bitangjo.js: {}dependencies:- core/drupal- core/jquery- core/jquery.onceForrás: https://github.com/sqndr/d8-theming-guidebitangjo.libraries.yml
Forrás: https://github.com/sqndr/d8-theming-guidebitangjo.libraries.ymlpicker:version: 3.1.0remote: http://formstone.it/components/pickerjs:lib/picker/js/jquery.fs.picker.js: {}css:theme:lib/picker/css/jquery.fs.picker.css: {}dependencies:- core/jquery
bitangjo.info.yml*libraries:- bitangjo/base*Hol a picker? Nemsokára kiderül… ;)
BreakpointsDrupal 8
bartik.mobile:label: mobilemediaQuery: '(min-width: 0px)'weight: 0multipliers:- 1xbartik.narrow:label: narrowmediaQuery: 'all and (min-width: 560px) and (max-width: 850px)'weight: 1multipliers:- 1xbartik.wide:label: widemediaQuery: 'all and (min-width: 851px)'weight: 2multipliers:- 1xbartik.breakpoints.yml
Breakpoints » Responsive images• Responsive images modul• Mapping beállítása• Breakpoint group• Breakpoint – Image style
Breakpoints » Responsive images• Responsive images modul• Mapping beállítása• Breakpoint group• Breakpoint – Image style• RI image formatter• Mapping választása
Képstílusoka sminkbenDrupal 8
• 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.ymlKépstílusok a sminkben
uuid: 311e7c58-c64a-4c9e-b544-68b12b560e36langcode: enstatus: truedependencies: { }name: thumbnaillabel: 'Thumbnail (100×100)'effects:1cfec298-8620-4749-b100-ccb6c4500779:uuid: 1cfec298-8620-4749-b100-ccb6c4500779id: image_scaleweight: 0data:width: 100height: 100upscale: falsethird_party_settings: { }image.style.thumbnail.yml
*.tpl.phpDrupal 7
*.html.twigDrupal 8*.tpl.phpDrupal 7
BiztonságosGyorsÉrthetőPHPTemplate & Twig comparison: https://drupal.org/node/1918824*.html.twig
Twig coding standards: https://drupal.org/node/1823416*.html.twigváltozó{{ page.primary_menu }}
Twig coding standards: https://drupal.org/node/1823416*.html.twigfilter{{ content|without('links') }}
Twig coding standards: https://drupal.org/node/1823416{{ 'Home'|t }}*.html.twigfilter
Twig coding standards: https://drupal.org/node/1823416*.html.twigfordítás{% trans %}Submitted by{{ author_name|passthrough }}on{{ date|passthrough }}{% endtrans %}
Twig coding standards: https://drupal.org/node/1823416*.html.twigkomment{# Kód komment #}
Twig coding standards: https://drupal.org/node/1823416*.html.twigif funkció{% if site_slogan %}{{ site_slogan }}{% endif %}
Twig coding standards: https://drupal.org/node/1823416*.html.twigfor loop{% for user in users %}{{ user.username }}{% endfor %}
Twig coding standards: https://drupal.org/node/1823416*.html.twigTwig változó definiálása{% set foo="bar" %}{{ foo }}…
Twig coding standards: https://drupal.org/node/1823416*.html.twigTwig változó definiálása{%set classes = ['admin-list',compact ? 'compact',]%}!…!
Twig debugparameters:twig.config:debug: trueauto_reload: truecache: falsesites/default/services.yml
Twig debug
Twig debug$ cp example.settings.local.php default/settings.local.phpif (file_exists(__DIR__ . '/settings.local.php')) {include __DIR__ . '/settings.local.php';}…és a settings.php-ben:
template.phpDrupal 7
bitangjo.themeDrupal 8template.phpDrupal 7
Change record-ok: https://www.drupal.org/node/2352319, https://drupal.org/node/2169605bitangjo.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';}
Headless DrupalDrupal 8
!‑BöngészőWeboldal megjelnítéseHeadless DrupalAdatbázis‑PHP „adatszolgáltatás” !⬍JS adatfeldolgozás, HTML render
• 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/172169további infók
Tamás HajasDrupal consultantIntegral Vision Ltdintegralvision.huabout.me/tamashajas