szépségszalon a vertikális végtelenhez – drupal 8 sminkelés

Szépségszalon a Vertikális Végtelenhez

Drupal 8 sminkelés

Hajas TamásDrupal tanácsadó Integral Vision Kft

bitangjo.info

Drupal 7sites/all/themes/bitangjo/

bitangjo.info.ymlthemes/bitangjo/

Drupal 8

bitangjo.info

Drupal 7sites/all/themes/bitangjo/

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

https://drupal.org/node/1935708

!

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


https://www.drupal.org/node/2289511

A „Banán egyezség”

https://www.drupal.org/node/2289511

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

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

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

bitangjo.info.yml

stylesheets: all: - css/base.css screen: - css/components.css print: - css/print.css

# Stíluslap felülbírálása

!

!

# Stíluslap „etávolítása”


stylesheets-override:

- normalize.css

!

!

stylesheets-remove:

- jquery.ui.dialog.css

bitangjo.info.yml


SMACSS + BEM

CSS coding standards: https://drupal.org/node/1886770

Drupal 8


• Base • Layout • Module • State • Theme

SMACSS CSS fájl-struktúra

• Base • Layout • Module • State • Theme

SMACSS-szerű CSS fájl-struktúra

• Base • Layout • Component Module • State • Theme


• Base • Layout • Component Module

• State • Theme


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

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

<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

https://austin2014.drupal.org/session/managing-complex-projects-design-components

# 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

hook_library_info()

Drupal 7

bitangjo.libraries.yml

Drupal 8

hook_library_info()

Drupal 7



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


https://github.com/sqndr/d8-theming-guide

Forrás: https://github.com/sqndr/d8-theming-guide


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

https://github.com/sqndr/d8-theming-guide

bitangjo.info.yml*

libraries: - bitangjo/base

*Hol a picker? Nemsokára kiderül… ;)

Breakpoints

Drupal 8

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

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ílusok a sminkben

Drupal 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 sminkbebitangjo/config/install/image.style.style_name.yml

Képstílusok a sminkben

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

*.tpl.php

Drupal 7

*.html.twig

Drupal 8

*.tpl.php

Drupal 7

Biztonságos

Gyors

Érthető

PHPTemplate & Twig comparison: https://drupal.org/node/1918824

*.html.twig


Twig coding standards: https://drupal.org/node/1823416

*.html.twig változó

{{ page.primary_menu }}



*.html.twig filter

{{ content|without('links') }}



{{ 'Home'|t }}

*.html.twig filter



*.html.twig fordítás

{% trans %} Submitted by {{ author_name|passthrough }} on {{ date|passthrough }} {% endtrans %}



*.html.twig komment

{# Kód komment #}



*.html.twig if funkció

{% if site_slogan %} <div class="site-slogan"> {{ site_slogan }} </div> {% endif %}



*.html.twig for loop

<ul> {% for user in users %} <li> {{ user.username }} </li> {% endfor %} </ul>



*.html.twig Twig változó definiálása

{% set foo="bar" %}

{{ foo }}

…



*.html.twig Twig változó definiálása

{% set classes = [ 'admin-list', compact ? 'compact', ] %} !

… !<ul{{ attributes.addClass(classes) }}>


Twig debug

parameters: twig.config: debug: true auto_reload: true cache: false

sites/default/services.yml

Twig debug

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:

template.php

Drupal 7

bitangjo.theme

Drupal 8

template.php

Drupal 7

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


Headless Drupal

Drupal 8

!⬇

Böngésző Weboldal megjelnítése

Headless Drupal

Adatbá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/172169

további infók

https://drupal.org/theme-guide/8

http://j.mp/1qFSKXq

http://d8.sqndr.com

https://amsterdam2014.drupal.org/session/twig-and-new-drupal-8-theme-system




Tamás HajasDrupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas

http://integralvision.hu

http://about.me/tamashajas

http://integralvision.hu

szépségszalon a vertikális végtelenhez – drupal 8 sminkelés

Internet