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 = 18kb
- Compressed Sass = 3 KB
- Raw CSS = 10 KB
-
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.
- Download and unzip the Sass
.zippkg. - Place the new directory from the
.zipinto your project's Sass directory - Import from your project's primary
.scssfile like so:
// Imports
// ====================================
@import "compass"; // Not required. For example purposes only.
@import "[your_project_path]/reset"; // Not required. For example purposes only.
@import "[your_project_path]/typeplate-sk/typeplate";
// Custom Author Styles
// ====================================Authors can also venture one step further and include a custom variables file in order to override the defaults we've provided.
@import "[your_project_path]/typeplate-custom-vars"; // Must come first
@import "[your_project_path]/typeplate-vars"; // Must follow typeplate-custom-varsIf the Sass version isn't your cup of tea, we've provided a CSS version. Simply place the contents of typeplate-sk.css inside your project's stylesheet (reset, 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-sk.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-sk.css inside -->
</head>In order to contribute you need the confidence to work with Gulp, the CLI and Ruby Gems. Our main work is done on the development branch and distributed on master. Gulp tasks are as follows:
# Install Gulp dependencies
$ npm install
# Install Gems
$ bundle install
# Watch and compile Sass
$ gulp
# Prepare output for dist directory
$ gulp prep
# Place output for dist directory
$ gulp build
# Final prep for deployment
$ gulp shipWith 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 Starter Kit ©2014 • A @grayghostvisuals and @zakkain Joint™ Logo Crafting by @TommyCreenan.