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.
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.
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.
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.
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
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.
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.
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.
- Canon Text
- Paragon Text
- Primer Text
- Tertia Text
- Normal Text
- Petite Text
- Primary Heading
- Secondary Heading
- Tertiary Heading
- Body Text
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.