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.



Published on

An introduction to the Archetype CSS framework developed at LinkedIn.

  • Be the first to comment

  • Be the first to like this


  1. 1. what is it CSS framework for creating components and UI patterns living styleguide built atop of Sass and Compass inspired by Bootstrap, ZURB Foundation, and others
  2. 2. design brand and identity are important consistency, everywhere pattern library collaboration save time
  3. 3. development code reusability and sharing scalability common and familiar interface ease-of-use maintenance save time (and hair)
  4. 4. design as a language “large primary button” “medium muted headline” “error alert” “container with a shadow” “link in a headline” “copy in a tooltip” “button in a dropdown”
  5. 5. grammar identifiers (component names)  headline, alert, button, tooltip modifiers  “small”, “wide”, “primary”, “muted” contexts  “in an alert”, “on a dropdown”, “in attributes  “with a shadow”, “without an underline”
  6. 6. building components primitives  define the most basic building blocks of the UI  colors, gradients, icons, font size, shadows, etc micro components  visually define individual elements on a page  <button> … is a … styleguide(primary button) macro components  define a composition of multiple components and imply specific markup
  7. 7. building a styleguide primitives and components are configurable easy to override or extend built-ins  styleguide-add-component()  styleguide-extend-component() components can invoke other components themes can derive from other themes
  8. 8. { @include styleguide(primary button);}.user-has-successfully-authenticated { @include styleguide(success alert);}#mainSiteNavigation { @include styleguide(primary navigation);}
  9. 9. utility belt advanced grid system cross-browser hacks and targeting glyph icon API accessibility helpers multi-locale support robust and flexible style resets granular and configurable  almost 300 configuration option
  10. 10. roadmap open source  better docs and examples  your help! more components more mobile features easy interface to quickly configure themes have a feature in mind? make a request