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
330
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
100
What's new in CSS? Introduction to CSS Grid and CSS Custom Properties
thamas
0
72
Short Twig recipes for Drupalers
thamas
0
83
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
85
Other Decks in Technology
See All in Technology
型システムを知りたい人のための型検査器作成入門
mame
11
2.7k
バクラクのモノレポにおける AI Coding のための環境整備と {Roo,Claude} Code活用事例 / AI Coding in Bakuraku's Monorepo: Environment Setup & Case Studies with {Roo, Claude} Code
upamune
7
2.9k
Flutterアプリを⾃然⾔語で操作する
yukisakai1225
0
210
ゆるSRE #11 LT
okaru
1
370
セキュリティSaaS企業が実践するCursor運用ルールと知見 / How a Security SaaS Company Runs Cursor: Rules & Insights
tetsuzawa
1
3.1k
Information Architecture Recommoning: How Standardization Enables Differentiation
angioia
0
170
大手企業のAIツール導入の壁を越えて:サイバーエージェントのCursor活用戦略
gunta
34
18k
GitHub Copilot Use Cases at ZOZO
horie1024
1
350
Web Intelligence and Visual Media Analytics
weblyzard
PRO
1
6.1k
Tensix Core アーキテクチャ解説
tenstorrent_japan
0
240
Agent Development Kit によるエージェント開発入門
enakai00
18
2.7k
dbt Cloudの新機能を紹介!データエンジニアリングの民主化:GUIで操作、SQLで管理する新時代のdbt Cloud
sagara
0
130
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
770
Building a Modern Day E-commerce SEO Strategy
aleyda
41
7.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
What's in a price? How to price your products and services
michaelherold
245
12k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.7k
A designer walks into a library…
pauljervisheath
205
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
42
2.4k
How to train your dragon (web standard)
notwaldorf
92
6.1k
How GitHub (no longer) Works
holman
314
140k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
25
2.8k
Agile that works and the tools we love
rasmusluckow
329
21k
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