- February 27th, 2013
- 18 Comments
As of today we’re pleased to announce Typeplate1, a free-range and open-source typographic starter kit that will hopefully help you build beautiful, text-rich websites. The word on the street is that the Web Is 95% Typography2, so as we hurtle towards the future, we think there’s still a lot we can learn from five centuries of history. Typeplate is the result of this exploration of our typographic heritage.
We made Typeplate because we weren’t satisfied with existing Web frameworks. The problem with most frameworks is that they make too many assumptions about how you’re going to work. This can be helpful, but you’re often forced to code their way or find another framework — there’s a lot of ‘framework fatigue’ out there.
Pattern libraries are helpful but they rarely separate structure from aesthetics, which leads to projects looking generic unless you sink a lot of time into re-working all the patterns. We’re building websites in 2013! There is no reason we have to sacrifice customization and modularity in order to achieve beautiful, powerful results.
How It Works
So what does Typeplate do? As a “starter kit”, the library makes no assumptions about how you write code — at all. We went way back to basics, inspired by Harry Roberts’ inuit.css6 and other OOCSS projects. Typeplate lets you set solid base styles and include conventional typographic features (e.g. block quotes and drop capitals) built with good markup and flexible styling.
Typeplate isn’t the next Bootstrap or Foundation; we’re building a toolkit for Web type that’s meant to be extended and customized. There’s no reason we have to sacrifice customization and modularity in order to achieve beautiful, powerful results.
Typeplate is built with Sass7 and borrows heavily from Object-Oriented CSS techniques. A key feature is that Typeplate is 100% à la carte: it takes just 3 Kb of CSS to integrate the entire project, but you can cherry-pick only the elements you need and just delete the rest. There is a plain CSS version of Typeplate available (and actively being improved), but if you want to take advantage of all the heavy lifting, you probably will want to work with Sass: Typeplate generates CSS with lots of variables and functions, letting you concentrate on implementing features, not typing them out. For example, our Typographic Scale8 loop generates 53 lines of code to create a full double-stranded heading hierarchy9 from just three variables and some font sizes.
Demo And Downloads
- Live demo page10
- Examples and Documentation11
- Download the source files12 (in both Sass and CSS flavors, 3 Kb compressed, 17 Kb raw)
- Github Repo13
- Available also on Bower14 (Sass only; if you have Bower installed, just run
bower install typeplatefrom your terminal)
How To Use It
Easy. To use Typeplate, simply
@import "_typeplate.scss" in your project’s main Sass file, preferably after a reset like Normalize. By default, Typeplate sets base styles on the
abbr elements — you’ll want to start tweaking the variables before adding new styles. Don’t forget that you can always delete those sections and use the mixins in your own stylesheet instead.
As the project matures, we’ll most certainly be updating the page and blogging about what we’ve learned during development as well as posting better demos and documentation. We would appreciate your help in making Typeplate better, so please fork, pull-request and submit issues on GitHub16.
- 1 http://typeplate.com
- 2 http://informationarchitects.net/blog/the-web-is-all-about-typography-period
- 3 http://www.smashingmagazine.com/wp-content/uploads/2013/02/typeplate-t.png
- 4 http://www.smashingmagazine.com/wp-content/uploads/2013/02/typeplate-press.png
- 5 http://www.smashingmagazine.com/wp-content/uploads/2013/02/typeplate-press.png
- 6 http://inuitcss.com
- 7 http://sass-lang.com
- 8 http://typeplate.com/#typographic-scale
- 9 http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/
- 10 http://typeplate.com/demo.html
- 11 http://typeplate.com/
- 12 http://typeplate.com
- 13 https://github.com/typeplate/typeplate.github.com
- 14 http://twitter.github.com/bower/
- 15 http://www.smashingmagazine.com/wp-content/uploads/2013/02/typeplate-kit-450px.png
- 16 http://github.com/typeplate/typeplate.github.com
- 17 http://twitter.com/tommycreenan
- 18 http://dribbble.com/tommycreenan