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 14, 2015
Technology
0
110
Szépségszalon a vertikális végtelenhez – Drupal 8 front-end fejlesztés
Drupal sminkelés előadásom #webkonfhu 2015 változata.
http://webconf.hu/2015/program/index.php
Tamás Hajas
November 14, 2015
Tweet
Share
More Decks by Tamás Hajas
See All by Tamás Hajas
Variable fonts in the real world
thamas
0
82
What's new in CSS? Introduction to CSS Grid and CSS Custom Properties
thamas
0
60
Short Twig recipes for Drupalers
thamas
0
72
Futureproof styling (in Drupal 8)
thamas
1
250
Drupal 8 overview
thamas
0
250
Futureproof styling in Drupal
thamas
0
83
Szépségszalon a Vertikális Végtelenhez – Drupal 8 sminkelés
thamas
1
290
Hogyan írjunk fenntartható CSS-t?
thamas
0
170
Future-proof styling in Drupal (8)
thamas
0
64
Other Decks in Technology
See All in Technology
LINEヤフー新卒採用 コーディングテスト解説 アルゴリズム問題編
lycorp_recruit_jp
0
14k
Semantic Kernel の Agent 機能試してみた!
okazuki
1
200
LINE-ChatGPT 倫理問題を整理する全力肯定彼氏くん [LuC4]に訪れたサービス開始以来の最大の危機
o_ob
2
260
電子辞書にステータスバーを実装する
puhitaku
0
120
組織デバイスのための効率的なアプリケーション更新戦略
kenchan0130
0
420
Amazon CloudWatchで小さく始めるWebサービスのオブザーバビリティ / How to start Observability for Web Sevices with Amazon CloudWatch
sms_tech
3
140
今こそ変化対応力を向上させるとき 〜ログラスが FAST に挑戦する理由〜 / Why Loglass is Talking on the Challenge of Agile Framework FAST
shioyang
0
240
AWS Lambda と Amazon SQS で「わかった気になれる」FreeRTOS 入門
soracom
PRO
2
100
道具としてのGraphQLから見る用途や解決する課題
saboyutaka
0
100
Graph Database と Generative AI の素敵な関係
oracle4engineer
PRO
16
3.1k
見えづらい活動の成果の伝え方は日頃からめちゃくちゃ悩んでるけど、実際こんな取り組みをしな がら温度感を合わせにいってるよ / Conveying Hard-to-See Results
kakehashi
4
2.1k
The People First Approach to Engineering Success - DevNot 2024
zikriyeurkmez
0
200
Featured
See All Featured
Speed Design
sergeychernyshev
23
520
How to Ace a Technical Interview
jacobian
275
23k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
355
29k
A Philosophy of Restraint
colly
203
16k
Mobile First: as difficult as doing things right
swwweet
222
8.8k
Web development in the modern age
philhawksworth
205
10k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
92
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The Power of CSS Pseudo Elements
geoffreycrofte
71
5.3k
Transcript
Szépségszalon a Vertikális Végtelenhez 8
Szépségszalon a Vertikális Végtelenhez Drupal 8 sminkelés
Hajas Tamás Web Project Manager Front-end Developer Integral Vision Kft
Hajas Tamás thamas.github.io
Smink létrehozása
Hol? [gyökérkönyvtár]/themes/custom/[sminkneve]
None
Konfig fájlok
*.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok
*.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok
alap info CSS és JS örökölt CSS és JS felülbírálása
régiók
A Drupal 8 sminkjei Seven HTML, CSS, JS változhat Bartik
HTML, CSS, JS változhat Stark HTML, CSS, JS változhat Stable HTML, CSS, JS nem változhat <div></div> Drupal 8 core HTML, CSS, JS változhat Classy HTML, CSS, JS nem változhat <div class=“foo”></div> base theme: false base theme: classy base theme:
Drupal 8 alapsmink használat Klassz Sminkem Alakuló Sminkem Stable HTML,
CSS, JS nem változhat <div></div> Drupal 8 core HTML, CSS, JS változhat Classy HTML, CSS, JS nem változhat <div class=“foo”></div> Stabil Sminkem base theme: false base theme: classy base theme:
Drupal 8 alapsmink használat Klassz Sminkem base theme: classy klasszsminkem.info.yml
<div class="node node--article"> … </div> HTML kimenet (Nem fog változni Drupal 8.x-ben)
Drupal 8 alapsmink használat base theme: false alakulosminkem.info.yml <div class="node
node--article"> … </div> HTML kimenet (Megváltozhat! CSS, JS is!) Alakuló Sminkem
Drupal 8 alapsmink használat stabilsminkem.info.yml Stabil Sminkem base theme nincs
megadva <div> … </div> HTML kimenet (Nem fog változni Drupal 8.x-ben) Change record: https://www.drupal.org/node/2580687
*.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok
# Libraries libraries: -sminkem/global-assets global-assets: version: 1.x css: theme: css/style.css:
{} css/print.css: { media: print } js: js/script.js: {} dependencies: - core/jquery - core/jquery.once sminkem.info.yml sminkem.libraries.yml https://www.drupal.org/theme-guide/8/assets
Change record: https://www.drupal.org/node/2497313 libraries override / extend sminkem.info.yml
Change record: https://www.drupal.org/node/2497313 libraries override / extend sminkem.info.yml
• Base • Layout • Component Module • State •
Theme SMACSS-szerű CSS fájl-struktúra
<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
*.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok
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
None
*.info.yml *.libraries.yml *.breakpoints.yml *.theme Smink konfig fájlok
bartik.theme
Sablonrendszer
html page region region region region node block field field
field field field field
None
Twig sablonok https://www.drupal.org/theme-guide/8/twig
block.html.twig
Twig coding standards: https://drupal.org/node/1823416 *.html.twig {{ változó }} {# kód
komment #} {% utasítás %}
{% if site_slogan %} <div class="site-slogan"> {{ site_slogan }} </div>
{% endif %} {# Show slogan if it is set #} *.html.twig
$yo[‘drupal_where’]->is[‘und’][0]–>my_data Drupal 7 :(
*.html.twig változón elemének megjelenítése {{ content.links.readmore }}
*.html.twig változó megjelenítése kihagyással {{ content|without('image') }} változó (tömb) szűrő
változó elemének neve
{{ html }} {{ page }} {{ page.header }} {{
page.aside }} {{ page.footer }} {{ page.content }} {{ content }} {{ submitted }} {{ tags }} {{ text }} {{ image }} field field
{{ html }} {{ page }} {{ page.header }} {{
page.aside }} {{ page.footer }} {{ page.content }} {{ content|without(‘image’) }} {{ submitted }} {{ tags }} {{ text }} {{ content.image }}
{{ html }} {{ page }} {{ page.header }} {{
page.aside }} {{ page.footer }} {{ page.content }} {{ content|without(‘image’,’tags’) }} {{ submitted }} {{ content.tags }} {{ text }} {{ content.image }}
https://www.drupal.org/node/2296163 {{ username|raw }} *.html.twig autoescape Kép: http://www.legalleadersblog.com/2012/04/30/ you-gotta-feel-sorry-for-those-angry-difficult-partners/
{% set foo="Bar" %} {{ foo }} … Bar *.html.twig
változó definiálása utasítás változó értéke változó neve eredmény
*.html.twig változó definiálása tömb tartalomtípus pl. „article” összefűzés
{<div{{ attributes }}> block.html.twig html attribútumok
<article{{ attributes.addClass(classes) }}> *.html.twig attribútumok kezelése
attribútumok kezelése *.html.twig
{% trans %} Submitted by {{ author_name|passthrough }} on {{
date|passthrough }} {% endtrans %} {{ ‘webconf’|t }} *.html.twig fordítás
XYZ oldal Copyleft… T artalom címe Twig block
Twig block page.html.twig
Twig block page--front.html.twig
Twig block page.html.twig XYZ oldal Copyleft… Üdv a címlapon!
Eszközök
parameters: twig.config: debug: true auto_reload: true cache: false sites/default/services.yml Twig
debug
Twig debug
Twig debug
Forrás: https://drupalize.me/blog/201405/lets-debug-twig-drupal-8 Devel + Devel Kint modulok
• https://drupal.org/theme-guide/8 • Change records (theme): http://j.mp/1qFSKXq • https://events.drupal.org/barcelona2015/ sessions/drupal-8-theming-0
• 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 Nagyban építettem erre!
Hajas Tamás Web Project Manager Front-end Developer Integral Vision Kft
integralvision.hu thamas.github.io