An introduction to the Archetype CSS framework developed at LinkedIn.

3. 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

5. design
 brand and identity are important
 consistency, everywhere
 pattern library
 collaboration
 save time

6. development
 code reusability and sharing
 scalability
 common and familiar interface
 ease-of-use
 maintenance
 save time (and hair)

8. 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”

9. 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”

10. 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

11. 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

12. semantics
.download {
@include styleguide(primary button);
}
.user-has-successfully-authenticated {
@include styleguide(success alert);
}
#mainSiteNavigation {
@include styleguide(primary navigation);
}

14. 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

16. 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