Type CSS Framework

Simple CSS for displaying text in a readable format

About

Type CSS is designed to create minimalist, functional, and easily consumable web pages. Best used for displaying text content, its purpose is to create webpages where form follows function. Text content should be easy to read, and avoid complex interactions and interfaces. Type CSS achieves this goal through lightweight pages and CSS, easily digested typography, and carefully considered design decisions that maximize consumption of information.

Download

Clone from GitHub

Download a copy

Grid

The grid system in Type CSS is built on flexbox and can have a variable number of columns per row. In addition to the standard layout agnostic column, Type CSS also includes a flexbox-based 12 column grid.

Variable width .col class

.col
.col
.col
.col
.col
.col
.col
.col
.col
.col

Fixed width .col-* classes

.col-1
.col-11
.col-2
.col-10
.col-3
.col-9
.col-4
.col-8
.col-5
.col-7
.col-6
.col-6
.col-7
.col-5
.col-8
.col-4
.col-9
.col-3
.col-10
.col-2
.col-11
.col-1
.col-12

Grid Layout Utilities

Order

Normal order

1
2
3
4
5

Reverse order .reverse class

1
2
3
4
5

Alignment

Start -start class

.col-4

Center -center class

.col-4

End .end class

.col-4

Spacing

Around .around class

.col-2
.col-2
.col-2

Between .between class

.col-2
.col-2
.col-2

Typography

Type CSS is based on rem units of measure. The base font-size is defined in the root html element as font-size: 16px which forces a uniform size that matches most browsers defaults, along with being large enough for easy reading by many users.

The base font is Lato imported from Google Fonts, set at 16px font-sizing, with a line height of 1.5. Body copy uses #444 as its display color.

Headings use Libre Baskerville imported from Google Fonts, sized based on major third ratios with the <h1> tag set at 2.5em scaling down to <h6> set at 0.75em. Headings use #222 as its display color

Anchor text

Strong

Emphasis

Underline

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
  • List Item #1
  • List Item #2
  • List Item #3
  1. List Item #1
  2. List Item #2
  3. List Item #3

Buttons

Type CSS includes two styles of buttons, a plain standard button for the <button> element, <input> elements, and the .button class; and a highlighted .button-primary class

Anchor Button
Anchor Button

Forms

Tables

Simple table styling is provided so that tables will fill the width of their container and have a basic, minimal styling.

#1 #2 #3 #4
- - - -
- - - -
- - - -

Cards

Cards are a widespread part of modern interface design. They can be used for a variety of purposes, material.io describes them as:

Cards may contain a photo, text, and a link about a single subject. They may display content containing elements of varying size, such as photos with captions of variable length.

There is one basic card style included in Type CSS that mimicks paper. Cards can be used in conjunction with the grid scaffolding and other components to form a wide range of UI elements

Class

Cards are created using the .card class

Layout

Cards are can be used with layout classes such as rows and grid scaffolding to make complex layouts.

Black and white photo of the interior of a large modern building

Utility Classes

Responsive Images

.img-responsive class forces images to fill the width of their container and scale with it.

Belfry tower

Layout classes

.left and .right float elements to their respective positions.