DEV Community

Matthew Cullen
Matthew Cullen

Posted on

1

Styling html with materializecss custom classes

"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>

AWS GenAI LIVE image

How is generative AI increasing efficiency?

Join AWS GenAI LIVE! to find out how gen AI is reshaping productivity, streamlining processes, and driving innovation.

Learn more

Top comments (0)

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay