AUTUMN2016

CLASS SYLLABUS

DAY/TIME/PLACE

Tuesdays Starting October 25th
20 Washington Place

Instructor: Bruce Donald Campbell

Faculty, Continuing Education - RISD
Providence, RI

Director, Watersheds Project
Providence, RI

Email: bcampbel01@risd.edu

Prerequisites: CSS

DESCRIPTION

If you want your site to look and behave great on both mobile and desktop you'll need a responsive design. Bootstrap's industry-standard responsive framework comes with pre-built CSS classes and media queries that make building your mobile-ready site faster and easier than coding from scratch. In addition, Bootstrap has a number of available components like buttons, carousels, modals and more that are common user interface elements used throughout today's Web. You'll learn how to implement these common interface elements, and modify them to apply your own customized designs. You should be comfortable with HTML and CSS in order to get the most out of this course.

GRADING

Class participation - 20%
Homework assignment - 20%
Final project - 60%

RESOURCES

Books

There are no required books associated with this class — instead, we will use the wide resource library available from Web sites promoting and explaining Bootstrap use.

Course Handouts and On-line Readings as identified below and in class.


LINKS

Bootstrap Home Page
Bootstrap Examples Page
Responsinator
W3 Schools Bootstrap Page
Bootstrap CSS Full Link
Material Design for Bootstrap
MDB Card Examples
Bootstrap Themes
Font Awesome Icons
The Bootstrap Blog

OCT25 TH

welcome to bootstrap

Goal: To understand responsive design, mobile device layouts, and content management systems through the use of Bootstrap

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?

NOV1 st

using bootstrap for websites

Goal: To implement bootstrap in a first complete project and focus on testing.

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.
Homework:
  • Generate your own learning examples from the work we did in class.

NOV8 th

integrating and aligning gui elements

Goal: To understand how bootstrap provides styling features for popular GUI components.

In Class:

Homework:
  • Do Homework assignment 1 on responsive GUI design.

NOV15 th

designing basic cards

Goal: Understand Bootstrap Cards and recognize that the language for defining cards is one of the most rich in the Bootstrap framework.

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
		
Homework:
  • Work on your mid-class homework and final bootstrap project.

NOV29 th

gallery genre features

Goal: To feel comfortable integrating interaction features provided by the Bootstrap Framework.

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
Homework:
  • Work on your final bootstrap project.

DEC6 th

managing changes to Bootstrap

Goal: To feel comfortable modifying Bootstrap Framework features for your own tastes.

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.
Homework:
  • Work on your class project.

Turn in your project by 11:59pm on Dec 11th.