You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
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 as utf-8 globally.
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.
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 .scss file 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><linkrel="stylesheet" href="[project_path]/css/normalize.css"><!-- Reset of your choice (optional). We like normalize even though it's not a reset --><linkrel="stylesheet" href="[project_path]/css/typeplate.css"><!-- typeplate styles --><linkrel="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><linkrel="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.
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.
