zurb foundation 5: clean + organized

ZURB Foundation 5Clean + OrganizedJamesStone.com

1 — Copyright 2015-2016, James Stone, All Rights Reserved.

A mostly css framework· jQuery + JS: required by some components

· Sass: CSS Preprocessor· Everything On by Default


JavaScript· Individual Imports Per Component

· Import jQuery First· Activate FastClick.js for better mobile ux

· Use DEFER Attribute


Use Sass· Allows you to quickly "theme"· Easily upgradeable via Bower

· Extend ZURB Components with @mixins


Presentational Classes


Presentational Classes· 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


be consistent.show-for-small-only vs. .hide-for-small-only

.hide-for-small-only vs. .show-for-medium-uppick one – consistency is key – keep the order

keep the form


word orderclass=" small-8 medium-9 large-10 columns

small-centered "grid, columns, grid modifiers

small to largeoffset, centered, push/pull


omit anything you cansmall-centered medium-centered large-

uncenteredsmall-centered medium-uncentered large-

uncenteredsmall-12 medium-12 large-12


when classes go badsmall-8 columns medium-offset-2 small-centered

medium-uncentered large-pull-4maybe it's time for a @mixin


CSSOOCSS BEM Something Else?


CSS· Use OOCSS Principals when it makes sense

· Follow ZURB Foundation Naming Conventions (BEM is out)

· Great Reference: SMACSS BookIf you want to go full BEM – just use the sass

mixins14 — Copyright 2015-2016, James Stone, All Rights Reserved.

Sass Workflow· Grunt

· Libsass (no Sass 3.3-3.4 features)· Sourcemaps or Inline Comments

· Autoprefixer (config for sourcemaps)· Development vs. Production


Sass Organization - app.scss1. Brand Variables2. ZURB Foundation Overrides3. Foundation Imports4. Components5. Modules (Views, Templates)6. Sitewide7. Etc.8. Live Prototyping


/********************************//* ~/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);


/********************************//* ~/scss/brand/_settings.scss *//********************************/

// copy and paste from foundation/_settings.scss$primary-color: $brand-light-blue;// refactor same values or colors into brand/vars


_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


foundation imports· 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


quicktipfor 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.


Components blocks of html + css used in more than one page

Modules everything that is page sepcificSitewide single elements / selectors on more

than one pageShame/Drupalisms/etc. stuff that doesn't fit

appropriately namedPrototype work fast in app.scss but find it a home

fast


<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>


say what it issay it the ZURB way

KISS25 — Copyright 2015-2016, James Stone, All Rights Reserved.

$vars: true;@function magic-calc($some-value: true) { @return }@mixin my-component-base($some-value: true) { // css }

ul.my-component { & li { & a.button { &.disabled { // ... } } }}


sass is pretty smartul.my-component { }ul.my-component li { }ul.my-component li a.button { }ul.my-component li a.button.disabled { }

makes refactoring class names fast and easy


my-component, another-component a { & small { }}

becomesmy-component small { }another-component a small { }

watch out formy-component { & p, & a { /* each selector needs an & */ }}


modules· same structure, same process, only the scope is

different· based on project structure: views, templates,

pages, etc./* component */.everything-elseul.my-component>li>a.everything-else

/* module, wrap entire page with a div */.view-index-find> .everything-else


naming conventions· make it easy to find, have a direct 1-to-1

correlation· keep the list alphabeticalscss/view/index/_find.scss

scss/view/partial/auth/_header.scssscss/page/about-us/_mission.scssscss/template/blog/_article.scss


example app.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";


// 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";


//@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";


// 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";


// 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";


JamesStone.com@JAMESSTONEco


zurb foundation 5: clean + organized

Software