Future-proof styling in Drupal (8)
-
Upload
hajas-tamas -
Category
Technology
-
view
225 -
download
0
description
Transcript of Future-proof styling in Drupal (8)
![Page 1: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/1.jpg)
Future-proof styling in Drupal (8)by Tamás Hajas
![Page 2: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/2.jpg)
There is NO One Right Way!
![Page 3: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/3.jpg)
There is NO One Right Way!
![Page 4: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/4.jpg)
Team
![Page 5: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/5.jpg)
Team » Communication
![Page 6: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/6.jpg)
Coding Standards
![Page 8: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/8.jpg)
CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
![Page 9: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/9.jpg)
CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
![Page 10: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/10.jpg)
Comment your code!
![Page 11: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/11.jpg)
Team » Communication
![Page 13: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/13.jpg)
“code should be self-documenting”
![Page 14: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/14.jpg)
/** * Grid container * Must only contain '.cell' children. */ .grid { height: 100%; !
font-size: 0; !
white-space: nowrap; }
![Page 15: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/15.jpg)
/** * Grid container * Must only contain '.cell' children. */ .grid { height: 100%; /* Remove inter-cell whitespace */ font-size: 0; /* Prevent inline-block cells wrapping */ white-space: nowrap; }
![Page 17: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/17.jpg)
CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
[META] Architect our CSS – http://drupal.org/node/1921610
![Page 19: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/19.jpg)
SMACSS structure
• Base !
!
!
![Page 20: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/20.jpg)
SMACSS structure
• Base • Layout
!
!
!
![Page 21: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/21.jpg)
SMACSS structure
• Base • Layout • Module
!
![Page 22: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/22.jpg)
SMACSS structure
• Base • Layout • Module • State
![Page 23: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/23.jpg)
SMACSS structure
• Base • Layout • Module • State • Theme
![Page 24: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/24.jpg)
SMACSS-like
![Page 25: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/25.jpg)
SMACSS structure
• Base • Layout • Module • State • Theme
![Page 26: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/26.jpg)
SMACSS-like categories of Drupal 8
• Base • Layout • Component Module
• State • Theme
![Page 27: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/27.jpg)
CSS files for Drupal 8 modules
![Page 28: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/28.jpg)
• module_name.module.css (layout, component, state) !
CSS files for Drupal 8 modules
![Page 29: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/29.jpg)
• module_name.module.css (layout, component, state)
• module_name.theme.css
CSS files for Drupal 8 modules
![Page 30: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/30.jpg)
• module_name.module.css (layout, component, state)
• module_name.theme.css • module_name.admin.css
(layout, component, state)
CSS files for Drupal 8 modules
![Page 31: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/31.jpg)
• module_name.module.css (layout, component, state)
• module_name.theme.css • module_name.admin.css
(layout, component, state) • module_name.admin.theme.css
CSS files for Drupal 8 modules
![Page 32: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/32.jpg)
• 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
CSS files for Drupal 8 modules
![Page 33: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/33.jpg)
# Stylesheets override
!
!
# Remove not used stylesheets
Change record: https://drupal.org/node/1876600
stylesheets-override:
- system.theme.css
!
!
stylesheets-remove:
- node.module.css
mysubtheme.info.yml
![Page 34: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/34.jpg)
CSS files for Drupal 8 themes
![Page 35: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/35.jpg)
• base.css • layout.css • components.css
(components, -state, -theme)
CSS files for Drupal 8 themes
![Page 36: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/36.jpg)
base • normalize.css • elements.css layout • layout.css • layout--rtl.css • …
components • button.css • tabs.css • … (theme) • theme--light.css • theme--dark.css
CSS files for Drupal 8 themes
![Page 37: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/37.jpg)
base layout components shame.scss no-query.scss style.scss
Possible Sass file structure
config • _extendables.scss • _functions.scss • _mixins.scss • _variables.scss
![Page 38: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/38.jpg)
Tip: use Sass Globbing
@import "config/**/*", "base/**/*", "layout/**/*", "components/**/*";
https://github.com/chriseppstein/sass-globbing
![Page 39: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/39.jpg)
CSS formatting guidelines CSS file organization (for Drupal 8) CSS architecture (for Drupal 8)
![Page 40: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/40.jpg)
Overly complex selectors
CSS pitfalls: Relying on HTML structure
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
![Page 41: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/41.jpg)
Qualified selectors
CSS pitfalls: Relying on HTML structure
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
![Page 42: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/42.jpg)
Context based selector modification
CSS pitfalls:
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
![Page 43: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/43.jpg)
Descendant selectors with too generic classnames
CSS pitfalls:
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
![Page 44: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/44.jpg)
Using ID selector for styling
CSS pitfalls:
div.block .title a:link { #sidebar-first & { .node-19 & {} } }
![Page 45: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/45.jpg)
Using !important
CSS pitfalls:
div.block .title a:link { #sidebar-first & { .node-19 & { …!important; } } }
![Page 47: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/47.jpg)
body #content .data img:hover {} !!!! #content .data img :hover body 0*1000 + 1*100 + 2*10 + 2*1 = 122 0 1 2 2 » 122
Specificity example
![Page 48: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/48.jpg)
• Base • Layout • Component
• State • Theme
SMACSS-like categories of Drupal 8
![Page 49: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/49.jpg)
Component
UI Pattern
Module SMACSS
Object OOCSS
Block BEM
![Page 50: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/50.jpg)
Object Oriented Programming
See @crell’s OOP intro: http://drupalwatchdog.com/volume-3/issue-1/object-oriented-programming-101
![Page 51: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/51.jpg)
DRY
http://vicvapor.com/cracked-desert-background
![Page 52: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/52.jpg)
Don’t Repeat Yourself!
http://vicvapor.com/cracked-desert-background
![Page 53: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/53.jpg)
Reusable Repeatable
Component
![Page 54: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/54.jpg)
Reusable Repeatable
Component
less lines of code
![Page 55: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/55.jpg)
Reusable Repeatable
Component
less lines of code
more maintainable
![Page 56: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/56.jpg)
„Class names should communicate useful information to developers.” – Nicolas Gallagher
About HTML Semantics and Front-End Architecture
![Page 57: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/57.jpg)
.red-box {} !
.message--error {}
![Page 59: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/59.jpg)
• Base • Layout • Component
• Block• Element• Modifier• State• Theme
John Albin: Managing complex projects with design components
![Page 60: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/60.jpg)
<div class="flower__bed"> <div class="flower"> <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
Component • Block
![Page 61: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/61.jpg)
<div class="flower__bed"> <div class="flower"> <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
Component • Element
![Page 62: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/62.jpg)
<div class="flower__bed"> <div class="flower flower--tulip"> <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
Component • Modifier
![Page 63: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/63.jpg)
<div class="flower__bed"> <div class="flower 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
Component • State
![Page 64: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/64.jpg)
John Albin: Managing complex projects with design components
Component • State
.flover:hover {}
![Page 65: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/65.jpg)
@media "print" { .flover {} }
John Albin: Managing complex projects with design components
Component • State
![Page 66: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/66.jpg)
Proposal: A Style Guide for Seven
Progress bar component
![Page 67: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/67.jpg)
CSS architecture (for Drupal 8)
Progress bar component
<div class="progress progress--small"> <label class="label label--small">Uploading sunset.jpg</label> <div class="progress__track"> <div class="progress__bar" style="width: 29%"></div> </div> <div class="progress__description"> <div class="layout-pull">Uploaded 221 of 762KB</div> <strong class="layout-push">29%</strong> </div> <a class="progress__cancel" href="#" title="cancel"> <span class="visually-hidden">cancel</span> </a> </div>
![Page 68: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/68.jpg)
CSS architecture (for Drupal 8)
Progress bar component
/** * Progress Bar component */ .progress {} .progress__track {} .progress__bar {} .progress__description {} .progress__cancel {} .progress__cancel:focus, .progress__cancel:hover {} /** * Progress Bar small variant */ .progress--small .progress__track {} .progress--small .progress__bar {} .progress--small .progress__cancel {}
![Page 69: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/69.jpg)
Classicitis?!
![Page 70: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/70.jpg)
<div class="media attribution"> <a href="http://twitter.com/stubbornella" class="img"> <img src="http://stubbornella.com/profile_image.jpg" alt="me" /> </a> <div class="bd"> @Stubbornella 14 minutes ago </div> </div>
/* ====== media ====== */ .media {margin:10px;} .media, .bd {overflow:hidden; _overflow:visible; zoom:1;} .media .img {float:left; margin-right: 10px;} .media .img img{display:block;} .media .imgExt{float:right; margin-left: 10px;}
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
![Page 71: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/71.jpg)
%media { overflow: hidden; &:first-child { float: left; } &:last-child { overflow: hidden; } }
.status { @extend %media // ... } !.profile { @extend %media // ... }
http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css
![Page 72: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/72.jpg)
• Base • Layout • Component
• State • Theme
SMACSS-like categories of Drupal 8
![Page 73: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/73.jpg)
„Layouts where you put your components.” – John Ferris
https://austin2014.drupal.org/session/layout-design-patterns
![Page 74: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/74.jpg)
There is NO One Right Way!
![Page 75: Future-proof styling in Drupal (8)](https://reader037.fdocuments.net/reader037/viewer/2022110306/554f367eb4c905cd048b4d91/html5/thumbnails/75.jpg)
Tamás HajasDrupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas