Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
NICAR 2015: Bootstrap: Responsive, mobile-first framework

#NICAR 2015: Twitter Bootstrap Responsive, mobile-first HTML, CSS, JS framework

One of the most supported, popular and feature-filled ways to get started building a website is to use Twitter Bootstrap. Bootstrap is a responsive, mobile-first HTML, CSS, & JS framework. Know what those three terms (responsive, mobile-first and framework) mean? If not, take a moment to look them up.

NICAR 2015 • March 7th • 2:10PM - 3:10PM
http://slides.com/ebigalee/nicar-2015-bootstrap

###What you will need today:

  • Open a browser – Chrome or Firefox for today please.
  • A text editor of your choice:

##I. Get Started Gather Bootstrap 3 resources for a project.

http://getbootstrap.com/

Decide either to (1) include the CDN links in your project OR (2) download Bootstrap.

####1. Include CDN links This means you're going to pull in the Bootstrap files to your website on load. If you aren't able to download Bootstrap today, use this option. It means you won't have the files as part of your website structure below. Do the following then skip to section II.

  • Create a project folder called “Bootstrap_NICAR_2015”
  • Inside your project folder, create a folder called "css"
  • Optional for today, add folders called "images" and "js"
  • Jump down to Section II.

####2. Bootstrap offers three download options:

  • If you need a basic structure and you ARE NOT already using a compiler – choose the first option “Bootstrap”
  • If terms like SASS, Grunt, Gulp, Bower, Yeoman, Compass, and so on, mean something to you, then the more customizable option is to use either “Source Code,” which uses LESS, or “Sass,” which is a port using SASS/SCSS.

Today we’re going to choose the first option “Bootstrap.”
If you have trouble downloading, please let me know. We can also use the CDN without much trouble.

  1. On http://getbootstrap.com/getting-started/, choose the “Bootstrap” download option.
  2. Unzip the downloaded file.
  3. Move the Bootstrap folder (ex. bootstrap-3.3.2-dist) outside of Downloads.
  4. Rename the folder “Bootstrap_NICAR_2015” or a name of your choice.

NOTE: You can also choose to drop the Bootstrap files and folders into a current project, but today we’re going to use Bootstrap as our starter folder for a project.

##II. Set up a Project Use Bootstrap to set up a basic website structure.

###Using Bootstrap as your project folder: We’ll need to add a few more pieces so we can start working on our new website:

  • In the Finder, add an images folder
  • Add a blank page called index.html
  • Add a blank page called styles.css file into the css folder
  • Open index.html and styles.css in your text editor
  • Open index.html in your browser so we can see our site

###1. Paste in Bootstrap’s basic HTML template in index.html

http://getbootstrap.com/getting-started/#template

Notice that Bootstrap’s styles (CSS & Components) are linked in to our new page within the <head> tag, and that Bootstrap’s jQuery plugins (JavaScript) are linked in at the very bottom of the <body> tag. We’re also given a CDN to connect to a recent version of jQuery, which is required for the JS (functional) portions to work.

###2. Link styles.css to index.html We will need our own stylesheet to add our own custom styles to the website.

index.html:

<head>
    ...
    <link href="css/styles.css" rel="stylesheet">
</head>

Place this resource beneath the to our Bootstrap styles in the <head> — needs to underneath the link for Bootstrap’s CSS because we might want to override those styles.

If you're using the CDN today:
Replace CSS link with first two lines. Replace link to JS right before </body> with last two lines.

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

###3. Paste in default Bootstrap media queries

http://getbootstrap.com/css/#grid-media-queries

styles.css:

/* Extra small devices (phones, less than 768px) */ 
/* No media query since this is the default in Bootstrap */ 
/* Most of your styles will be underneath this comment but before ‘Small devices’ */

/* Small devices (tablets, 768px and up) */ 
@media (min-width: @screen-sm-min) { ... } 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: @screen-md-min) { ... } 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: @screen-lg-min) { ... }

We are using the vanilla version of Bootstrap with CSS. This means we need to take the variables in this example and set them to pixel widths. We also want to remove the dot-dot-dot, which indicates we should put our styles between the curly brackets.

styles.css:

/* Small devices (tablets, 768px and up) */ 
@media (min-width: 768px) {

} 

/* Medium devices (desktops, 992px and up) */ 
@media (min-width: 992px) {

} 

/* Large devices (large desktops, 1200px and up) */ 
@media (min-width: 1200px) {

}

##III. Using Bootstrap’s predefined classes Use Bootstrap’s styles and components to build your site.

###1. Set up a grid system using a container with rows and columns Nearly required is <div class="container">, but the rows and columns are optional. Only use them when you want to or need to. You CANNOT have columns if you have not set a row first.

####Basics

  • Twelve columns in each row, even if it’s a row inside of a row.
  • Choice of container type (responsive columns won’t work without this set):
  • .container – wrapper that automatically sucks in content
  • .container-fluid – wrapper that doesn’t suck in content

index.html

<body>
<div class="container">
	<h1>NICAR 2015: Bootstrap</h1>
        <p class="lead">Basic columns in Bootstrap</p>
	<div class="row">
		<div class="col-md-4">
			<!-- content -->
		</div>
        <div class="col-md-8">
			<!-- content -->
		</div>
	</div> <!-- .row -->
</div> <!-- .container -->

<script>…</script>

</body>

###Special classes

.lead
Example usage: <p class="lead"></p> Common usage: for a tagline because it automatically makes the font-size larger or smaller as the page is resized

Add content and styling so we can see our grid.

--> Let’s add some styling and content so we can see that our grid system is working.

index.html:

		…
		<div class="col-md-4 hiro">
			<!-- content -->
		</div>
                <div class="col-md-8 baymax">
			<!-- content -->
		</div>
		…

styles.css:

.hiro {
	background-color: #ccc;
}

.baymax {
	background-color: #666;
}

###2. Start with pre-defined styles for basic elements

Bootstrap provides default styling for essential typography, tables, forms, buttons and images. Look through the documentation for examples.

--> Let’s add a button:

Use any of the predefined styles to change what your button looks like:

http://getbootstrap.com/css/#buttons-options

###3. Add navigation Navigation can be added on your own, or you can make use of the various ways Bootstrap provides, such as dropdowns, button dropdown, tabs, “pills” or a pre-styled navbar.

####Basic navbar options include:

.navbar-fixed-top
Fixes the navbar menu to the top of the screen.

.navbar-inverse
Styles the default navbar with dark colors.

.navbar-default
Styles the default navbar with light colors.

####Set a different page to be active: --> Let’s simplify our navigation so we get a feel for what the Bootstrap navbar includes:

  1. Inside the code, get rid of: a. <form> b. <ul class="nav navbar-nav navbar-right"> c. and INSIDE <ul class="nav navbar-nav">, remove <li class="dropdown">.
  2. Inside <ul class="nav navbar-nav">, add in 3-4 new <li><a href="#">Link</a></li>
  3. Change which link is active by added to your <li class="active"> then reload.

##4. Make an embedded object work in your responsive grid

If you’re embedding a video or other content, it will usually come in an <iframe>, , or tag. By default these tags usually provide a set width and height for their content, which doesn’t work so well with our responsive grid system.

Don't forget to replace dot-dot-dot — this time WITH a URL, but MINUS the “http:” (See code below)

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="//youtu.be/29fejX2UPoQ"></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="//youtu.be/29fejX2UPoQ"></iframe>
</div>

Note: you have to have a webserver running for this to work.

To start a local webserver on a Mac:
TERMINAL:
Navigate to just inside your website folder, for example:

    > cd Desktop/Bootstrap_NICAR_2015/
    > python -m SimpleHTTPServer 8000

BROWSER:

    Open http://localhost:8000/

##IV. Using Bootstrap’s jQuery Plugins Use Bootstrap’s styles and components to build your site.

###Overview of less obvious plugins

  • Modal
    Darkens site and pops up extra content in a window.

  • Scrollspy
    Used to change the highlight (active link) in the navbar on scroll. Especially useful for long scrolling sites with multiple sections.

  • Popover
    Fancy tooltip that appears on click. Looks more like a comic book text blurb.

  • Carousel
    A basic slideshow.

  • Affix
    Sets content to “stick” to a location or “unstick” and scroll with the page. Especially useful for fixing and unfixing the navigation on scroll.

--> If we have time… insert a modal:

  1. Copy in the code from the Live Demo section of: http://getbootstrap.com/javascript/#modals

  2. Add some content into our modal header, body and footer.

  3. To our <button>, add data-toggle="modal" data-target="#myModal"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment