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, LESS and Stylus = 17kb
- Compressed Sass, LESS and Stylus = 3kb
- Raw CSS = 7kb
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.
Example using .scss syntax:
@import "compass";
@import "[your_project_path]/reset";
@import "[your_project_path]/typeplate";
// Custom Author Styles
// ====================================
###§ Installation via .scss @import
Simply download our typeplate.scss file and import from your project's .scss file like so:
@import "[your_project_path]/typeplate";
###§ 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-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.
Sass
@import "compass";
@import "[your_project_path]/reset";
@import "[root_project_path]/components/typeplate/typeplate";
CSS
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>
###§ Language Abstractions
###§ JS Build Tools
###§ Sass & Compass Build Tools
###§ Package Management
##Contributing Guidelines ###§ 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:
feature/your_feature_name
###§ Patches If you're making a quick patch for Typeplate (like a spelling mistake for example) then make sure you name your branch as follows:
patch/your_patch_name
##Local Development
§ Stylesheets : .scss
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.
§ Compiling : Javascript, Sass and Compass
In order to compile our projects stylesheets and scripts we use Codekit, but we've also taken the time to think about you non–Mac contributors as well. For this particular scenario we've provided you with grunt which is platform independent Javascript that uses the CLI to compile, concatenate and minify Javascript.
§ 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
######©credits Typeplate ©2013 • A @grayghostvisuals and @zakkain Joint™ Logo Crafting by @TommyCreenan.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent