Skip to main content

Introduction

WIP

MatCSS is a work in progress. This page is written for the future, and IS not accurate. Please be patient while we work on MatCSS! Help us out if you want :P

Introduction

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.

MatCSS is inspired by Bootstrap and Flatify (Go check them out, they're awesome!). Bootstrap has awesome utilities class that makes it easy to create a responsive website, we wanted to achieve a similar result with MatCSS, so we built MatCSS using Bootstrap's utilities & grid API! So if you are familiar with Bootstrap's grid system, you will feel right at home with MatCSS. Flatify had a unique style, inspired on Duolingo's website, that we really liked. We created components with similar styling and vibe to Flatify's, but with our own twist.

So once again, thanks to Bootstrap, you guys did great at making CSS more responsive, and thanks to Flatify, you guys did great at making CSS more pretty. We hope to achieve the same results with MatCSS!

Components​

MatCSS has a lot of components, from buttons to cards, from dropdowns to modals. We have a lot of components that you can use to create your website. Be sure to check them out!

Utilities​

MatCSS has a lot of utilities classes that you can use to style your website. From colors to spacing, from text to flexbox, we have a lot of utilities that you can use to style your website.

Responsive Design​

MatCSS is designed to be responsive. Using a system similar to Bootstrap's, we have a grid system that makes it easy to create a responsive website.

Customization​

MatCSS is customizable in many ways! Using CSS variables, you can change the colors of the components, the spacing, the font, and much more! Everything you need to know about customization is at the bottom of every component's page! You may also customize the whole framework and customizing your _variables.scss file. Then you'll be able to build your very own version of MatCSS, with your name on it!

Now what do you say? Are you ready to start using MatCSS? Let's get started!