The Plan

Discuss: Frameworks, pros and cons

  • Third party tools, what are they and when to use them?
  • Framework vs. Grids - what’s the difference?
  • Look at BS vs. Foundation vs. style guides
  • About class based systems
  • Dependencies and updating
  • How do these things make money?

Together: Bootstrap

  • BS documentation (funny to abbreviate it BS…)
  • Code a basic layout
  • Practice using inspector to figure out classes
  • Customization best practices - where should our CSS go?

Pair: Make something in BS

Pairing is optional here, and I’ll be available for additional Q & A about assignments and general code stuff.

You can design freely or work from the following:

  • Create a signup form
  • Add a Jumbotron
    • Change the font
    • Add a background texture - Subtle Patterns is a good resource
  • Change the color of the buttons
  • Create a thumbnail gallery

Break

Together: Foundation

  • What’s the difference?
  • A look at the grid
  • Download and set up for customizing
    • A look at Foundation templates
    • Install the Sublime package ‘HTMLBeautify’ if you like (template markup is messy when you download it)
  • Define Sass and Less

Pair: Same as above!

Again, feel free to design on your own, or work through the following (basically same as above so you can compare):

  • Create a contact form
  • Change some form styles:
    • Round the corners of inputs
    • Change the background color of the box when it is selected i.e. in focus
    • Make the labels all uppercase
  • Create a thumbnail gallery
  • Use a Building Block
  • Create an icon bar
    • Bonus: Make that stick to the bottom of the page

For Next Time

Readings:

Note: JavaScript is a hefty topic, this will be confusing! As usual, it’s good to get an idea of what we’ll be covering next class. All will become clear then!

About best practices (at least scan them if you have time):

To do:

Find a website using Bootstrap or Foundation (not from their examples page) - see if you can recognize them in your day-to-day web surfing. Inspect the site’s source and see if you can find a reference to BS or Foundation classes (BS is more common for sure).

  • In other words, get used to inspecting the hell out of websites
  • Also keep an eye out for clearfixes

And if you want extra practice (optional):