Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ZURB Foundation 5: Clean + Organized

2,961 views

Published on

In this presentation I share my best practices working with ZURB Foundation. Keep your projects clean and organized and make your code more maintainable and readable.

Published in: Software
  • Login to see the comments

ZURB Foundation 5: Clean + Organized

  1. 1. ZURBFoundation5 Clean+Organized JamesStone.com 1 — Copyright 2015-2016, James Stone, All Rights Reserved.
  2. 2. Amostlycssframework · jQuery + JS: required by some components · Sass: CSS Preprocessor · Everything On by Default 2 — Copyright 2015-2016, James Stone, All Rights Reserved.
  3. 3. TheBasics 3 — Copyright 2015-2016, James Stone, All Rights Reserved.
  4. 4. JavaScript · Individual Imports Per Component · Import jQuery First · Activate FastClick.js for better mobile ux · Use DEFER Attribute 4 — Copyright 2015-2016, James Stone, All Rights Reserved.
  5. 5. UseSass · Allows you to quickly "theme" · Easily upgradeable via Bower · Extend ZURB Components with @mixins 5 — Copyright 2015-2016, James Stone, All Rights Reserved.
  6. 6. PresentationalClasses 6 — Copyright 2015-2016, James Stone, All Rights Reserved.
  7. 7. PresentationalClasses · always use .small-12 instead of .medium-12 or .large-12 · always start with the medium grid (unless mobile first) · then refine small + large as needed · if radically different use visibility classes 7 — Copyright 2015-2016, James Stone, All Rights Reserved.
  8. 8. beconsistent .show-for-small-only vs. .hide-for-small-only .hide-for-small-only vs. .show-for-medium-up pick one – consistency is key – keep the order keep the form 8 — Copyright 2015-2016, James Stone, All Rights Reserved.
  9. 9. wordorder class=" small-8 medium-9 large-10 columns small-centered " grid, columns, grid modifiers small to large offset, centered, push/pull 9 — Copyright 2015-2016, James Stone, All Rights Reserved.
  10. 10. omitanythingyoucan small-centered medium-centered large- uncentered small-centered medium-uncentered large- uncentered small-12 medium-12 large-12 10 — Copyright 2015-2016, James Stone, All Rights Reserved.
  11. 11. whenclassesgobad small-8 columns medium-offset-2 small-centered medium-uncentered large-pull-4 maybe it's time for a @mixin 11 — Copyright 2015-2016, James Stone, All Rights Reserved.
  12. 12. source: xkcd.com/844 12 — Copyright 2015-2016, James Stone, All Rights Reserved.
  13. 13. CSS OOCSS BEM Something Else? 13 — Copyright 2015-2016, James Stone, All Rights Reserved.
  14. 14. CSS · Use OOCSS Principals when it makes sense · Follow ZURB Foundation Naming Conventions (BEM is out) · Great Reference: SMACSS Book If you want to go full BEM – just use the sass mixins 14 — Copyright 2015-2016, James Stone, All Rights Reserved.
  15. 15. SassWorkflow · Grunt · Libsass (no Sass 3.3-3.4 features) · Sourcemaps or Inline Comments · Autoprefixer (config for sourcemaps) · Development vs. Production 15 — Copyright 2015-2016, James Stone, All Rights Reserved.
  16. 16. SassOrganization-app.scss 1. Brand Variables 2. ZURB Foundation Overrides 3. Foundation Imports 4. Components 5. Modules (Views, Templates) 6. Sitewide 7. Etc. 8. Live Prototyping 16 — Copyright 2015-2016, James Stone, All Rights Reserved.
  17. 17. /********************************/ /* ~/scss/brand/_variables.scss */ /********************************/ // set common colors and calculations $brand-light-blue: lighten($brand-blue, 20%); $brand-dark-gray-text: #333333; // set any other globals $brand-spacing: rem-calc(20); 17 — Copyright 2015-2016, James Stone, All Rights Reserved.
  18. 18. /********************************/ /* ~/scss/brand/_settings.scss */ /********************************/ // copy and paste from foundation/_settings.scss $primary-color: $brand-light-blue; // refactor same values or colors into brand/vars 18 — Copyright 2015-2016, James Stone, All Rights Reserved.
  19. 19. _settings.scss · not to be confused with the foundation/ foundation/_settings.scss · no dead sass vars · these can change from time-to-time, easy upgrade · can be thought of as the theme, skin, look of site · be careful, changes everything sitewide 19 — Copyright 2015-2016, James Stone, All Rights Reserved.
  20. 20. foundationimports · just pull from bower_components/ _foundation.scss · turn on / off what you need for performance · to leave @mixins set: $include-html-classes or include-html-n-classes · in theory they all work 20 — Copyright 2015-2016, James Stone, All Rights Reserved.
  21. 21. quicktip for rapid prototyping leave // @import "foundation"; and or // $include-html-classes: true; at the top and commented out. Then just uncomment when prototyping. Recomment and adjust when done. 21 — Copyright 2015-2016, James Stone, All Rights Reserved.
  22. 22. Components blocks of html + css used in more than one page Modules everything that is page sepcific Sitewide single elements / selectors on more than one page Shame/Drupalisms/etc. stuff that doesn't fit appropriately named Prototype work fast in app.scss but find it a home fast 22 — Copyright 2015-2016, James Stone, All Rights Reserved.
  23. 23. componentsWWZD? 23 — Copyright 2015-2016, James Stone, All Rights Reserved.
  24. 24. <a class="button small secondary disabled"></a> <button class="small secondary disabled"></button> <ul class="button-group"> <li><a class="button">Lorem.</a></li> <li><a class="button">Quo.</a></li> <li><a class="button">Reiciendis.</a></li> </ul> 24 — Copyright 2015-2016, James Stone, All Rights Reserved.
  25. 25. saywhatitis sayittheZURBway KISS 25 — Copyright 2015-2016, James Stone, All Rights Reserved.
  26. 26. $vars: true; @function magic-calc($some-value: true) { @return } @mixin my-component-base($some-value: true) { // css } ul.my-component { & li { & a.button { &.disabled { // ... } } } } 26 — Copyright 2015-2016, James Stone, All Rights Reserved.
  27. 27. nesting 27 — Copyright 2015-2016, James Stone, All Rights Reserved.
  28. 28. sassisprettysmart ul.my-component { } ul.my-component li { } ul.my-component li a.button { } ul.my-component li a.button.disabled { } makesrefactoringclassnamesfastandeasy 28 — Copyright 2015-2016, James Stone, All Rights Reserved.
  29. 29. my-component, another-component a { & small { } } becomes my-component small { } another-component a small { } watch out for my-component { & p, & a { /* each selector needs an & */ } } 29 — Copyright 2015-2016, James Stone, All Rights Reserved.
  30. 30. modules · same structure, same process, only the scope is different · based on project structure: views, templates, pages, etc. /* component */ .everything-else ul.my-component>li>a .everything-else /* module, wrap entire page with a div */ .view-index-find> .everything-else 30 — Copyright 2015-2016, James Stone, All Rights Reserved.
  31. 31. namingconventions · make it easy to find, have a direct 1-to-1 correlation · keep the list alphabetical scss/view/index/_find.scss scss/view/partial/auth/_header.scss scss/page/about-us/_mission.scss scss/template/blog/_article.scss 31 — Copyright 2015-2016, James Stone, All Rights Reserved.
  32. 32. exampleapp.scss @import "some-app/brand/defaults"; @import "some-app/brand/settings"; @import "settings"; // DO NOT MODIFY // For troubleshooting or prototyping, uncomment line below // @import "foundation"; 32 — Copyright 2015-2016, James Stone, All Rights Reserved.
  33. 33. // Performance: uncomment above and comment unused components so they don't generate CSS //@import "foundation/components/accordion"; @import "foundation/components/alert-boxes"; @import "foundation/components/block-grid"; @import "foundation/components/breadcrumbs"; @import "foundation/components/button-groups"; @import "foundation/components/buttons"; //@import "foundation/components/clearing"; //@import "foundation/components/dropdown"; //@import "foundation/components/dropdown-buttons"; //@import "foundation/components/flex-video"; @import "foundation/components/forms"; @import "foundation/components/grid"; @import "foundation/components/inline-lists"; //@import "foundation/components/joyride"; 33 — Copyright 2015-2016, James Stone, All Rights Reserved.
  34. 34. //@import "foundation/components/keystrokes"; @import "foundation/components/labels"; // @import "foundation/components/magellan"; @import "foundation/components/orbit"; @import "foundation/components/pagination"; @import "foundation/components/panels"; //@import "foundation/components/pricing-tables"; @import "foundation/components/progress-bars"; @import "foundation/components/reveal"; //@import "foundation/components/side-nav"; //@import "foundation/components/split-buttons"; @import "foundation/components/sub-nav"; @import "foundation/components/switches"; //@import "foundation/components/tables"; @import "foundation/components/tabs"; @import "foundation/components/thumbs"; @import "foundation/components/tooltips"; @import "foundation/components/top-bar"; @import "foundation/components/type"; //@import "foundation/components/offcanvas"; @import "foundation/components/visibility"; 34 — Copyright 2015-2016, James Stone, All Rights Reserved.
  35. 35. // VIEWS @import "some-app/view/about-us"; @import "some-app/view/article"; @import "some-app/view/become-a-member"; @import "some-app/view/contact"; @import "some-app/view/create-account"; @import "some-app/view/footer"; @import "some-app/view/header"; @import "some-app/view/index"; @import "some-app/view/share"; @import "some-app/view/verify"; 35 — Copyright 2015-2016, James Stone, All Rights Reserved.
  36. 36. // COMPONENTS @import "some-app/component/audio-player"; @import "some-app/component/card"; @import "some-app/component/datepicker"; @import "some-app/component/progress"; @import "some-app/component/rating"; @import "some-app/component/sidebar"; @import "some-app/component/slider"; @import "some-app/component/timeline"; @import "some-app/component/triangle"; @import "some-app/component/user-profile"; @import "some-app/component/visualization"; // SITEWIDE @import "some-app/drupalisms"; @import "some-app/sitewide"; 36 — Copyright 2015-2016, James Stone, All Rights Reserved.
  37. 37. JamesStone.com @JAMESSTONEco 37 — Copyright 2015-2016, James Stone, All Rights Reserved.

×