Styling html with materializecss custom classes

Posted by Matthew Cullen on June 9, 2020

“Materialize is a UI component library created with CSS, JavaScript, and HTML. Materialize UI components help in constructing attractive, consistent, and functional web pages and web apps, while adhering to modern web design principles such as browser portability, device independence, and graceful degradation.”

examples:

Setup

  • add links to the materialize stylesheet, javaScript and google font images found here

Why I enjoy using it

  • opinionated about how elements should look and behave according to design principles followed by google
  • beautiful design with out of the box custom class
  • easy to use
  • supports responsive design
  • plenty of documentation
  • ruby gem for additional quick implementation
  • open source

Example of usage

  • Adding a class provided by materialize like “container” <div class="container">anything in a class container has custom margins</div>