Styleguides

A quick presentation inspired by Ian Feather's incredible work on Rizzo… showing how it could be implemented. Very excited about this.

Transcript

2. styleguides
3. the problem css html
4. css is prone to mutation.
5. html is hard to upgrade.
6. the goal: standardization and modularization.
7. in short, documentation.
8. solution #1: static styleguide docs
10. the problem css html docs
11. I made a styleguide, but now I have two problems.
12. solution #2:
 living styleguide css
14. the problem C S S C E P T I O N
15. css html docs = ui_component("forms/search", {label: "Search"}) <form class="search--primary" action="//www.lonelyplanet.com/search"> <label class="accessibility" for="search-q">Search</label> <input class="search__input" id="search-q" name="q" tabindex="1" type="search" value="" /> <button class="search__button" id="search-q-submit" name="search-q-submit" type="submit">Search</button> </form>
16. css html docs components code styleguide
17. reusable, shared, standardized.
19. thanks y’all! @evantravers
21. • all credit is due to Ian Feather from Lonely Planet’s excellent article: (http://ianfeather.co.uk/a-maintainable- style-guide/) • you can learn more about his project Rizzo at (https:// github.com/lonelyplanet/rizzo) • some other things to read/thing about: • Google Polymer • Google Design • Ember’s Component system, feeding right into custom HTML elements