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.
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 = 20kb
- Compressed Sass = 3kb
- Raw CSS = 10kb
-
Rule #1 in Typeplate Club… Always use
<meta charset="utf-8">in your document<head>. Doing so alleviates authors need to use a charset from within a stylesheet. Anything imported into a document using<meta charset="utf-8">is encoded asutf-8globally. -
Based on use cases for most developers' workflow, we recommend using Typeplate just after your reset stylesheet (i.e. normalize) and your compass
@importin order to operate as we've intended, but as you'll see from our demo it isn't necessary.
Simply download our _typeplate.scss partial file and import from your project's primary .scss file like so:
@import "compass"; // Not required. For example purposes only.
@import "[your_project_path]/reset"; // Not required. For example purposes only.
@import "[your_project_path]/typeplate";
// Custom Author Styles
// ====================================Authors can also take this one step further and include a custom variables file from outside the _typeplate.scss partial file. This allows authors to override the default variables set within _typeplate.scss.
@import "[your_project_path]/typeplate-vars"; // Must come first
@import "[your_project_path]/typeplate"; // Must follow typeplate-varsIf the Sass version isn't your cup of tea, we've provided a CSS version. Simply place the contents of typeplate.css inside your project's stylesheet (reset style, typeplate, author styles).
<head>
<link rel="stylesheet" href="[project_path]/css/normalize.css"><!-- Reset of your choice (optional). We like normalize even though it's not a reset -->
<link rel="stylesheet" href="[project_path]/css/typeplate.css"><!-- typeplate styles -->
<link rel="stylesheet" href="[project_path]/css/main.css"><!-- main stylesheet -->
</head><head>
<link rel="stylesheet" href="[project_path]/css/main.css"><!-- main stylesheet with typeplate.css inside -->
</head>Yup that’s right! We’re in the bower package registry. Simply run bower install typeplate-starter-kit for the CSS, Sass versions and watch the magic happen. This is an example of how to include either the CSS or Sass version in your project.
Sass
@import "compass";
@import "[your_project_path]/reset";
@import "[root_project_path]/bower_components/typeplate/scss/typeplate";Since bower allows authors to keep packages and dependencies updated easily it also overrides any custom changes made to the package(s) contents served from the components directory -used by bower to organize packages. To alleviate this frustration we've provided a variable file to override the packages opinionated defaults. Simply duplicate the _typeplate-vars.scss file and include it from your own directory (most likely your sass directory where you keep all your related sass project files.)
Sass w/custom variable overrides
@import "compass";
@import "[your_project_path]/reset"; // your browser reset of choice
@import "[your_project_path]/scss/typeplate-vars"; // duplicated var file outside bower's components directory
@import "[root_project_path]/bower_components/typeplate/scss/typeplate"; // the bower package directory and included fileCSS
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]/bower_components/normalize-css/normalize.css">
<link rel="stylesheet" href="[root_project_path]/bower_components/typeplate/css/typeplate.css">
</head>§ Package Management : Bower
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
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
- Team Sass Modular Scale - Sassy Modular Scale
Typeplate ©2013 • A @grayghostvisuals and @zakkain Joint™ Logo Crafting by @TommyCreenan.