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:

• /settings Global variables, site-wide settings, transcending component settings.
• /tools Site-wide mixins and functions.
• /generic Low-specificity, far-reaching rulesets (e.g. resets, typography, wrappers).
• /layout Our own flexbox based grid.
• /components BEM minded, independent blocks of UI. A few essentials are provided e.g. forms and buttons.
• /utilities High-specificity, very explicit selectors. Overrides and helper classes. You can use tools to create them.

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

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

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.

No gutter by setting .layout--no-gutters

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

Nested Layouts

Layout components are infinitely nestable inside of other layout components.

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.

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

Alignment

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

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

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

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

Shrink/grow

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

Tables

Notifications

Forms

Inline forms

Buttons