Successfully reported this slideshow.
Your SlideShare is downloading. ×

Living Styleguides: Build Your Own Bootstrap

Ad

LIVING STYLEGUIDES
HOW TO BUILD YOUR OWN BOOTSTRAP

Ad

ABOUT JAMES STONE
> Design Systems Engineer
> Build performant & organized front-end code for
agencies, enterprises, and s...

Ad

DARTMOUTH BRAND GUIDELINES 20141
1
Source: communications.dartmouth.edu
3 — James Stone, Design Systems Engineer (jamessto...

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 18 Ad
1 of 18 Ad

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.

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.

Advertisement
Advertisement

More Related Content

Advertisement

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

×