CSS Front-End Frameworks & Materialize
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
Wait a minute...
Are you all sitting in the same seats again?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
Wait a minute...
Are you all sitting in the same seats again?
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
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!
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
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:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
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.
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
Something Else
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
Setup
Something else
What does this evaluate to?
Objectives
- Something
- Something Else
- Some other thing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
Revisiting Post It!
Time for a CFU!
Reflect
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
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:
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
Objectives
- Something
- Something Else
- Some other thing
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
Check Your Understanding
- Pull up Something
- Use Something Else
- Try Some Other Thing
- Check your work and refactor
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
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
![](https://s3.amazonaws.com/media-p.slid.es/uploads/287971/images/2696803/GALVANIZE_logo.png)
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,066