front-end style guides
creating component inventories with drupal
brian krall, interaction designer
Who am I?
-
Brian Krall
- Interaction Designer at Duo Consulting
- @bkrall on Twitter and Medium
- 6+ years of interactive agency experience
- Member of 1871
- Creator of http://sideproject.io
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, lists, PARAGRAPHS, 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!
- 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
foundation highlights
- Lightweight front-end framework
- Customizable small, medium and large grids
- Pick and choose which components you're using
- Build mobile-first
- Semantic, use any class you want to build layouts
- Fully tested and cross-browser compatible (<IE8)
- Use templates for rapid prototyping
- Handy visibility classes
- Plenty of Drupal base theme and module support
- 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
Compass
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...
- Functions
- Math
- Partials, @imports in one stylesheet
- Nested media queries
- Sass maps
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
Get LiveReload and chrome extension.
front-end style guide examples
QUESTIONS?
Front-end Style Guides with Drupal
By Brian Krall
Front-end Style Guides with Drupal
- 3,552