Living Styleguides: Build Your Own Bootstrap

LIVING STYLEGUIDES
HOW TO BUILD YOUR OWN BOOTSTRAP

ABOUT JAMES STONE
> Design Systems Engineer
> Build performant & organized front-end code for
agencies, enterprises, and startups
> The in-between for design & engineering
> ZURB Foundation Certified Preferred Professional
2 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017

DARTMOUTH BRAND GUIDELINES 20141
1
Source: communications.dartmouth.edu

WHAT ARE WE LOOKING FOR2
> Front-end code, templates, layouts along with developer
focused documentation about how to use it.
> Focus on Sass variables, mixins, HTML, and CSS classes.
2
This slide is taken from Living (Coded) Styleguide in 60 minutes.

THE LIVING (CODED) STYLEGUIDE
> Living means rebuilding automatically + living within
the CSS context of the project

MOST IMPORTANT BITS3
> color variable names, examples, and use
> spacing variables
> coded example pairs (HTML + Live Example + Docs)
3
This slide is taken from Living (Coded) Styleguide in 60 minutes.

#BYOB
> Mark Otto, Creator of Bootstrap, FOWA 2013 in London4
> For existing projects use your previous work.
Organization is key.
> For new projects in a team environment extend then
piggyback an existing front-end framework5
.
5
Further Reading: Save on Development Costs by Using a Framework
4
Build your own Bootstrap by Mark Otto

LET'S JUST COPY THE GOOD BITS
> Architecture, but not too much.
> Code Example Pairs
> Easy Navigation
> Make it Living

BOOTSTRAP AS A STYLEGUIDE 6
6
Bootstrap Components: Card

PROCESS: FRAMEWORK
> 1. Break up Sass up into logical files and sections:
sitewide, helpers, navigation, etc.
> 2. Time Saver: Create a master link back to the
framework of choice + mention major patterns used.
> 3. Time Saver: Create a heading for each logical section,
then for each new or modified component.

PROCESS: FRAMEWORK CONT.
> 4. Time Saver: Copy and paste from source or build a
pattern in HTML that is demonstrative for each.
> 5. Add additional documentation such as modifier
classes, options or context for each example if needed.
> 6. Package and share with your team.

HOW DO WE CREATE IT?
> Answer: ZURB Style Sherpa
> Yes, it works with Bootstrap or your own internal code
> Part of the ZURB Template: Panini, Style Sherpa, Gulp
> A static site generator for Living Styleguides

STEPS
1. Use ZURB Foundation + ZURB Template or reconfigure
based on this starter project for your use case.
2. Add all of your patterns.
3. Customize the template if necessary.
4. Hook up to auto-deployment / hosting service. I
recommend Netlify.

EXAMPLE 1: REFERRING TO FRAMEWORK
DOCS WITH SPECIFICITY
# The Grid
Please refer to the ZURB Foundation 6 documentation on the
[Flexbox grid](https://foundation.zurb.com/sites/docs/flex-grid.html).

EXAMPLE 2: COMPONENT
# Menu Colours
This provides a colored set of swatches. Please note that the color
must be set by an inline style. This is to allow future CMS
configuration of the color displayed.
```html_example
<h3>Main Colours</h3>
<ul class="menu menu-colors">
<li><a style="background:#30ac9a;">green</a></li>
<li><a style="background:#496276;">blue</a></li>
<li><a style="background:#aa9f9d;">grey</a></li>
<li><a style="background:#ffffff;">white</a></li>
</ul>
```

EXAMPLE 2: COMPONENT 7
7
Marcus Handa Design System: Styleguide.

james@jamesstone.com
@JamesStoneCo
www.JamesStone.com

Living Styleguides: Build Your Own Bootstrap

More Related Content

Similar to Living Styleguides: Build Your Own Bootstrap

Recently uploaded

Living Styleguides: Build Your Own Bootstrap