Skip to content

Instantly share code, notes, and snippets.

@Shurlow

Shurlow/Materialize.md

Last active June 19, 2017 14:25
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Shurlow/bd1f440ea4a35bd56125979c87465152 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Shurlow/bd1f440ea4a35bd56125979c87465152 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Materialize.md

Materialize CSS Notes

Objectives

  • Explain what Material Design is.
  • Explain what the Materialize framework is.
  • Explain why Material Design and the Materialize framework are useful.
  • Use the Materialize framework to implement Material Design.

Explain what Material Design is.

Turn to your neighbor and explain what Material Design is.

Explain what the Materialize framework is.

Turn to your neighbor and explain what Materialize CSS does. Be sure to talk about how it's used, and what code Materialize uses to accomplish it's goals.

Explain why Material Design and the Materialize framework are useful.

After looking at Materialize and some of it's peers (boostrap, tachyons) come up with your own definition for a CSS framework

Turn and compare notes with your neighbor and discuss why a framework like Materialize is important.

Use the Materialize framework to implement Material Design.

Galvanize Serves (Ice Cream)! Your goal is to design a simple website with Materialze CSS to resemble like the following image:

  1. Create a folder called materialize-example and touch index.html & style.css inside it.

  2. Start with by copying this html to index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Galvanize Serves</title>
  </head>
  <body>

    <header>
      <h1>Galvanize Serves <br>(Ice Cream)</h1>
      <a>Eat Up!</a>
    </header>

    <main>
      <h4>Tasts great!</h4>
      <h4>Many Flavors!</h4>
      <h4>Biggest Scoups!</h4>
      <h4>Contains 0% Lead!</h4>
    </main>

  </body>
</html>

  1. Go to Getting Started & copy the links to the Materialize CSS & JS files.

  2. The Materialize JS file requires jQuery so we need to include this as well (above the materialze.js): <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

  3. Create a style.css file and link to it in the html Add meta tag to fix mobile sizing: <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

  4. Add a background image to the header tag using this url: http://content.mycutegraphics.com/backgrounds/birthday/happy-birthday-ice-cream-cone-background.gif. Give the header some height and explore the background-size property.

  5. Take 5 minutes to read through Materialize helpers and attempt to center the title & button using the framework.

  6. Clean up the h1 tag

  • make text white
  • apply text-transform uppercase
  • remove margins
  • make font bold

  1. Use the materialize raised button component to style the a tag.

  2. Use materialize grid classes to create a 4x4 grid of rectangles containing the h4 elements. Start by making the main component a container and then create and style divs using the row, col and s_ properties.

  3. Style each box in grid

  • set background to indigo
  • set text white
  • give each box 300px height
  • center h4 tag on both axis
  1. To add grid gutters wrap each h4 in a div with class box and apply styles from step 10 to .box instead.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment