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: Build Your Own Bootstrap

534 views

Published on

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.

Published in: Software
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/yqK2o ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD THE BOOK INTO AVAILABLE FORMAT (New Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download Full doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download PDF EBOOK here { https://urlzs.com/UABbn } ......................................................................................................................... Download EPUB Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... Download doc Ebook here { https://urlzs.com/UABbn } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THE can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THE is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBOOK .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, CookBOOK, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, EBOOK, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THE Helped Ignite a Movement,-- Atomic Habits: An Easy &amp; Proven Way to Build Good Habits &amp; Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THE the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THE Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • NOTE TO READERS: Do NOT Buy Any Shed Plans Until You've Seen This... ▲▲▲ https://url.cn/15NhsAEL
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • D0WNL0AD FULL ▶ ▶ ▶ ▶ http://1lite.top/yqK2o ◀ ◀ ◀ ◀
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×