# Week 12: Materialize CSS & Github Pages

Agenda

Materialize CSS

# Materialize CSS

Materialize CSS is a CSS framework based on Google's Material Design.

# Materialize Colors

Materialize CSS comes with a large set of predefined colours that we can use as class names in our HTML. The predefined colours can be modified if you edit the SASS code to change or @extend the colours and then recompile the CSS. See the SASS section in next week's notes for more details.

The colours are names like red, purple, indigo, blue, light-blue, or green. Each colour name is a CSS class name. Additionally, you can add a modifier class name like lighten-1, darken-2, or accent-3. Each of these three names can have a number value 1, 2, 3, or 4 at the end.

<p class="purple accent-1">lorem ipsum</p>
<p class="purple darken-4">lorem ipsum</p>
<p class="purple lighten-3">lorem ipsum</p>

1
2
3

Those will all set the background colour for the element.

If you want to set the text colour instead of the background then we just append -text to the name of the colour.

<p class="blue-text">lorem ipsum</p>

# Materialize Typography

Materialize Typography Reference

Materialize CSS has default sizes and fonts that are applied to each HTML element.

There is one extra class called flow-text which you can add to block elements. It will automatically resize fonts to keep the line length between 45 and 80 characters as the webpage is resized.

<p class="flow-text">
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta, tempore?
  Magnam provident modi eligendi maxime necessitatibus dignissimos ex
  consectetur quae dolorem quos nihil, repudiandae vel dolores quidem! Voluptas,
  voluptate voluptates.
</p>

1
2
3
4
5
6

# Materialize Buttons

Materialize Buttons Reference

There are a few different types of buttons that are available in Materialize CSS - raised, flat, large, small, floating and disabled. The floating buttons are called Floating Action Buttons - FABs. See the notes in next week's page about the scripted functionality with FABs.

The basic class for buttons is btn. These button classes could be added to a <button> or <a> element.

The raised buttons are ones with with shadows and background ripple effects. We would add the class names waves-effect and waves-light to the base class.

<button class="btn waves-effect waves-light">Click</button>
<button class="btn waves-effect waves-purple">Click</button>

1
2

To change the size of any of the types of buttons we can change the base name to btn-large or btn-small.

<button class="btn-large">Click</button>
<button class="btn-small">Click</button>

1
2

The default colour for buttons in Materialize is teal. However you can add another colour class name to the button as an override.

<a href="#" class="btn purple">Click</a>

The flat buttons have no border, shadow or background colour. The disabled buttons act and appear as you would expect.

# Materialize Cards

Materialize Cards Reference

A Card is a fairly standard interface component that you see on many webpages. Typically they are used to display content collections where each element is the same size.

The outer shell will get the class card. Inside there are two main areas which use the classes card-content and card-actions. The actions area contains buttons. Inside the content area you can also use the class card-title to provide a heading for the card.

<div class="card">
  <div class="card-content">
    <h2 class="card-title">Jack Smith</h2>
    <p>A person known as Jack Smith.</p>
  </div>
  <div class="card-actions">
    <button id="btnAdd" class="btn-flat">Add</button>
    <button id="btnRemove" class="btn-flat">Remove</button>
  </div>
</div>

1
2
3
4
5
6
7
8
9
10

# Materialize Collections

Materialize Collections Reference

A collection is a list view. There is a container with the class collection and then individual list items, each with the class collection-item.

You can use <ul> and <li> as the container and items or some other HTML, like this:

<div class="collection">
  <span class="collection-header">Group Name</span>
  <a href="#" class="collection-item">Item One</a>
  <a href="#" class="collection-item">Item Two</a>
  <a href="#" class="collection-item">Item Three</a>
</div>

1
2
3
4
5
6

We can also add headings to parts of the collection by using the collection-header class.

If you want to add other content like badges, buttons, or avatars inside the items then we can use the secondary-content class on a span or some other inline element as the container for the badges or buttons.

For the avatars we can add the avatar class to the collection-item element. The add an <img> or icon as the first element inside the collection-item.

# Materialize Navbars

Materialize Navbars Reference

A Navbar element is made up of a <nav> element which contains two parts - a logo or brand link, plus a list of nav links.

<nav>
  <div class="nav-wrapper">
    <a href="#" class="brand-logo">Logo</a>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="sass.html">Sass</a></li>
      <li class="active"><a href="badges.html">Components</a></li>
      <li><a href="collapsible.html">JavaScript</a></li>
    </ul>
  </div>
</nav>

1
2
3
4
5
6
7
8
9
10

Inside your <nav> element you need a block element with the class nav-wrapper to create the proper alignment and padding.

The <a> element is the branding / home link followed by the <ul> element for the links. The <ul> will have a class right or left indicating where you want the links to appear. There are also possible classes that determine when the nav menu will collapse into a hamburger menu. hide-on-med-and-down means that your menu will be come a hamburger menu if you are at the small or medium breakpoints.

The breakpoints in Materialize are similar to the Bootstrap framework and are defined as:

Mobile Devices	Tablet Devices	Desktop Devices	Large Desktop Devices
`<= 600px`	`> 600px`	`> 992px`	`> 1200px`

In the list items that hold the <a> elements you can add the class active to change the background and highlight the current page link.

# Materialize Forms

Materialize Checkbox Reference

Materialize Pickers Reference

Materialize Radio Buttons Reference

Materialize Inputs Reference

Materialize Select Reference

Materialize Switches Reference

There are many different parts to a form. Frequently there is a lot of CSS required to make forms look and work the same across different browsers.

Materialize provides a lot of helper classes to standardize the appearance of the elements across platforms.

It also provides useful functionality for things like DatePickers in the Pickers reference.

# Materialize Mobile Features

Materialize Mobile Feature Reference

The mobile section talks specifically about two items - the SideNav slide out bar and Toasts.

It is pretty obvious what a SideNav bar is and does. There are more notes on this in next week's content.

A Toast is a self-removing Notification pop-up. There is some available script methods with the these which are discussed in more detail next week.

# TODO Before Week 13

Self-Directed TODO

Review the Materialize CSS documentation and watch the NetNinja YouTube Playlist on Materialize CSS as preparation for your final project.

← Week 11: SASS Week 13: Materialize CSS →