Starter Kit

screenshot of Starter Kit

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.

Overview:

Typeplate is a typographic starter kit that provides proper markup and styling for common typographic patterns. It is a stripped-down Sass library focused on the technical implementation of design patterns. This article highlights the features and provides installation instructions for Typeplate.

Features:

  • Extensible styling for common typographic patterns
  • Proper markup for typography
  • Lightweight: only 4.91 KB in size
  • Can be used after a reset stylesheet and compass import
  • Can be installed via .scss @import, .css, or npm

Installation via .scss @import:

  1. Download and unzip the Sass .zip package.
  2. Place the extracted directory into your project's Sass directory.
  3. Import Typeplate in your project's primary .scss file.

Authors can also customize the defaults of Typeplate by including a custom variables file.

Installation via .css:

  1. If you prefer the CSS version, simply copy the contents of typeplate.css into your project's stylesheet.
  2. You can place it manually or use bower or CDNJS for installation.

Installation via npm:

  1. Run the command npm i typeplate-starter-kit in your project's directory.
  2. Import Typeplate in your project's primary .scss file.

Note: There are two installation options provided for npm, with option #2 recommended for fewer HTTP requests.

Summary:

Typeplate is a typographic starter kit that offers proper markup and styling for common typographic patterns. It is a lightweight and extensible Sass library that can be easily installed via .scss @import, .css or npm.

gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.