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
120
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
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
Drupal 8 overview
thamas
0
270
Futureproof styling in Drupal
thamas
0
95
Szépségszalon a Vertikális Végtelenhez – Drupal 8 sminkelés
thamas
1
330
Hogyan írjunk fenntartható CSS-t?
thamas
0
190
Future-proof styling in Drupal (8)
thamas
0
87
Other Decks in Technology
See All in Technology
American airlines ®️ USA Contact Numbers: Complete 2025 Support Guide
airhelpsupport
0
380
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
270
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
310
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
2
7k
事業成長の裏側:エンジニア組織と開発生産性の進化 / 20250703 Rinto Ikenoue
shift_evolve
PRO
2
21k
Zephyr RTOSを使った開発コンペに参加した件
iotengineer22
1
220
Delegating the chores of authenticating users to Keycloak
ahus1
0
140
整頓のジレンマとの戦い〜Tidy First?で振り返る事業とキャリアの歩み〜/Fighting the tidiness dilemma〜Business and Career Milestones Reflected on in Tidy First?〜
bitkey
2
16k
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
160
MobileActOsaka_250704.pdf
akaitadaaki
0
120
SEQUENCE object comparison - db tech showcase 2025 LT2
nori_shinoda
0
140
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.5k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Into the Great Unknown - MozCon
thekraken
40
1.9k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Unsuck your backbone
ammeep
671
58k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
950
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Statistics for Hackers
jakevdp
799
220k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Producing Creativity
orderedlist
PRO
346
40k
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