mahuntington
/
panpsychism
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '635bddeb9f'
${ noResults }
panpsychism/unit_01/w03d04/morning_exercise/README.md

2.1 KiB
Raw Blame History

Morning Exercise

CSS Frameworks

We're going to be looking at some popular CSS frameworks. A CSS framework can save you time for styling applications. A framework is really just a stylesheet that has been designed by someone else that you are implimenting into your code. You can make changes to the styles using your own stylesheet. You can use them to snazz up your projects, but we also want you to be familiar with them because, a lot of times when you jump into a company that has a pre-existing codebase, you will encounter the use of a CSS framework.

Some frameworks that we will be looking at today:

Skeleton
Lightweight framework that has a nice, simple grid system.

Bootstrap
Probably the most popular framework out there right now. Originally created by some guys who were working at Twitter.

Materialize
This framework is difficult to manipulate, but I like it for the parralax and the cards.

Pure CSS
Similar to skeleton, this is a light framework with a grid system and responsive design.

What you should do:

  1. Pull down the files for the morning exercise to your local computer.
  2. Navigate inside the CSS_Frameworks folder.
  3. Open the files using the command subl .
  4. Open the index.html file in your browser by typing open index.html in your terminal.

Independent work:

  1. Choose one of the frameworks listed here that we did not use (or another CSS framework that you've heard about) and modify this html file.
  2. See how nice you can make the page with only a few minutes of work. Focus on using the grid system that is built in to the framework.
  3. Make a change to a color on the page.
  4. What's one thing that you like about this framework?
  5. What's one thing that may be a problem with using this framework?
  6. Take a screenshot of your website and paste it in Slack. NOTE: if you don't have a Chrome Extension that allows you to take a picture of the entire page in one shot, install it now (I recommended "Full Page Screen Capture" as an option)!