Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
LIVING STYLEGUIDES
HOW TO BUILD YOUR OWN BOOTSTRAP
ABOUT JAMES STONE
> Design Systems Engineer
> Build performant & organized front-end code for
agencies, enterprises, and s...
DARTMOUTH BRAND GUIDELINES 20141
1
Source: communications.dartmouth.edu
3 — James Stone, Design Systems Engineer (jamessto...
WHAT ARE WE LOOKING FOR2
> Front-end code, templates, layouts along with developer
focused documentation about how to use ...
THE LIVING (CODED) STYLEGUIDE
> Living means rebuilding automatically + living within
the CSS context of the project
5 — J...
MOST IMPORTANT BITS3
> color variable names, examples, and use
> spacing variables
> coded example pairs (HTML + Live Exam...
#BYOB
> Mark Otto, Creator of Bootstrap, FOWA 2013 in London4
> For existing projects use your previous work.
Organization...
LET'S JUST COPY THE GOOD BITS
> Architecture, but not too much.
> Code Example Pairs
> Easy Navigation
> Make it Living
8 ...
BOOTSTRAP AS A STYLEGUIDE 6
6
Bootstrap Components: Card
9 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku...
PROCESS: FRAMEWORK
> 1. Break up Sass up into logical files and sections:
sitewide, helpers, navigation, etc.
> 2. Time Sa...
PROCESS: FRAMEWORK CONT.
> 4. Time Saver: Copy and paste from source or build a
pattern in HTML that is demonstrative for ...
HOW DO WE CREATE IT?
> Answer: ZURB Style Sherpa
> Yes, it works with Bootstrap or your own internal code
> Part of the ZU...
STEPS
1. Use ZURB Foundation + ZURB Template or reconfigure
based on this starter project for your use case.
2. Add all of...
EXAMPLE 1: REFERRING TO FRAMEWORK
DOCS WITH SPECIFICITY
# The Grid
Please refer to the ZURB Foundation 6 documentation on ...
EXAMPLE 2: COMPONENT
# Menu Colours
This provides a colored set of swatches. Please note that the color
must be set by an ...
EXAMPLE 2: COMPONENT 7
7
Marcus Handa Design System: Styleguide.
16 — James Stone, Design Systems Engineer (jamesstone.com...
17 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
james@jamesstone.com
@JamesStoneCo
www.JamesStone.com
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

Living Styleguides: Build Your Own Bootstrap

Download to read offline

These slides are from a live talk at Turku <3 Frontend, October 2017, in Turku, Finland. In the talk I discuss what living styleguides are, why you should learn build your own bootstrap, and how to use ZURB Style Sherpa as a tool to kickoff that process.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Living Styleguides: Build Your Own Bootstrap

  1. 1. LIVING STYLEGUIDES HOW TO BUILD YOUR OWN BOOTSTRAP
  2. 2. 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
  3. 3. DARTMOUTH BRAND GUIDELINES 20141 1 Source: communications.dartmouth.edu 3 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  4. 4. 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. 4 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  5. 5. THE LIVING (CODED) STYLEGUIDE > Living means rebuilding automatically + living within the CSS context of the project 5 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  6. 6. 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. 6 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  7. 7. #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 7 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  8. 8. LET'S JUST COPY THE GOOD BITS > Architecture, but not too much. > Code Example Pairs > Easy Navigation > Make it Living 8 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  9. 9. BOOTSTRAP AS A STYLEGUIDE 6 6 Bootstrap Components: Card 9 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  10. 10. 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. 10 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  11. 11. 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. 11 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  12. 12. 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 12 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  13. 13. 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. 13 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  14. 14. 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). 14 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  15. 15. 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> ``` 15 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  16. 16. EXAMPLE 2: COMPONENT 7 7 Marcus Handa Design System: Styleguide. 16 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  17. 17. 17 — James Stone, Design Systems Engineer (jamesstone.com) @ Turku <3 Frontend October 2017
  18. 18. james@jamesstone.com @JamesStoneCo www.JamesStone.com
  • MiMMo3dm

    Mar. 9, 2018
  • ZaidHisham

    Dec. 20, 2017

These slides are from a live talk at Turku <3 Frontend, October 2017, in Turku, Finland. In the talk I discuss what living styleguides are, why you should learn build your own bootstrap, and how to use ZURB Style Sherpa as a tool to kickoff that process.

Views

Total views

623

On Slideshare

0

From embeds

0

Number of embeds

87

Actions

Downloads

2

Shares

0

Comments

0

Likes

2

×