Skip to content


Subversion checkout URL

You can clone with
Download ZIP
Official Website for Typeplate: “A Typographic Starter Kit.”
HTML CSS JavaScript ApacheConf Ruby
Tree: 6a4374f1b6

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

typeplate logo

What is it?

Frameworks make decisions for you about how to organize, structure and design a site. Pattern libraries don’t separate styling and markup, making them tough to use in a truly modular fashion. We weren’t satisfied, so we made a thing that doesn’t do that.

Typeplate is a "typographic starter kit". We don’t make aesthetic design choices, but define proper markup with extensible styling for common typographic patterns. A stripped–down Sass library concerned with the appropriate technical implementation of design patterns–not how they look.

Browser Tested, Developer Approved

File Size

Not much goin’ on here in terms of bulk. As you can see, Typeplate is just a measely 3kb when compressed. That's really, really small.

  • Raw Sass, LESS and Stylus = 17kb
  • Compressed Sass, LESS and Stylus = 3kb
  • Raw CSS = 7kb


Based on use cases for most developers' workflow, we recommend using typeplate just after your reset stylesheet (i.e. normalize) and your compass @import in order to operate as we've intended, but as you'll see from our demo it isn't necessary.

Example using .scss syntax:

@import "compass";
@import "[your_project_path]/reset";
@import "[your_project_path]/typeplate";

// Custom Author Styles
// ====================================

§ Installation via .scss @import

Simply download our typeplate.scss file and import from your project's .scss file like so:

@import "[your_project_path]/typeplate";

§ Installation via .css

If the Sass version isn't your cup of tea, we've provided a CSS version. Simply place the contents of typeplate-unminified.css inside your project's stylesheet in the order specified from the example above.

§ Installation via Bower

Yup that’s right! We’re in the bower package registry. Simply run bower install typeplate for the CSS, Sass, LESS and Stylus versions and watch the magic happen. This is an example of how to include either the CSS or Sass version in your project. Refer to our Bower Repo for more details regarding LESS and Stylus.


@import "compass";
@import "[your_project_path]/reset";
@import "[root_project_path]/components/typeplate/typeplate";


You could also use the CSS version instead (btw…we don’t condone this method depicted below. In reality you should copy the contents of the CSS file and paste the contents in the top of your projects stylesheet):

    <link rel="stylesheet" href="[root_project_path]/components/normalize-css/normalize.css">
    <link rel="stylesheet" href="[root_project_path]/css/typeplate.css">

Birds eye view of our project stack

§ Language Abstractions

§ JS Build Tools

§ Sass & Compass Build Tools

§ Package Management

Contributing Guidelines

§ Pull Requests

When contributing (by the way you're awesome for that so thanks) please keep your commits small and targeted when you're prepared to file a Pull Request. We’d prefer not seeing Pull Requests that contain 20 commits in multiple spots. Keep it small and it will make things simpler and much cleaner in the long run.

§ Feature Branches

If you’re making a new feature for Typeplate then make sure you name your branch as follows:


§ Patches

If you're making a quick patch for Typeplate (like a spelling mistake for example) then make sure you name your branch as follows:


Local Development

§ Stylesheets : .scss

Make sure compass is installed by executing the following bash command (Mac only) from your CLI:

gem install compass

You can always check if they're installed by running the bash command (Mac only) gem list which will list all your gems installed.

§ Compiling : Javascript, Sass and Compass

In order to compile our projects stylesheets and scripts we use Codekit, but we've also taken the time to think about you non–Mac contributors as well. For this particular scenario we've provided you with grunt which is platform independent Javascript that uses the CLI to compile, concatenate and minify Javascript.

§ Package Management : Bower

To keep track of our packages and allow for easy updating we use Bower Package Manager which installs all components in the "components" directory of this project. In order to install bower you must first have Node and npm installed on your machine. Once Node and npm are installed simply run the command below (which works on both Windows/Mac and one of the reasons why we chose it).

npm install bower -g

What Else Is There?

With so many packages to choose from, we recommend a few libraries to use with Typeplate to compliment. Bon Appetite!

  1. FitText.js – A jQuery plugin for inflating web type
  2. LETTERING.JS – A jQuery plugin for radical web typography
  3. MOLTEN LEADING – Slingin’ Hot Leading

Typeplate ©2013 • A @grayghostvisuals and @zakkain Joint™ Logo Crafting by @TommyCreenan.

Something went wrong with that request. Please try again.