Motif

A responsive front-end framework to tell your story

Modular, style-agnostic development perfect for brand experiences

Speeding up the Process

At Motif's core are fluid, responsive modules that speed up the iterative process of moving from sketches to prototypes to production code.

Powerfully Simple

Motif's core building blocks – including a grid system, a modular typographic system, a plethora of helper classes – empower you to create most anything, and encourage you to continue developing with agility in mind.

Style Agnostic

Drop Motif's prototype theme in one line of code, but keep the core of all its structural modules, easing the process of building a custom brand experience.

Get Started

Download the Motif source or just hack around with the compiled CSS and JavaScript. Either way, go get your feet wet!

Learn how to get started

The Basics

Built with LESS

Motif uses LESS as its preprocessor, a powerful extension of the CSS language that speeds up development with features like variables, mixins, and nested code.

Learn more about LESS

Responsive Breakpoints

By default, Motif starts out with five key viewport breakpoints:

Base (0px):
From 0px and upward, this covers everything
Small (480px):
Starting at about 480px wide, this tends to cover landscape or wider mobile-sized viewports
Medium (768px):
Sized to benefit most tablet-sized viewports
Large (992px):
The traditional desktop viewport, convenient for those 960 sites with a little padding on the sides
Extra Large (1240px):
Our widescreen breakpoint

Grid System

The responsive grid, by default, covers small, medium, and large breakpoints. Rows are wrapped around percentage-based columns, without the hassle of specifying which column is first or which is last.

25%
25%
25%
25%
33%
33%
33%
50%
50%
67%
33%
75%
25%

Thumbnail Grid

The Thumbnail Grid allows you to place a grid of media – photos or videos, catalog or retail products – without floating them, alleviating the need to concern yourself with clearing the floats should an object's content extend further than another.

  • Alderaan is peaceful. We have no weapons.
  • Alderaan is peaceful. We have no weapons.
  • Alderaan is peaceful. We have no weapons.
  • Alderaan is peaceful. We have no weapons.
  • Alderaan is peaceful. We have no weapons.

Flexible Typography

In Motif, typography is broken into pieces that separate skin from structure. In this case, that means the type sizing (structure) is separate from the type styling (skin), namely the font family, color, and other styling. This allows us to mix and match size and style to achieve any combination.

Sizes (Structure)

  • Canon Text
  • Paragon Text
  • Primer Text
  • Tertia Text
  • Normal Text
  • Petite Text

Style (Skin)

  • Primary Heading
  • Secondary Heading
  • Tertiary Heading
  • Body Text

Forms

Inputs and textareas are set to 100% width to adapt to the width of their wrapper. (Great with the responsive grids.) Select boxes are set to the width of their content, maxing out at 100%.

Almost all the form elements in Motif are best used inside a label element and the "input-label" class.

Browser Support

Internet Explorer Chrome Firefox Safari iOS Android
8+ Latest 17.0+ 4.0+ 5.0+ 2.4+