Maat.css documentation

Introduction

The maat.css modules do not provide you with UI and design out of the box, instead, it provides you with a solid architectural baseline upon which to complete your own work. Every module can be replaced, ignored or extended so it doesn't limit you when new strategies or technologies arise.

Features

  1. BEM
  2. Flexbox layouts
  3. Custom breakpoints
  4. Rem based font sizes
  5. Basic form styling with custom checkboxes, radios and selects
  6. Guidelines for your project structure (can be diverged from, this is not the holy grail)

Installation

Add Maat.css package to your package.json.

npm install @freshheads/maatcss

Usage

Once you have maat.css in your project you first need to copy the example.main.scss file into your project directory structure and rename this to your application entry point. This file accesses the maat.css modules, and you can extend it with your own UI component modules.

The imports in this file need to be changed to the location of the maatcss node module. e.g. ~maatcss/generic/toplevel when using Webpack. For example:


// Libs
@import '~sass-mq';
@import '~normalize.css';

// Tools
@import '~@freshheads/maatcss/tools/button-variant';
@import '~@freshheads/maatcss/tools/fontello';

// Generic
@import '~@freshheads/maatcss/generic/reboot';
@import '~@freshheads/maatcss/generic/toplevel';
@import '~@freshheads/maatcss/generic/typography';

// Layout
@import '~@freshheads/maatcss/layout/container';
@import '~@freshheads/maatcss/layout/layout';
@import '~@freshheads/maatcss/layout/layout-sizing';
@import '~@freshheads/maatcss/layout/layout-align';

// Components
@import '~@freshheads/maatcss/components/button';
@import '~@freshheads/maatcss/components/form';
@import '~@freshheads/maatcss/components/form-choice';
@import '~@freshheads/maatcss/components/form-select';
            

Directory structure guidelines

Maat.css follows a specific directory structure, which you hopefully follow as well in your own CSS directory:

Typography

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

Layout

The layout is based on flexbox which gives us a lot of nice features right out of the box. The layout columns below with the text "auto" do not specify any widths, they just naturally space themselves equally and expand to fit the entire row.

When equal widths aren’t what you want, you can add sizing classes to individual columns. Columns without sizing classes simply divide up the remaining space as normal.

The sizing class are set by breakpoint and the layout will change accordingly.

Auto
Auto
3/12
Auto
2/12
3/12
3/12
6/12
6/12
3/12
3/12

No gutter by setting .layout--no-gutters

Auto
Auto

Columns can also have an offset by defining .layout__item--offset-md-2

Auto
Auto

Nested Layouts

Layout components are infinitely nestable inside of other layout components.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur cumque eum excepturi laudantium magnam provident qui ratione saepe totam unde. Est eum molestiae odit placeat quas rerum velit. Dignissimos, odit!

Sidebar

Prevent stacking on mobile

By default columns are stacked on mobile if you wish to overwrite this set the class .layout--no-wrap. Or set a sizer on the xs class on the column you don't want to go full witdh.

auto
auto

Stretch columns to equal height

You can make columns stretch to equal height by setting the class .layout--item-flex on the layout or per column by setting .layout__item-flex. This makes use of flexbox property where direct childs will be divided in rows

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur cumque eum excepturi laudantium magnam provident qui ratione saepe totam unde. Est eum molestiae odit placeat quas rerum velit. Dignissimos, odit!

Sidebar

Alignment

Vertical alignment helpers, based on the complete layout. .layout--align-x eg. top, middle or bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur cumque eum excepturi laudantium magnam provident qui ratione saepe totam unde. Est eum molestiae odit placeat quas rerum velit. Dignissimos, odit!
Middle
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur cumque eum excepturi laudantium magnam provident qui ratione saepe totam unde.

Vertical alignment helpers, defined per column. .layout__item--align-x eg. top, middle or bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur cumque eum excepturi laudantium magnam provident qui ratione saepe totam unde. Est eum molestiae odit placeat quas rerum velit. Dignissimos, odit!
Middle
Bottom

Horizontal alignment helpers. .layout--align-x eg. center, right, between, around

center
right
3/12
3/12
3/12
3/12

Ordering

You can change the order of columns on a from a certain breakpoint by setting .layout__item--order-md-x eg. first, last. Or even reverse the complete layout by setting .layout--order-lg-reverse

1
2
3
1
2
3

Shrink/grow

You can set a grow and shrink modifier on layout items. To collapse these until a certain breakpoint use .layout--collapse-sm

Grow
Shrink

Tables

VoornaamAchternaamUsername
Geertvan de Langenberg@G33RT
MartinBroos@martinbroos

Notifications

Forms

We'll never share your email with anyone else.
This is some placeholder block-level help text for the above input. It's a bit lighter and easily wraps to a new line.
Radio buttons
Checkboxes
Inline choices
Error states
This option must be checked
We'll never share your email with anyone else. This field must contain a valid email address

Inline forms

Buttons

Button