Getting started with Materialize-CSS

When building an application, it is always great to know that there are frameworks at your disposal to make the workload less. I find them super useful because I can focus on building the functionality of the application, and worry less about the styling when starting with a new language.

Materialize, is one of many frameworks that allows you to add some components to your site, that you would normally add, such as forms, buttons, nav-bars. These are very professional-looking, easy to grab and manipulate to fit into your code.

Once you start reading the documentation on how to get started with Materialize, you will see that there are different ways on how to get it, but I find it easy to use the CDN

The first line of code is the compiled and minified CSS, and the second line is the compiled and minified Javascript, if you are using HTML for the front-end you will be pasting this code in the head of your document.

For my application, I decided to used Sinatra, so I will be pasting the code from the CDN into the file ‘layout.erb’. The idea is that the CSS is the first thing I need to load on the page, once I call on this view, so I will have the CSS link into the head, for the javascript link, I will add this at the bottom of the code, to ensure that all the components have been loaded into the page, and then I can call on the javascript. As an alternative, you can add defer inside the script tag <script defer src=”https://cdnjs…></script> and that should work as well.

adding CDN for CSS in the head of the file

adding CDN for Javascript at the bottom of the file

If we go back to the documentation and click on “Components” we will see a list of different components that we can use, the list goes from Badges, Buttons, Breadcrumbs, Cards, all the way to Navbar, Pagination, and Preloaders.

Let’s explore Navbar, you will see that they provide the code for each sample component as well as a sample layout, of what the final result will look like.

For my personal project, this is my code

<nav class="nav-extended">
 <div class="nav-wrapper">
   <a href="/" class="brand-logo button-collapse" data-  activates="mobile-demo" > 1829 Bakery</a>
   <a href="#" data-target="mobile-demo" class="sidenav-trigger"><i class="material-icons">menu</i></a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
         <li > <a href="/cakes">Cakes</a> </li>
         <li > <a href="/cookies">Cookies</a> </li>
         <li > <a href="/muffins">Muffins</a> </li>
         <li > <a href="/about_us">About Us</a> </li>
         <li > <a href="/contact_us">Contact Us</a> </li>
         <li > <a href="/careers">Careers </a> </li>
      </ul>
 </div>
</nav>
<ul class="sidenav" id="mobile-demo">
  <li> <a href="/">1829 Bakery</a> </li>
  <li > <a href="/cakes">Cakes</a> </li> 
  <li > <a href="/cookies">Cookies</a> </li>
  <li > <a href="/muffins">Muffins</a> </li>
  <li > <a href="/about_us">About Us</a> </li>
  <li > <a href="/contact_us">Contact Us</a> </li>
  <li > <a href="/careers">Careers </a> </li>
</ul>

The card layout that Materializecss provides it is one of my favorites, it has all the functionality that I need for my projects, card title, content, image, links, buttons, and in order to adjust it to fit my code, it is quite simple.

Basic Card Materializecss

<% @cookie.each do |goods| %>
<div class="row">
 <div class="col s12 m6 l3">
  <div class="card">
   <div class="card-image">
    <img src = '<%= goods.img %>' >
   <span class="card-title text color #0277bd light-blue darken-3">.  
     <p><%= goods.title %> </p>
   </span>
   </div>
     <div class="card-content ">
     <p><%= goods.description %> </p>
     </div>
      <div class="card-action">
        <p>Price: <%= goods.price %> </p>
      </div>
  </div>
 </div>
<% end %>

Dynamically rendered card of one of my components

Materialize as other frameworks have your back as well when making the application responsive to different screen sizes, there is no need to write @media query in CSS to accomplish this, Materialize compiled and minified CSS already comes with it, and the way to use it is by using their grid system. Everything in the document.window gets formatted to fit into a grid of 12 spaces, and the way to tell the application, the sides, and how to display the information is based on this line of code

<div class="col s12 m6 l3">

When the wrapped has the letter s, it is us telling the application that when the screen-side is considered small, we want to use all the spaces in the grip for the element inside this wrapper.
When the letter is m, then it is us telling the application that when the screen-side is considered medium, we want to use only 6 spaces out of the 12 to display the element inside the wrapper.
When the letter is l then it is us telling the application that when the screen-side is considered large, we want to use only 3 spaces out of the12 from the grip to display the element inside the wrapper.
Large takes priority over Medium and so does Medium over Small. In other words, the application will check on the screen-side first, and then use the grip preferences provided to display the information.

Quick-demo — — github/repo

If you are creating a new web application or planning on re-design an existing one, and don’t have the time to build your own CSS, or just want to experiment with frameworks, Materialize is a good choice. Materialize will give you the components that you need and to adjust the code to fit your needs is it quite simple, plus Materialize supports Hybrid mobile views just as I showed in the demo.

Resources:

Materialize