Archetype

877 views
812 views

Published on

An introduction to the Archetype CSS framework developed at LinkedIn.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
877
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Archetype

  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. semantics.download { @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

×