Materialize_LEGENDS.md

Materialize

(5) Intro

• Why you should master styling, early
• Pros/Cons of Materialize

(15) Good CSS vs Bad CSS with examples

(5) Uploading into Projects

(15) Documentation

(15+) Live example & Play Time

Bad Example 1

stevepentler.github.io

Bad CSS without Framework

• lots of inline styling
• extremely verbose
• poor use of classes

Bad Example 2

HireMyTribe

Unmanageable CSS

• extremely specific stying with many ID's
• hard to digest what is hitting what

Live Examples

Idea Box Live

Ticket Maestro Live

PAINCAVER gif

PAINCAVER Live

Login with: [email protected] || Wisconsin

Manageable CSS

• great use of classes
• CSS is organized/split based on location
• proper naming conventions

Uploading Materialize into Projects

• Example of local materialize files
• Example of CDN materialize
• Example of CDN materialize javascript
• Example of Icon Upload
• Example of Custom Google Font
• Example of local materialize in Sinatra

Play Time with your personal project or my personal project

1. Fork Paincaver
   1. Click FORK, please
   2. copy "the link"
   3. $ git clone "link"
2. Command Line: $ bundle exec
3. Command Line: $ rails s
4. Visit localhost:3000, click on Login with Strava, login with username and password
5. Open it in your editor
6. Click Folder App
7. Click Folder Views
8. Click Folder Workouts
9. Click _index_center.html.erb
10. Play

I'm always up for styling - stevepentler on slack