# Week 13: Materialize CSS
Agenda
- Materialize CSS
- Licences
- Final Project Website
# Materialize CSS
# Materialize Grids
Materialize has a collection of classes that are very helpful with building layouts.
# Containers
There is a class container which we can use to limit the content to 70% the width of the page and centered.
<body>
<div class="container"></div>
</body>
2
3
# Dividers
If you want to create a horizontal divider between elements you can add a block element with the class divider.
<div class="divider"></div>
# Grids
To create a grid on the page we would create a div with the class row and then other elements inside the row would each have the class col.
By default there are 12 available columns spaces. You can choose how many of the 12 to assign to each of the elements inside the row by using classes like s-1, m-3, or l-6. The numbers represent how many spaces. The letters represent small, medium, or large size screens. Each size means that the number will impact that size screen and up.
<div class="row">
<div class="col s-3">One quarter the width</div>
<div class="col s-6">One half the width</div>
<div class="col s-3">One quarter the width</div>
</div>
2
3
4
5
There are also options for shifting the column elements with offsets or by pushing and pulling. You can see these on the documentation page.
# Materialize Helpers
There are a few utility classes that come with Materialize.
For vertically centering content we can add the class valign-wrapper.
To align text to the left, right, or center we can use the classes left-align, right-align, and center-align.
There is a hide class for hiding any element. Then there is a series of classes for hiding and showing elements depending on the current width of the screen. These classes have names like hide-on-small-only, hide-on-med-and-up, or show-on-med. See the helpers page for the full list.
There is a trunctate class that will cut off the content and add an ellipsis.
There is a hoverable class that will add a box-shadow when hovered over.
There is also a browser-default class which will rollback any element to whatever its default state would be in the current browser.
# Materialize Shadows
In Material Design, every part of an interface will have a specific depth. There is a layering that takes place in Material Design and the height of the layer is shown by how far the shadow spreads out behind the element.
Materialize CSS has five classes that will create shadows with different sizes.
The classes are called z-depth-1, z-depth-2, z-depth-3, z-depth-4, and z-depth-5.
<p class="z-depth-5">z-depth-5</p>
# Materialize SASS
There are two versions of Materialize that you can download. One is the base version and the other contains all the source including the SASS files. You can find both download links on the getting started page
The SASS download will also include a folder called scss. You can edit those files and run your SASS compiler to generate the new version of the framework's CSS.
The most likely change you would want to make is to redefine variables for things like colours. You can do this by editing the scss/components/_variables.scss file from the download.
You can find some examples on the CSS SASS webpage.
# Materialize FAB
The Floating Action Buttons (FAB) were previously discussed last week as a CSS class that you could add.
This example creates a FAB in the bottom right corner of the screen with an edit icon. When the user touches the button we want to show a series of four available actions.
<div class="fixed-action-btn">
<a class="btn-floating btn-large red">
<i class="large material-icons">mode_edit</i>
</a>
<ul>
<li>
<a class="btn-floating red"><i class="material-icons">insert_chart</i></a>
</li>
<li>
<a class="btn-floating yellow darken-1"
><i class="material-icons">format_quote</i></a
>
</li>
<li>
<a class="btn-floating green"><i class="material-icons">publish</i></a>
</li>
<li>
<a class="btn-floating blue"><i class="material-icons">attach_file</i></a>
</li>
</ul>
</div>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
However, to do this we need to add some JavaScript. The following script will locate all the divs with the class fixed-action-btn and then add the required script capabilities to the button to show the four additional options.
document.addEventListener('DOMContentLoaded', function() {
let elems = document.querySelectorAll('.fixed-action-btn');
let instances = M.FloatingActionButton.init(elems, options);
});
2
3
4
# Materialize Icons
The Materialize CSS Framework includes over 900 icons that you can incorporate in your website or webapp for free. The icons are from the Google Material Icons set.
To use the icons you need to add the link to the Google font.
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet"
/>
2
3
4
Then each icon can be added to your page as content. Typically, you would use an <i> element to house the icon. This is the old italic element from the original HTML spec. The italic element was replaced with the semantic <em> emphasis element.
Now, <i> is often used as a container for icons. We just have to use the CSS class name material-icons so the imported font is used and the correct icon character is shown.
We can also add a size class name - tiny, small, medium, or large.
<i class="material-icons medium">user</i>
The text that you put inside the <i> element will determine which icon is displayed.
# Materialize Preloaders
If you want to add an animation to your page to indicate loading or activity then Materialize provides a few types that you can use.
If you want a bar that you can control the percentage that something has loaded then use the following. The width controls the level of completion.
<div class="progress">
<div class="determinate" style="width: 70%"></div>
</div>
2
3
If you want a bar that is just animated to show activity then we can use the indeterminate type without a width.
<div class="progress">
<div class="indeterminate"></div>
</div>
2
3
There are also round spinner types. They require more HTML to carry out the animation. You can edit the colour with the class inside the first child div. Change it between spinner-red-only, spinner-blue-only, spinner-yellow-only, or spinner-green-only.
<div class="preloader-wrapper big active">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
2
3
4
5
6
7
8
9
10
11
12
13
Materialize Preloader Reference
# Materialize Scripted Components
There are many JavaScript controlled components available in the Materialize CSS framework. Amoung them are the Carousel, Modal Windows, Side Nav menus, Tabs, Tooltips, and Toasts.
Materialize Carousel Reference
Materialize Tooltips Reference
# Project Licences
When we create our projects with NPM or Git you will often see references to project licence files that talk about who can do what with the code in your project.
Do you want to have people pay to use your code? Is it a one time payment or a per use fee? Is the code free for others to use as long as they give you credit? Are people allowed to make changes to your code when they include it in another project? Are they allowed to distribute their project to other people if their project includes your code? These are just some of the questions that having the correct licence will answer.
This website will help you decide on which type of licence would be most appropriate for your project.
# TODO
TODO before next week
Work on your final project website