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.

SC5 Style Guide Generator

2,401 views

Published on

Published in: Technology
  • Be the first to comment

SC5 Style Guide Generator

  1. 1. SC5 Styleguide Brought you by Varya Stepanova and generated by Jekyller
  2. 2. Old school way mockup •  PSD •  Pack of pages markup •  HTML/CSS/JS •  Waits for pages •  Or is re-coded product 2
  3. 3. Dash process In your dreams In reality ...over and over again 3 mockup markup integration mockup markup mockup markup
  4. 4. Old school “benefits” •  Inconsistent visual system •  Inconsistent code (duplicant, unreasoned) •  Version confusion •  Time-consuming •  Unmaintainable 4
  5. 5. Websites are systems rather than pages and as soon as we stop percerving them as that, the better. Anna Debenham“ 5
  6. 6. Atomic design paradigm or any other modular solution 6
  7. 7. Living Styleguides A living styleguide represents UI components of your website with exact the same styles which you use across the project. 7
  8. 8. Styleguide Driven Development Styleguide can must be an integral part of your development workflow. Styleguide Driven Development is the practise of using the styleguide as the focal point for all front-end UI development tasks. 8
  9. 9. We miss the tool
  10. 10. npm install sc5-styleguide 10
  11. 11. http://styleguide.sc5.io SC5 Styleguide Informative and easily navigable live styleguide which can be edited directly in the browser ••• View m e on G itH ub
  12. 12. Lift off!
  13. 13. Killer features •  CSS / SCSS / SASS / LESS •  Related variables •  Live editting •  Angular directives •  Easy to integrate 12
  14. 14. my-styles/ _variables.sass atoms/ menu.sass footer.sass common.sass index.sass products.sass + •  CLI •  Gulp •  Grunt Gulp Stream
  15. 15. KSS Knyle Style Sheets // A button suitable for giving a star to someone. // // :hover - Subtle hover highlight. // .star-given - A highlight indicating you've already given a star. // .star-given:hover - Subtle hover highlight on top of star-given styling. // .disabled - Dims the button to indicate it cannot be used. // // Styleguide 2.1.3. a.button.star{ ... &.star-given{ ... } &.disabled{ ... } } 13
  16. 16. Intergration gulp.task("styleguide", function() { return gulp.src(["**/*.css", "**/*.scss", "**/*.less"]) .pipe(styleguide({ ... })) .pipe(gulp.dest("<destination path>")); }); 14
  17. 17. Development with SC5 Styleguide •  Living overview of UI •  Quick manual testing •  Quick built-out of new pages •  Unit tests for UI •  Easier designer/developer/client collaboration 15
  18. 18. Developers mindset Before What markup, CSS and JS I need? After What modules is this page made of? Do I need to create new modules? Future modules and pages start in styleguide. 16
  19. 19. Future plans •  Variables in any file •  Preview mode •  Editting full CSS •  More Angular
  20. 20. Thank you! Varya Stepanova, SC5 Online Questions? 18

×