Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Szépségszalon a Vertikális Végtelenhez – Drupal...
Search
Tamás Hajas
November 15, 2014
Technology
1
340
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
Share
More Decks by Tamás Hajas
See All by Tamás Hajas
Variable fonts in the real world
thamas
0
110
What's new in CSS? Introduction to CSS Grid and CSS Custom Properties
thamas
0
72
Short Twig recipes for Drupalers
thamas
0
84
Futureproof styling (in Drupal 8)
thamas
1
310
Szépségszalon a vertikális végtelenhez – Drupal 8 front-end fejlesztés
thamas
0
120
Drupal 8 overview
thamas
0
280
Futureproof styling in Drupal
thamas
0
95
Hogyan írjunk fenntartható CSS-t?
thamas
0
190
Future-proof styling in Drupal (8)
thamas
0
90
Other Decks in Technology
See All in Technology
プロジェクトマネジメントは不確実性との対話だ
hisashiwatanabe
0
130
Claude Codeから我々が学ぶべきこと
oikon48
10
2.8k
AWSの最新サービスでAIエージェント構築に楽しく入門しよう
minorun365
PRO
8
390
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
2
530
2025新卒研修・Webアプリケーションセキュリティ #弁護士ドットコム
bengo4com
1
710
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
2
1.6k
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
3
1.3k
Google Agentspaceを実際に導入した効果と今後の展望
mixi_engineers
PRO
3
770
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
220
オブザーバビリティ文化を組織に浸透させるには / install observability culture
mackerelio
0
150
自治体職員がガバクラの AWS 閉域ネットワークを理解するのにやって良かった個人検証環境
takeda_h
0
230
ロールが細分化された組織でSREと協働するインフラエンジニアは何をするか? / SRE Lounge #18
kossykinto
0
230
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
525
40k
Agile that works and the tools we love
rasmusluckow
329
21k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
[RailsConf 2023] Rails as a piece of cake
palkan
56
5.8k
RailsConf 2023
tenderlove
30
1.2k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3k
What's in a price? How to price your products and services
michaelherold
246
12k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
Facilitating Awesome Meetings
lara
55
6.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Transcript
Szépségszalon a Vertikális Végtelenhez Drupal 8 sminkelés
Hajas Tamás Drupal tanácsadó Integral Vision Kft
bitangjo.info Drupal 7 sites/all/themes/bitangjo/
bitangjo.info.yml themes/bitangjo/ Drupal 8 bitangjo.info Drupal 7 sites/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
! 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”
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
# 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
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 SMACSS-szerű CSS fájl-struktúra
• Base • Layout • Component Module • State •
Theme SMACSS-szerű CSS fájl-struktúra
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
# 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 Change record: https://drupal.org/node/2201089
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
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
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
None
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 sminkbe bitangjo/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 }}
Twig coding standards: https://drupal.org/node/1823416 *.html.twig filter {{ content|without('links') }}
Twig coding standards: https://drupal.org/node/1823416 {{ 'Home'|t }} *.html.twig filter
Twig coding standards: https://drupal.org/node/1823416 *.html.twig fordítás {% trans %} Submitted
by {{ author_name|passthrough }} on {{ date|passthrough }} {% endtrans %}
Twig coding standards: https://drupal.org/node/1823416 *.html.twig komment {# Kód komment #}
Twig coding standards: https://drupal.org/node/1823416 *.html.twig if funkció {% if site_slogan
%} <div class="site-slogan"> {{ site_slogan }} </div> {% endif %}
Twig coding standards: https://drupal.org/node/1823416 *.html.twig for loop <ul> {% for
user in users %} <li> {{ user.username }} </li> {% endfor %} </ul>
Twig coding standards: https://drupal.org/node/1823416 *.html.twig Twig változó definiálása {% set
foo="bar" %} {{ foo }} …
Twig coding standards: https://drupal.org/node/1823416 *.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
None
• 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
Tamás Hajas Drupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas