front-end style guides 

creating component inventories with drupal


brian krall, interaction designer


Who am I?



what is a front-end style guide?

  • Collection of elements that make-up the UI
  • Repeatable components and patterns

And even...

  • Best practices
  • Coding standards


Anything that can encourage a team to write consistent code







some examples!

animations, alerts, buttons, columns, grid, icons, colors, form elements, heading, listsPARAGRAPHS, tables, typography

giving coding instructions


Magic numbers are unlucky.  These are numbers that are used as quick fixes on a one-off basis. 

Example

.box { margin-top: 37px; }

enter responsive web design...


building a modern website with outdated design artifacts

  • When  building websites, the more you can define a design, the more fleshed out the actual site will be

  • With responsive sites,  designing full comps for every page at every screen size is not possible

So what changes?

talking to each other is like photoshop on steroids


"In order to effectively design for today and tomorrow’s Web, we must replace outdated design artifacts with real collaboration and communication. "

- BRAD FROST, ATOMIC DESIGN

clearly define roles

  • Take a look at your team. Maybe  you have a UX designer, interaction designer, front-end developer and Drupal architect.
  • If you are designing comps, may be more efficient for an interaction designer to create static comps and a front-end developer to begin building components in CSS.
  • If an interaction designer has some front-end skills, they may like designing in browser. 

EXPERIMENT.

what will a front-end style guide accomplish?

  • More efficient workflow
  • Consistency throughout the site
  • Build a design system modularly 
  • Clearly define design components
  • Get your design into code faster
  • Easier to maintain

one example workflow


Style tile → Wireframes → Roughs → Comps → Style guide → build/theme

another example workflow


STYLE TILE → WIREFRAMES → ROUGHS → COMPS in browser → STYLE GUIDE → BUILD/THEME

style guide module!

https://drupal.org/project/styleguide

  • From 2010
  • Helps visualize existing theme
  • Great for dumping all of the Drupal-y elements on a page

it's a nice tool, but it DOES NOT MAGICALLY CREATE A CUSTOM STYLE GUIDE FOR YOU

putting your style guide in code

See example: https://github.com/bkrall/ixd-style-guide

how to style the style guide


Zurb Foundation

https://drupal.org/project/zurb-foundation

foundation highlights

  1. Lightweight front-end framework
  2. Customizable small, medium and large grids
  3. Pick and choose which components you're using
  4. Build mobile-first
  5. Semantic, use any class you want to build layouts 
  6. Fully tested and cross-browser compatible (<IE8)
  7. Use templates for rapid prototyping
  8. Handy visibility classes
  9. Plenty of Drupal base theme and module support
  10. Goes hand-in-hand with Sass + Compass

customizing foundation


foundation add-on modules

  • Interchange - Serves up image sizes for appropriate device
  • Orbit - Responsive, touch-enabled image slider
  • Section - Turns field groups into tabs
  • Clearing - Responsive light boxes with any image
  • Twenty twenty - Highlight the visual differences between images

What does it look like with drupal?

http://simplytest.me/Enter zurb-foundation

modular thinking with css preprocessors and authoring frameworks


Sass

http://sass-lang.com

Compass

http://compass-style.org

use sass to inventory ui

base
_common.scss
_drupal.scss
_elements.scss
_mixins.scss
components
    _blocks.scss
    _buttons.scss
    _forms.scss
    _icons.scss
    _type.scss
layout
    _main.scss
    _header.scss
    _footer.scss

custom.scss
ie.scss

Sass HELPS YOU WRITE modular css

  • Global variables, $page-width, $heading, $button
  • Mixins, extends (@mixin, @extend)
  • Nesting

Way More...

compass saves you a ton of time

  • No more writing tedious vendor prefixes
  • Quickly write CSS for common elements, like inline lists

$ gem install compass
@import "compass/css3"

border box

Instead of... 

.border-box {
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; }


YOU Can use...

.border-box { @include box-sizing(border-box); }

ADD in livereload

  • Automatically refresh the browser when you save a file
  • Can also compile your Sass for you


Use Link CSS to use LiveReload with  Drupal while the inspector open.  Includes CSS files with <link> instead of @import 



front-end style guide examples

http://sideproject.io/front-end-and-ui-style-guides/





QUESTIONS?


@bkrall