CSS Front-End Frameworks & Materialize

Wait a minute...
Are you all sitting in the same seats again?

Wait a minute...
Are you all sitting in the same seats again?

Move somewhere new, sit next to someone new!
2 minutes, right now!
Objectives
- Describe material design and it's relationship to Materialize
- Set up Materialize in a project.
- Use Materialize to layout a web page.
- Use Materialize components in your web page.

Objectives
- Describe material design and it's relationship to Materialize
- Implement Materialize in a project.
- Use Materialize to layout a web page.
- Use Materialize components in your web page.

Material Design
vs.
Materialize
What is Material Design anyway?
What is Materialize then?
What is Materialize then?
I'm glad you asked!
What is Materialize then?
I'm glad you asked!

Take the next 6 minutes to read about http://materializecss.com/
and answer the 2 questions:
What is Materialize in regard to Material Design?
How do I use Materialize?
If you aren't taking notes already,
please do so for this!
Reading Exercise!
GREAT 3-2-1!
Discuss this with your neighbor:

What are 3 things you learned about materialize?
What are 2 things you connected with materialize as you were reading?
What is 1 question you still have?
Objectives
- Describe material design and it's relationship to Materialize
- Implement Materialize in a project.
- Use Materialize to layout a web page.
- Use Materialize components in your web page.

Objectives
- Describe material design and it's relationship to Materialize
- Implement Materialize in a project.
- Use Materialize to layout a web page.
- Use Materialize components in your web page.

Steps to set up Materialize with CDNs
- set up the HTML file
- Link the CSS framework files
- Link the JS framework files
- Make sure everything is connected by testing it!
Steps to implement Materialize with CDNs
- set up the HTML file
- Link the CSS framework files
- Link the JS framework files
- Make sure everything is connected by testing it!
OK! Time to connect Materialize!
Fork and clone this repo and connect it to materialize: https://github.com/lionel-lints/dom-practice-site
Objectives
- Describe material design and it's relationship to Materialize
- Implement Materialize in a project.
- Use Materialize to layout a web page.
- Use Materialize components in your web page.

Objectives
- Describe material design and it's relationship to Materialize
- Implement Materialize in a project.
- Practice with Materialize to layout a web page and add components.

Layouts:
grids, flex, and more!
Layouts:
Subtitle
Objectives
- Describe material design and it's relationship to Materialize
- Implement Materialize in a project.
- Use Materialize to layout a web page.
- Use Materialize components in your web page.

Something Else

Setup
Something else
What does this evaluate to?
Objectives
- Something
- Something Else
- Some other thing

Revisiting Post It!
Time for a CFU!
Reflect

Show how to use Something Else on your whiteboards
How do we use Something Else with Something?
This technique is called Everybody Writes
Take Note:

Something Else:
- Do Something
- Do Another Thing
- One More Thing
- These Are The Steps
- I have Named The Steps
This technique is called Name The Steps
Anytime you Name The Steps, make them write it with BOARD = PAPER
Some other thing

Objectives
- Something
- Something Else
- Some other thing

Check Your Understanding
- Pull up Something
- Use Something Else
- Try Some Other Thing
- Check your work and refactor

This technique is called Name The Steps
They should write it down, the BOARD = PAPER techique
Exercise:
10 Minutes: try to do Something
10 Minutes: Do Something Else, Recursively
25 Minutes: Use Some Other Thing to fix the problem with Something Else

This technique is called Brighten Lines
Materialize
By Lionel Lints
Materialize
A bit of bits about google's material design and Materialize, the css framework.
- 1,064