§ 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!
Installation
-
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.
§ Installation via .scss @import
- 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 "[your_project_path]/resets"; // Not required. Example purposes only.
@import "[your_project_path]/scss/typeplate-sk/typeplate-index";
// 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-vars";
@import "[your_project_path]/typeplate-custom-vars";§ 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.css inside your project's stylesheet (reset, typeplate, author styles). This can be done manually or with bower and CDNJS.
§ Installation via npm
npm i typeplate-starter-kit- Import from your project's primary
.scssfile like so:
// Imports
// ====================================
@import "[your_project_path]/resets"; // Not required. Example purposes only.
@import 'node_modules/typeplate-starter-kit/dist/scss/_typeplate-index';
// Custom Author Styles
// ====================================Option #1 This method is not the best as it results in more HTTP requests.
<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>Option #2 This method is the best as it results in less HTTP requests.
<head>
<link rel="stylesheet" href="[project_path]/css/main.css"><!-- main stylesheet with typeplate.css inside -->
</head>Contributing
In order to contribute you need the confidence to work with Gulp and NPM. Our main work is done on the development branch and distributed on master. Please make sure ALL pull requests are submitted to the development branch.
# Install Gulp dependencies
$ npm install
# Watch and compile Sass
$ gulp§ 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
- Team Sass Modular Scale - Sassy Modular Scale
©credits
Typeplate Starter Kit ©2016 • A @grayghostvisuals and @zakkain Joint™ Logo Crafting by @TommyCreenan.