In Class:

• CSS Features for Responsive Design
• Mobile Layouts
• Content Management System Integration
• Downloading Bootstrap
• Work with a week one example.

Homework:

• Consider what Bootstrap is suggesting:
  
  
  Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.
   
• Is this a reasonable claim? What exactly do you want out of a service that makes such claims?

In Class:

• Mastering the Bootstrap Grid System:
  
• We start with a grid system for the smallest devices (see the result of our classwork).
• Notice how the container class works to provide reasonable margins for the page.
• Notice how we can nest rows inside of rows in the page.
• Notice how we hide columns within the page (example: hidden-md-down (or up)).
• We can apply styles to any or all of the Bootstrap grid's classes (and you can add your own).
• We can use a pattern of .pull-XX-direction (where XX is the size from grid and direction is left, right, or none) to move content around
• Add margin or padding using classes with .property-sides-size (m or p for property; t,r,b,l, x, y, a for sides; 0, #, auto for size - in rems)
• Consider the rem unit of measure
• Work with a week two example.

• Generate your own learning examples from the work we did in class.

In Class:

• Work with a week three example.
• Work with dynamic text changes within the grid.
• Integrating buttons
  
• Working with modal interface components
• Working with other popular GUI components like forms.
• investigating other features

• Do Homework assignment 1 on responsive GUI design.

In class:

• Understand the data-toggle (modal, collapse, dropdown, tab) and data-target attributes of HTML5 that Bootstrap uses.
• Deconstruct card design into descriptive content types like text, lists, block quotes, and links.
• Manage headers and footers for use in multiple cards
• Use image overlays for attractive card designs
• integrate other content types in card components
• Work with a week four example.

        Cards have rich content classes:

		Use a container with .card class

		Then subcomponents:
				.card-title
				.card-text
				.card-blockquote
				.card-link

		Multiple image-related classes:
				.card-img
				.card-img-top
				.card-img-bottom

		Special sections for cards:
				.card-header
				.card-footer
				.card-block
				.card-img-overlay

		List components:
				.list-group-item
				.list-group-flush

		Card styles:
				.card-inverse
				.card-primary
				.card-success
				.card-info
				.card-warning
				.card-danger
		

• Work on your mid-class homework and final bootstrap project.

In class:

• Review popular gallery sites for attractiveness and user experience
• Work with a week five examples.
• Implement the carousel and other Bootstrap specific gallery support services
• Work on informative tables design

• Work on your final bootstrap project.

In class:

• Examples of modifying the base Bootstrap Framework for presentation features.
• Inventory of all popular Bootstrap features available within the framework.
• Take a look at student projects.

• Work on your class project.