Need help with
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

1.4K Stars 110 Forks Other 502 Commits 16 Opened issues


Official Website for Typeplate: “A Typographic Starter Kit.”

Services available


Need anything else?

Contributors list

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

Typeplate is just a measely 4.91 KB and especially smaller when compressed!

§ Docs

You'll “find our documentation here”. This document includes all the required instructions to get started with Typeplate.

§ Contributing & Issues

If you would like to contribute to the core of the Typeplate project and not to our main site please make sure you're submitting changes, patches and issues to our main project repository.

§ Getting Started

  • Make sure you have a GitHub account
  • Clearly describe an issue including steps to reproduce when it's a bug.
  • Fork this repository.

§ Making Changes

  • Create a topic branch from where you want to base your work.
    • This is usually based off the master branch.
    • Only target release branches if you are certain your fix must be on that branch.
    • To quickly create a topic branch based on master;
      git branch
      fix/master/my_contribution master
      then checkout the new branch with
      checkout fix/master/my_contribution
      . Please avoid working directly on the
  • Make commits of logical units.
  • Check for unnecessary whitespace with
    git diff --check
    before committing.
  • Make sure your commit messages are in the proper format.
(Issue#) Commit message about your awesome code contribution.
##only provide an issue number if you're PR is referencing an issue.
  • Make sure you have added the necessary tests for your changes.
  • Run all the tests to assure nothing else was accidentally broken.

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

§ Additional Resources

§ Project Stack

Language Abstractions

Build Tools

Package Management

§ Local Development (mac, linux)

Install Packages

$ npm install && bower install

§ Compiling : JavaScript, Sass

In order to compile our projects stylesheets and scripts we use Grunt which is platform independent JavaScript task runner. To start using Grunt run

npm install
from the project's root directory. If you're still curious how to use Grunt then feel free to leave us a comment in our project's Issue Tracker.

§ Grunt Tasks :

Those that choose to use Grunt you can execute the command

which will spin up a local server on
and start the watch task that will also enable LiveReload for HTML, Sass, CSS and JavaScript files. In order to use LiveRealod you must have the LiveReload Browser Extension installed and turned on before executing the
task command.

§ Package Management : Bower

To keep track of our packages and allow for easy updating we use Bower Package Manager which installs all our project's packages in the "components" directory. In order to install bower you must 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
  4. Team Sass Modular Scale - Sassy Modular Scale

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.