Today’s goals:

• Discuss using web frameworks (such as Skeleton and Bootstrap)
• Begin learning about Bootstrap, a very popular web development framework

 Today’s featured site:

• http://codepen.io/brettmitchell/pen/KWwgQo– This sunrise was created entirely with CSS!

 Web Frameworks and Bootstrap

• Working in pairs, please find the answers to the following questions:
  1. What is Skeleton?
  2. Why would you want to use Skeleton?
  3. What are front end web frameworks and what are some examples of them?
  4. Why would you consider using them?
  5. What is Bootstrap?
  6. How is Bootstrap different than Skeleton?
  7. What are some well-known sites made with Bootstrap?

 Quick facts

• About frameworks– what they are, what to use & why. Here is another good site to check out (thanks, Curt!).
• Bootstrap is based upon 12 columns, just like Skeleton
• Columns must be inside rows (like Skeleton)
• Font Awesome (remember that?) was originally designed for use with Bootstrap
• Bootstrap was originally created at Twitter in 2010
• To use Bootstrap, you can either download all of the files OR link to the supporting CSS and JavaScript files (like the Skeleton CDN we used yesterday; there is a CDN for using Bootstrap)

 Getting started with Bootstrap

• Let’s watch this helpful video (see more of Quentin Watt’s Bootstrap tutorials here). Let’s look at his tutorials list to get a basic overview of what Bootstrap includes to create a responsive webpage.
• Let’s explore the Bootstrap webpage. You will find answers to the following questions.
1. Does the site have code examples? Where can you find details about the code?
2. Does this site have themes? If so, what is different about the themes than what you might find somewhere else online?
3. What steps do you have to take to get started with Bootstrap?
4. Does Bootstrap use normalize.css? (Hint- look at CSS page). What is that again?
5. Can you make your images responsive when using Bootstrap? How? (Hint- look at CSS page).
6. What are Bootstrap’s grid classes called? For example, Skeleton used row and column. What does Bootstrap use? (Hint- see here).
7. Bootstrap comes with some JavaScript functionality. What are some examples of the built-in JavaScript features? (Hint- look here).
8. As a group- let’s check out the Components page.
• Bootstrap basics #1- page set up, HTML tags, and CSS classes: Let’s try this basic Bootstrap tutorial. Let’s pay attention to what files are need to make Bootstrap work and the HTML tags and CSS classes used.
• Bootstrap basics #2- column classes and their sizes: Bootstrap provides options for page layout on small, medium, and large screens. You can simply choose to have your content stack vertically on small screens (like we saw with Skeleton) or you can preserve your horizontal layout on a small screen by using the xs class like this. Let’s get rid of the xs classes except for the last row and see what happens. Let’s see more about Bootstrap’s grid here.