Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Official Website for Typeplate: “A Typographic Starter Kit.”
HTML CSS JavaScript ApacheConf Ruby
tree: e6f9e8f819

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
components
css
fonts
img
js
less
lib
scss
.editorconfig
.gitattributes
.gitignore
.htaccess
404.html
CNAME
README.md
codekit-config.json
config.rb
demo.html
favicon.ico
favicon.png
grunt.js
index.html
package.json
robots.txt

README.md

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 = 17kb
  • Compressed CSS = 3kb
  • Raw CSS Unminified = 6kb

Installation

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 Sass version and watch the magic happen. This is an example of how to include either version in your project:

@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):

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

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:

feature/your_feature_name

§ 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:

patch/your_patch_name

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
©credits

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

Something went wrong with that request. Please try again.