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
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 Sass, LESS and Stylus = 17kb
- Compressed Sass, LESS and Stylus = 3kb
- Raw CSS =
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.
@import "compass"; @import "[your_project_path]/reset"; @import "[your_project_path]/typeplate"; // Custom Author Styles // ====================================
§ Installation via
Simply download our
typeplate.scss file and import from your project's
.scss file like so:
§ Installation via
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):
<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
§ 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:
If you're making a quick patch for Typeplate (like a spelling mistake for example) then make sure you name your branch as follows:
§ Stylesheets :
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.
§ 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!
- FitText.js – A jQuery plugin for inflating web type
- LETTERING.JS – A jQuery plugin for radical web typography
- MOLTEN LEADING – Slingin’ Hot Leading