Designing

MatCSS is a CSS framework built with the idea of smooth, pretty and simple components. It is designed to be easy to learn and to customize.

The design is meant to feel modern, smooth and simple. We want to make it easy for you to create a website that looks good and feels good. We want to make it easy for you to create a website that you can be proud of.

MatCSS has many pre-built components that you can use to create your website. Like buttons, cards, dropdowns, modals, and much more! We also have an array of tools and upcoming repositories that will help you creating your website.

Standards

MatCSS is built with the idea of being easily customizable. But, the default design has a few standards that makes a consistent design across all components.

Here is a list of the standards that we use:

Borders

MatCSS uses rounded borders on most components. Depending on the component, the radius of the border may vary. But, the default radius is 0.25rem.

Borders should also be solid, and the width by default is 2px.

Box Shadows

MatCSS does not use any blur on box shadows. Instead, for some components we use the box shadow to create a border effect. For example, the button uses the box shadow to create the pressing effect.

Colors

The colors were carefully chosen to create a consistent feel across all components. The colors are meant to look joyful, bright and modern.

Typography

The recommended font for MatCSS is Nunito. It is a modern, clean and simple font that looks good on any device.

The default font size is 1rem, and the default line height is 1.5rem.