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
300
Szépségszalon a vertikális végtelenhez – Drupal 8 front-end fejlesztés
thamas
0
120
Drupal 8 overview
thamas
0
270
Futureproof styling in Drupal
thamas
0
95
Hogyan írjunk fenntartható CSS-t?
thamas
0
190
Future-proof styling in Drupal (8)
thamas
0
88
Other Decks in Technology
See All in Technology
CSPヘッダー導入で実現するWebサイトの多層防御:今すぐ試せる設定例と運用知見
llamakko
1
260
Railsの限界を超えろ!「家族アルバム みてね」の画像・動画の大規模アップロードを支えるアーキテクチャの変遷
ojima_h
4
520
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
210
Kiroから考える AIコーディングツールの潮流
s4yuba
1
310
Tiptapで実現する堅牢で柔軟なエディター開発
kirik
1
150
ファインディにおける Dataform ブランチ戦略
hiracky16
0
210
Amazon CloudWatchのメトリクスインターバルについて / Metrics interval matters
ymotongpoo
3
280
Expertise as a Service via MCP
yodakeisuke
1
160
Microsoft Learn MCP/Fabric データエージェント/Fabric MCP/Copilot Studio-簡単・便利なAIエージェント作ってみた -"Building Simple and Powerful AI Agents with Microsoft Learn MCP, Fabric Data Agent, Fabric MCP, and Copilot Studio"-
reireireijinjin6
1
140
AI工学特論: MLOps・継続的評価
asei
10
2k
大規模組織にAIエージェントを迅速に導入するためのセキュリティの勘所 / AI agents for large-scale organizations
i35_267
6
330
Wasmで社内ツールを作って配布しよう
askua
0
150
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
Balancing Empowerment & Direction
lara
1
510
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Practical Orchestrator
shlominoach
189
11k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Code Review Best Practice
trishagee
69
19k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Six Lessons from altMBA
skipperchong
28
3.9k
Navigating Team Friction
lara
187
15k
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