/html-css-layout-bootstrap-sass

Primary LanguageJavaScriptOtherNOASSERTION

General Assembly Logo

CSS: Layout with Bootstrap

Prequisites

Objectives

By the end of this lesson, students should be able to:

  • Install bootstrap-sass into a front-end project.
  • Create mobile-first, responsive site layouts using bootstrap.
  • Maintain semantic HTML markup using Sass mixins provided by bootstrap-sass.
  • Reference bootstrap documentation.
  • Add a modal to a front end project.

Preparation

  1. Fork and clone this repository.
  2. Install dependencies with npm install.

Twitter Bootstrap

Bootstrap is a free and open-source collection of tools for creating websites and web applications. It contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. It aims to ease the development of dynamic websites and web applications.

Bootstrap is a front end framework, that is, an interface for the user, unlike the server-side code which resides on the "back end" or server.

Bootstrap is the most-starred project on GitHub, with over 90K stars and more than 38K forks.

Bootstrap Wiki

Install Bootstrap

We'll use bootstrap-sass, the official Sass port of bootstrap. The next major version of bootstrap will use Sass by default. For now, using Sass allows us to keep our markup clean.

If you're starting a new project, first get a copy of js-template. If you're unsure how to install the template, see the installation instructions.

After you have the initial template files, follow these steps to install bootstrap-sass into your project. For this talk, we've already installed the template files, so you can just follow along.

  • npm install --save-dev bootstrap-sass to download bootstrap and add it as a dependency.

  • Add bootstrap-sass JS modules as a vendor script inside grunt/webpack.js.

    -       vendor: ['jquery'],
+       vendor: ['jquery', 'bootstrap-sass'],

  • Register the font path and include the bootstrap-sass module in your style manifest.

    + $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
+ @import '~bootstrap-sass/assets/stylesheets/bootstrap';

  • Remove normalize.css from package.json and index.js since bootstrap already includes its own browser reset.

Lab: Review Sites Made With Bootstrap

In squads closely inspect the following site list. Keeping these questions in mind please write down your thoughts and we will discuss them as a class.

  1. How are the the pages similar?
  2. How is the HTML similar among the pages?
  3. As you interact with the site how does the DOM change (if at all)?
  4. How are elements on the pages horizontally arranged?
  5. Notice any similarities among bootstrap pages in general?

Bootstrap Documentation

For components and jQuery plugins always reference the Bootstrap docs.

Bootstrap Documentation

Lab: 12-Column Grid

After we properly install Bootstrap, lets get some firsthand experience writing it. Using the documentation we discussed earlier write a simple grid in the index.html file located in this repo. Make use of col-xs, sm, md, lg and xl. Try making an evenly spaced 3x3 grid.

  • Place your column divs within a row div.
  • Place your row divs within a container div
  • Experiment with various viewport sizes

Lab: Modals and More

Follow along as I addd a bootstrap modal to our current sandbox page.

On your own:

  • Referencing the Bootstrap documentation add an input-group or well to your modal.
  • Using your knowledge of jQuery write a function so that when "save changes" is clicked the input in the well or input group is console logged in Chrome.
  • Refrencing the Bootstrap documentation add a navbar to your page.
  • Move the button that opens up the modal to the navbar.

Demo: Using 1bootstrap-sass1 for Semantic Markup

Follow along as I use mixins to make our grid system more semantic.

<div class="container">
  <div class="row article">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-md-4">.col-md-4</div>
  </div>
</div>


<div class="container">
  <div class="article">
    <div class="main-content">.col-md-8</div>
    <div class="right-sidebar">.col-md-4</div>
  </div>
</div>

Lab: Semantic Markup

  1. Using the code I used above in your index.scss file refactor on your own.
  2. Write your own mobile ready page using Bootstrap classes.
  3. Refactor your HTML to be more semantic (copy/paste your previous code and refactor it using bootstrap-sass to make it semantic).

Useful Resources

License

Source code distributed under the MIT license. Text and other assets copyright General Assembly, Inc., all rights reserved.