O slideshow foi denunciado.
Seu SlideShare está sendo baixado. ×

ZURB Foundation 5: Clean + Organized

Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Anúncio
Carregando em…3
×

Confira estes a seguir

1 de 37 Anúncio

Mais Conteúdo rRelacionado

Diapositivos para si (18)

Anúncio

Semelhante a ZURB Foundation 5: Clean + Organized (20)

Anúncio

Mais recentes (20)

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.

×