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ás
Drupal tanácsadó
Integral Vision Kft

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

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

YAML szintaktika
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

bitangjo.info.yml
name: Bitangjó smink
!
!
description: Ez egy bitang jó smink! :)
version: 1.0
!
!
core: 8.x
type: theme
!
# engine: twig
!
base theme: classy
!
package: custom
screenshot: bitangjo.png
Creating a D8 sub-theme: https://drupal.org/node/2165673

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

Forrás: 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

bitangjo.info.yml
# Stíluslap felülbírálása
!
stylesheets-override:
- normalize.css
!
# Stíluslap „etávolítása”
!
stylesheets-remove:
- jquery.ui.dialog.css

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

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

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

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

SMACSS-szerű CSS fájl-struktúra (smink)
base
• elements.css
• typography.css
layout
• layout.css
• node-add.css
• …
components
• buttons.css
• buttons.theme.css
• …
theme
• install-page.css
• appearance-page.
css
Forrás: seven theme

SMACSS-szerű CSS fájl-struktúra (modul)
• 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

<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>
BEM
John Albin: Managing complex projects with design components

# Smink régiók
bitangjo.info.yml
regions:
content: Content
help: Help
page_top: 'Page top'
page_bottom: 'Page bottom'
sidebar_first: 'First sidebar'
regions_hidden:
- sidebar_first
Forrás: seven.info.yml

Drupal 7
hook_library_info()
Drupal 8
bitangjo.libraries.yml

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

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
Forrás: https://github.com/sqndr/d8-theming-guide

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

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

Drupal 8
Képstílusok
a sminkben

Képstílusok a sminkben
• 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

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

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

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

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

*.html.twig
filter
{{ content|without('links') }}

*.html.twig
filter
{{ 'Home'|t }}

*.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
sites/default/services.yml
parameters:
twig.config:
debug: true
auto_reload: true
cache: false

Twig debug
$ cp example.settings.local.php
default/settings.local.php
…és a settings.php-ben:
if (file_exists(__DIR__ . '/settings.local.php')) {
include __DIR__ . '/settings.local.php';
}

Drupal 7
template.php
Drupal 8
bitangjo.theme

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';
}
Change record-ok: https://www.drupal.org/node/2352319, https://drupal.org/node/2169605

Headless Drupal
Adatbázis
⬇
PHP
„adatszolgáltatás”
! ⬍
JS
adatfeldolgozás, HTML render
!⬇
Böngésző
Weboldal megjelnítése

további infók
• 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

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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

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

Ähnlich wie Szépségszalon a Vertikális Végtelenhez – Drupal 8 sminkelés (9)

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