Matter

Typography

For the body text we used Roboto, the regular and semibold weights and for the icons we chose Material Design Iconic Font.

Sizes

Text extra small lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies, arcu vitae condimentum suscipit, nibh lacus consequat.

Text small fusce id elementum tellus. Cras condimentum sem augue, nec vulputate tortor pellentesque in nibh lacus consequat eros.

Text base lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies, arcu vitae condimentum suscipit, nibh lacus consequat eros, in lobortis ipsum arcu vitae mi. Curabitur vitae.

Text medium arcu vitae condimentum suscipit, nibh lacus consequat eros, in lobortis ipsum arcu vitae mi. Curabitur vitae fringilla ante condimentum sem augue arcu vitae condimentum.

Text large lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies, arcu vitae condimentum suscipit, nibh lacus ultricies, arcu vitae condimentum consequ.

Text extra large lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies, arcu vitae condimentum suscipit, nibh lacus.

Colors

Text primary imperdiet vitae commodo eu, pellentesque ut.

Text success nam blandit consequat metus, ac eleifend posuer.

Text warning ultrices turpis non nisi sollicitudin blandit.

Text danger urabitur condimentum nisi nec felis aliquet ullam.

Text info am blandit consequat metus, ac eleifend lacus pell.

Text secondary donec finibus tortor nibh curabitur.

Elements

Focusing on the html tags like ul, ol, small, strong, ins, etc

Nunc et consectetur leo, non elementum sapien. Integer bibend velit sit amet nulla.
Nunc et consectetur leo, non elementum sapien. Integer bibendum.
Nunc et consectetur leo, non elementum sapien. Integer bibendum.
  1. Suspendisse scelerisque
  2. Finibus sollicitudin ex
  3. Accumsan dui vitae nulla
    1. Velit sit amet nulla fringilla
    2. Diam sed dolor blandit
  4. Sed dolor blandit tincidunt
  • Suspendisse scelerisque
  • Finibus sollicitudin ex
  • Accumsan dui vitae nulla
    • Velit sit amet nulla fringilla
    • Diam sed dolor blandit
  • Sed dolor blandit tincidunt
  • Suspendisse scelerisque
  • Finibus sollicitudin ex
  • Accumsan dui vitae nulla
    • Velit sit amet nulla fringilla
    • Diam sed dolor blandit
  • Sed dolor blandit tincidunt
  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7
  • Item 8
  • Item 9
  • Item 10

About Matter

Matter is a material design system built on top of the latest version of bootstrap. It's released under MIT which means you can do whatever you want with it, you can use it for your personal projects, client projects or you can sell it, there are no limitations.

Matter is a part of a failed side project. It was meant to help developers build applications more easily no matter the environment. Long story short, the maintainer (Alex Andonie) lost his interest in the project and everything fell apart. To pursue the initial idea of wanting to help other developers and to keep the project alive, Alex decided to refactor Matter and release it for free. The version you're currently viewing is a stripped down version. More components will be added as they get refactored. Star and watch the repo to get notified of the new additions and if you want to add, fix or change something, feel free to submit a PR as all the good stuff will get merged.

Fork on Github