Intro To Bootstrap

Style and UX

OBJECTIVE
To create a responsive bootstrap grid.
To utilize offsets and tricks for managing a grid.
To integrate Bootstrap in a Sinatra project

Outline:

layouts:
- The Responsive Grid
- How it's different v2 vs. v3
- Mobile First UX design
Containers and Rows,
- 12 column grid
- media types
  - media queries
  - xs, sm, md, lg => (phone, tablet, medium laptop and large laptop )
  - default stacking practice 1
- mixing media types to get dynamic features
- offsets margins
Elements
- header for navbar, navs
- jumbotron
- buttons
- media-lists
- dropdowns/dropups, labels
Forms
- input groups

Go to http://getbootstrap.com and download the dist folder.

Navigate to the dist/css/bootstrap.min.css file.
Copy and paste it into your app folder under /public/stylesheets/bootstrap.min.css.

Let's create our own responsive grid example. Go to the index

.container: The container will ensure even centering across the page with even margins. It will help manage the width of the div on the page and thus help the managment of internal elements.

.row: The row defines a horizontal grid space, i.e. the 12 column grid

.col-xs-, .col-sm-, ...: the different pre-defined column spaces for each respective level of design.

public/stylesheets/style.css

.left 
{
	height: 50px;
	background-color: LightSalmon;
}

.right 
{
	height: 50px;
	background-color: green;
}

The layout

views/layout.erb

<!DOCTYPE html>

<html>
	<head>
		<!-- Include BOOTSTRAP -->
		<link rel="stylesheet" type="text/css"  href="/stylesheets/bootstrap.min.css">
		<!-- Include our styling defined above-->
		<link rel="stylesheet" type="text/css"  href="/stylesheets/style.css">
	</head>

	<body>
		<%= yield %>
	</body>

</html>

First example with xs, sm, md, and lg and the grid

views/index.erb

<!-- Container manages the width and pading-->
 <div class="container">
 	<!-- Row defines a 12 column grid -->
    <div class="row">
    
    	<!-- A div occupying 6 columns at the Large
    			screen size-->
       <div class="col-lg-6 left">
         left
      </div>
      <div class="col-lg-6 right">
         right
      </div>
    </div>
  </div>
  
  <div class="container">
    <div class="row">
      <div class="col-md-6 left">
         left
      </div>
       <div class="col-md-6 right">
         right
      </div>
    </div>
  </div>
  
  
  <div class="container">
    <div class="row">
      <div class="col-sm-6 left">
         left
      </div>
      <div class="col-sm-6 right">
         right
      </div>
    </div>
  </div>
  
  
  <div class="container">
    <div class="row">
      <div class="col-xs-6 left">
         left
      </div>
      <div class="col-xs-6 right">
         right
      </div>
    </div>
  </div>

the mix and match example

<!-- INDEX.erb -->

<div class="container">
	<div class="row">
		<div class="col-lg-6  left">
			Left 
		</div>
		<div class="col-lg-6 right">
			Right
		</div>
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-md-6  left">
			Left 
		</div>
		<div class="col-md-6 right">
			Right
		</div>
	</div>
</div>


<div class="container">
	<div class="row">
		<div class="col-sm-6  left">
			Left 
		</div>
		<div class="col-sm-6 right">
			Right
		</div>
	</div>
</div>

<div class="container">
	<div class="row">
		<div class="col-xs-6 col-sm-3 col-md-9 left">
			Left 
		</div>
		<div class="col-xs-6 col-sm-9 col-md-3 right">
			Right
		</div>
	</div>
</div>

OfTheDelmer/bootstrap_lesson.md

Intro To Bootstrap

Style and UX