Archetype

Archetype is a Compass/Sass based framework for authoring configurable, composable UI components and patterns. The natural language syntax that Archetype provides allows designers and developer to discuss UI compositions using the same vocabulary.

Resources

• Archetype Homepage
• Documentation
• Components
• Tutorials
• Blog
• Add-ons
• Discussion
• Archetype configuration

Developing Archetype

If you're looking to contribute to Archetype, check out the CONTRIBUTING article.

Installation

Install the gem

[sudo] gem install archetype --pre

Instead of installing the gem directly via the command line, we recommend using Bundler to manage your gem dependencies.

Creating a new project with Archetype

compass create ~/workspace/your-project -r archetype --using archetype

Adding Archetype to an existing Compass project

In your config.rb, add

require "archetype"

Import Archetype into your Sass file

@import "archetype";

Learn more about Archetype configuration.

Credits

Author

Archetype was originally written by Eugene O'Neill.

Inspiration

• Styleguides for the Web
• BBC Global Experience Language
• Our Living Style Guide (Writing maintainable HTML/CSS)
• The Fight for a Living Style Guide
• Anchoring Your Design Language in a Live Style Guide
• Unifying Agile and UX with Live Style Guides
• Twitter Bootstrap
• ZURB Foundation

Special Thanks

• Johnathan Leppert
• Jakob Heuser
• David Delo
• Robert Martone
• Sean Sands
• Chris Eppstein
• LinkedIn
• Compass
• Sass

Acknowledgements

This project couldn't have been made possible without the amazing work by the following heroes:

• Dave Gandy for his awesome work on FontAwesome
• Chris Eppstein and other contributors of Compass for building an amazing framework, and for some great scaffolding code we've borrowed
• Hampton Catlin, Nathan Weizenbaum, Chris Eppstein and contributors for making CSS fun again
• Nicolas Gallagher and Jonathan Neal for some Normalize.css greatness
• Nicolas Gallagher, Jonathan Neal, Kroc Camen, Paul Irish, and others for HTML5 Boilerplate