CSS Frameworks – Bootstrap

Posted on by tchastkavich

Shape of the Day:

  • Questions on CSS Frameworks
  • Learn about Bootstrap
  • Tutorials

Website of the Day:

http://responsiv.eu/ – This neat website shows you what your webpage would look like on different apple devices.

1. CSS Frameworks Questions (answer in a document editor program)

  1. What are CSS Frameworks?
  2. Why do people use them?
  3. Find CSS Frameworks that are currently popular and list them.
  4. Find sites created with CSS frameworks, give a brief description of the website (usage, or reason why it exists) and list the type of CSS framework it uses if it is shared.
  5. What are some advantages of using a framework?
  6. What are some disadvantages of using a framework?
  7. How do you pick a framework?

2. Bootstrap

  • A popular responsive front-end framework created and maintained by Twitter
  • Flexible grid built on flexbox (the columns add up to 12)
  • Has a built-in CSS for grid layout, buttons, menus & lists etc.
  • The CSS classes are applied to HTML elements to make use of Bootstrap’s default styles for layout and visual design etc.
  • Has built-in JavaScript for things like photo slideshows, pop-up windows, etc.
  • Plentiful documentation and code samples to help developers get started quickly and easily to save time
  • You either must download all the files or link to the supporting CSS and JavaScript files to use Bootstrap
  • Here are some Bootstrap examples:

3. Tutorials:

  • Using Bootstrap Basics #1 – Page set up, HTML tags, and CSS classes – Try this basic Bootstrap tutorial. Try to pay attention to what files are needed to make Bootstrap to work and the HTML tags and CSS classes used.
  • Bootstrap Basics #2 – column classes and sizes for columns: Bootstrap gives options for page layout on small, medium and large screens. You can choose to have content stack vertically on small screens or you can preserve your horizontal layout on a small screen by using the xs class like this. Lets get rid of the xs classes except for the last row and see what happens.
  • Here’s a preview of the page you are going to create by reviewing the content in each section – https://www.w3schools.com/bootstrap/trybs_theme_band_full.htm