Web Fundamentals 3 Bootstrapping it up

The aim of the rest of this session will be to create the website for "Sam's Sarnies" using Twitter Bootstrap.

1. Clone down the repository for the bootstrap exercise: https://github.com/code61/bootstrap_exercise.git
2. Open bootstrap_exercise/index.html in your browser.
3. Go to the Bootstrap website (it's hosted at github, like your first_site) and click the Download Bootstrap button (not the Download Source).
4. Unzip and copy the dist folder into the bootstrap_exercise folder.
5. Open index.html in Sublime Text and Chrome.
6. Add a link to the twitter bootstrap stylesheet into index.html

   <link href='dist/css/bootstrap.css' rel='stylesheet'>
   

   Note that you're using a document-relative link to a file two subfolders down.
7. Refresh the page in Chrome. Notice how the fonts have changed.
8. Add the following line to the head section:

   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   

   as suggested in the CSS / Overview section of the Bootstrap docs.

1. Add a container div class='container' around the page content.
2. Create a row at the top of the page, with two columns, with the left twice as wide as the right. Put the h1 in the left column and the img src='images/sandwich.png' on the right.
3. Create a row with three equal colums to hold each of "The Buzz" divs.

1. Change the quotes in 'The Buzz' to use blockquotes. (Don't worry about the vertical grey lines - we'll remove those later.)
2. Change the paragraphs in 'Our mission' to be lead body copy.

1. Change the 'Send' button to a success button:

   <button class='btn btn-success' >Send</button>
   

   You might also need btn-small in the Recent Activity section.
2. 2. Make the social links at the bottom in to large buttons (we'll colour them later):

   <button class='btn btn-lg' >Send</button>
   

1. Make the images in 'The Buzz' round, by adding the img-circle class.
2. You can center the image by adding the helper class center-block.
3. Change the main sandwich image into a img-responsive, as described in the responsive images section. Try resizing your browser and see how it changes size.

1. Create a file called main.css and write the following CSS:

   #social-buttons button {
     color: white;
   }
   .btn-twitter {
     background-color: #00acee;
     border-color: #009ad5;
   }
   
   .btn-facebook {
     background-color: #4868ac;
     border-color: #314776;
   }
   
   .btn-pinterest {
     background-color: #b62f26;
     border-color: #b62f26;
   }
   

2. Link this file into the head of index.html underneath your link to bootstrap.
3. What happens? Notice how in the first rule we've selected only those buttons that exist inside an element with id=social-buttons.

1. Change the background of the jumbotron to be the image fruit-and-veg.png by adding the css

   .jumbotron {
     min-height: 600px;
     background-image: url('images/fruit-and-veg.jpg');
     background-size: cover;
     background-attachment: fixed;
   }
   

2. This doesn't look quite right. The problem is that the jumbotron is it is inside the div class='container'. You can change this by moving it inside:

   <div class="jumbotron">
     <div class="container">
   
     </div>
   </div>
   

   Similarly you will now need to create new containers inside the div id='buzz' and div id='mission'.
3. Change the background color of the mission section to rgba(32, 35, 41, 0.9) and the font colour to #ddd

1. Look at the html for the basic starter template.

2. Use it to add a navbar to your site.

3. Make it a navbar-fixed-top. You will need to add

    body { padding-top: 70px; }

   to main.css.

4. Add a search box to the navbar. Use the pull-right class to put it on the right hand side.

1. Make any other changes necessary to make your site look like the example
2. If you get stuck check by looking at the gh-pages branch on the github repo.

Finish off the bootstrap_exercise from class

Continue work on your personal site. You might want to think about using Twitter Bootstrap!

If you don't already have a google account (e.g. via a gmail address), you need to sign up for one: https://accounts.google.com/SignUp. You'll need it in class next week!

1. (Optional) Read this article which explains about CSS Specificity (and more).
2. (Optional) Read this article on CSS selectors.