![BASE RULESThe most basic elements that will exist on the page. Usually neveroverridden. rests fall into this category. a { color: #666; } a:hover { color: #333; text-decoration: underline; } input[type=text], input[type=password] { border: 1px solid #CCC; } One Div To Rule Them All! // @leahmarsh](https://image.slidesharecdn.com/one-div-presentation-leah-wagner-141031101135-conversion-gate02/85/One-Div-To-Save-Them-All-Controlling-Drupal-Div-s-and-Implementing-a-Modular-CSS-Philosophy-5-320.jpg)
![Bootstrap [part 2]](https://cdn.slidesharecdn.com/ss_thumbnails/javanik-170208155331-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular CSS Philosophy (20)
Ad
Recently uploaded (20)
Ad
One Div To Save Them All: Controlling Drupal Div's and Implementing a Modular CSS Philosophy
- 1. ONE DIVTO RULE THEM ALL! CONTROLLING DRUPAL DIV’S AND IMPLEMENTING A MODULAR CSS PHILOSOPHYby Leah Wagner // from The Jibe // @leahmarsh@thejibeOne Div To Rule Them All! // @leahmarsh
- 2. THE AGENDAWhat is Modular CSS and how it can be helpful? How you are probably already using this philosophy. (whether you know it or not.) How a set file structure and naming conventions makes thisphilosophy work best. How preprocessors like SASS and adding on tools like SASS- globbing and Compass can improve your workflow. One Div To Rule Them All! // @leahmarsh
- 3. THE AGENDAHow do we apply this to Drupal when so much of our HTML ispre-rendered for us? Using theme tpl filesUsing contributed modulesUsing contributed themesOne Div To Rule Them All! // @leahmarsh
- 4. WHAT IS MODULAR CSS? TRUST ME, YOU HAVE SEEN THIS BEFORE... One Div To Rule Them All! // @leahmarsh
- 5. BASE RULESThe most basic elements that will exist on the page. Usually neveroverridden. rests fall into this category. a { color: #666; } a:hover { color: #333; text-decoration: underline; } input[type=text], input[type=password] { border: 1px solid #CCC; } One Div To Rule Them All! // @leahmarsh
- 6. LAYOUT RULESThere are layout rules for major page regions and smallercomponents on the page. #header, #footer { width: 100%; background: #333; } #main { width: 100%; background: #FFF; } #content { width: 75%; display: inline; float: left; } #sidebar { width: 25%; display: inline; float: right; } .l-grid-4 li { width: 25%; display: inline; float: left;} .l-inline { display: inline; } One Div To Rule Them All! // @leahmarsh
- 7. COMPONENT RULES (OR MODULES) How many times to we style something like this? <div id="block-view-1" class="view"> <h1>My views listing title</h1> <ul> <li> <h3><a href="/node/1">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> <li> <h3><a href="/node/2">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> <li> <h3><a href="/node/3">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> </ul> </div> One Div To Rule Them All! // @leahmarsh
- 8. COMPONENT RULES (OR MODULES) And we might start styling with something like this: To reuse this code, we do something like this: #block-view-1 li { border-bottom: 1px solid #CCC; padding: 20px 0; } #block-view-1 h3 a { color: #333; } #block-view-1 p { font-style: italic; } #block-view-1 li, #block-view-2 li { border-bottom: 1px solid #CCC; padding: 20px 0; } #block-view-1 h3 a, #block-view-2 h3 a { color: #333; } #block-view-1 p, #block-view-2 p { font-style: italic; } One Div To Rule Them All! // @leahmarsh
- 9. COMPONENT RULES (OR MODULES) Instead we define a reusable class: <div id="block-view-1" class="list-title-body"> <h1>My views listing title</h1> <ul> <li> <h3><a href="/node/1">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> <li> <h3><a href="/node/2">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> <li> <h3><a href="/node/3">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> </ul> </div> One Div To Rule Them All! // @leahmarsh
- 10. COMPONENT RULES (OR MODULES) This is what we have in place: We are NOT going to: We going to define a subcomponent with the overrides: .list-title-body li { border-bottom: 1px solid #CCC; padding: 20px 0; } .list-title-body h3 a { color: #333; } .list-title-body p { font-style: italic; } #block-view-2 li:nth-child(2n) { background: #DDD; } ul.striped li:nth-child(2n) { background: #DDD; } .list-title-body ul.striped li:nth-child(2n) { background: #DDD; } .list-title-body--striped li:nth-child(2n) { background: #DDD; } One Div To Rule Them All! // @leahmarsh
- 11. COMPONENT RULES (OR MODULES) Then we add our subcomponent class: <div id="block-view-2" class="list-title-body list-title-body--striped"> <h1>My views listing title</h1> <ul> <li> <h3><a href="/node/1">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> <li> <h3><a href="/node/2">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> <li> <h3><a href="/node/3">Lorem Ipsum Dolor</a></h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p> </li> </ul> </div> One Div To Rule Them All! // @leahmarsh
- 12. COMPONENT RULES (OR MODULES) With a preprocessor, we can extend our class: We only need one class because our SASS looks like this: <div id="block-view-2" class="list-title-body--striped"> <h1>My views listing title</h1> <ul><li>...</li></ul> </div> .list-title-body li border-bottom: 1px solid #CCC padding: 20px 0 .list-title-body--striped @extend .list-title-body li:nth-child(2n) background: #DDDOne Div To Rule Them All! // @leahmarsh
- 13. STATE RULESState rules are used for styles that have a JS dependency and thisis indicated with the 'is-' prefix. Our classes might look like: <header id="header"> <nav class="is-collapsed"> <ul> <li><a href="/home">Home</a></li> <li><a href="/about">About</a></li> </ul> </nav> </header> nav { height: auto; } nav.is-collapsed { height: 0px; } One Div To Rule Them All! // @leahmarsh
- 14. THEME RULESStyle your components for different themes or colour pallets // As defined by the component .button { background: #CCC; border: #000; border-radius: 5px; } // As defined in red.css .button { background: #FF0000; } One Div To Rule Them All! // @leahmarsh
- 15. ORGANIZATIONFile structure and naming conventionsOne Div To Rule Them All! // @leahmarsh
- 16. WHAT IS MODULAR CSS? To get us started, an example we see everyday in Drupal. .views-row { border-bottom: 1px solid #CCC; padding: 20px 0; } .views-row-last { border-bottom: none; } <div id="block-view-1" class="view"> <div class="views-row views-row-first"></div> <div class="views-row"></div> <div class="views-row views-row-last"></div> </div> One Div To Rule Them All! // @leahmarsh
- 17. WHAT IS MODULAR CSS? This is not something you download, but a philosophy you usewhen you style your projectObject Oriented CSS (OOCSS) Block, Element, Modifier (BEM) Don’t Repeat Yourself CSS (DRY CSS) Atomic CSS Scalable and Modular Architecture for CSS (SMACSS) Read more... Read more... Read more... Read more... Read more... One Div To Rule Them All! // @leahmarsh
- 18. WHY (OR WHY NOT) SMACSS? This is the wrong questionD8 has adopted this philosophy for core dev WHY USE A MODULAR CSS PHILOSOPHY? Your CSS with have a high level of specificity while remaininghighly reusable. You (should) never have to rewrite code. Potentially, share codeacross different projects. Avoid CSS conflicts and changes breaking other elements. Read more... One Div To Rule Them All! // @leahmarsh
- 19. GETTING TO KNOWSMACSSOne Div To Rule Them All! // @leahmarsh
- 20. CATEGORIZATION5 different categories of codeBaseLayoutComponents (or Modules) StateThemeOne Div To Rule Them All! // @leahmarsh
- 21. ORGANIZATIONSample folder structure <base> - normalize.css - base.sass <components> - <bourbon> - _icon.sass - _button.sass - _list-title-body.sass - _list-title-body-image.sass - style.sass <layout> - <bourbon neat> - layout.sass <states> - state.sass <themes> - red.sassOne Div To Rule Them All! // @leahmarsh
- 22. ORGANIZATIONNaming conventions // Layout .l-grid-4 // State .is-collapsed // Components .list-title-body // Subcomponents .list-title-body--stripedOne Div To Rule Them All! // @leahmarsh
- 23. CONTROLLINGDRUPAL MARKUPBringing us back to One Div To Rule Them All! TPL filesModulesThemesOne Div To Rule Them All! // @leahmarsh
- 24. CONTROLLING DRUPAL MARKUPTPL Files // field.tpl.php <div class="<?php print $classes; ?>"<?php print $attributes; ?>> <?php if (!$label_hidden): ?> <div class="field-label"<?php print $title_attributes; ?>><?php print $label ?> <?php endif; ?> <div class="field-items"<?php print $content_attributes; ?>> <?php foreach ($items as $delta => $item): ?> <div class="field-item <?php print $delta % 2 ? 'odd' : 'even'; ?>"<? <?php endforeach; ?> </div> </div> One Div To Rule Them All! // @leahmarsh
- 25. CONTROLLING DRUPAL MARKUPTPL Files // field--field-node-link.tpl.php <button class="btn-read-more"> <?php print render($item); ?> </button> One Div To Rule Them All! // @leahmarsh
- 26. CONTROLLING DRUPAL MARKUPModule: FencesEnable class overridesSelect HTML5 element on a per field basisOne Div To Rule Them All! // @leahmarsh
- 27. CONTROLLING DRUPAL MARKUPModule: Display Suite ExtrasEnable Display Suite Extras and activate fieldOne Div To Rule Them All! // @leahmarsh
- 28. CONTROLLING DRUPAL MARKUPModule: Display Suite ExtrasSelect HTML5 element on a per field basisOne Div To Rule Them All! // @leahmarsh
- 29. CONTROLLING DRUPAL MARKUPModule: ViewsCreate a custom classOne Div To Rule Them All! // @leahmarsh
- 30. CONTROLLING DRUPAL MARKUPModule: ViewsCleanup your row markupOne Div To Rule Them All! // @leahmarsh
- 31. CONTROLLING DRUPAL MARKUPModule: ViewsCustomize your field markupOne Div To Rule Them All! // @leahmarsh
- 32. CONTROLLING DRUPAL MARKUPModule: Clean MarkupCreate a custom block classOne Div To Rule Them All! // @leahmarsh
- 33. CONTROLLING DRUPAL MARKUPModule: Clean MarkupCreate a custom panel pane or panel region classOne Div To Rule Them All! // @leahmarsh
- 34. CONTROLLING DRUPAL MARKUPThemeFor when you find yourself repeating yourself... Much of this can be configured on the theme level with TPLCreate your own starter theme or a collection of TPL filesCapture settings you are implementing on every projectLook to other themes for inspirationOne Div To Rule Them All! // @leahmarsh
- 35. WORKING WITHBEST PRACTICESModular CSS helps us... Reinforce clean markupWhile you are thinking about classes, you think about using thecorrect HTML5 markupThis concept lends itself to online style tiles or style guidesOne Div To Rule Them All! // @leahmarsh
- 36. THE ENDLET'S CHAT! by Leah Wagner // from The Jibe // @leahmarsh@thejibeOne Div To Rule Them All! // @leahmarsh