msum logo
Alex Fogarty - MSUM - Graphic Communications - Interactive Multimedia

HOME> GCOM368> Week 6 Details and Resources
Go to Details of Week 1 2 3 4 5 6 7 8 9

Week 6 - CSS Frameworks continued - using LESS, a CSS preprocessor


  • Class A Interactivity with Bootstrap
  • In class we'll look at a few javascript features of Bootstrap - a tabbed panel, and jquery carousel, and an accordian panel. During class we will add these to your site together. The example site is live here. However, for examining the code and looking at a few simplified pages, please download the zipped site here.

  • Class B To be determined
  • Class B HOMEWORK
  • Bootstrap’s styling is centralized using LESS CSS. LESS, a CSS preprocessor, is a way of centralizing variables within your CSS, as well as writing your CSS so it’s easier to read and understand via grouping. We won't be working with it in the class, but as web designers you should be aware of the evolution of CSS. Please watch this training vidoeo on You may just watch or follow along with exercise files.

Due Tuesday

  • The first 3 Pages of your Twitter Bootstrap site are due today


  • Watch videos about LESS - see above. Approx. 2 hours.
  • Finalize your Twitter Bootstrap Project, due Tuesday of Week 7. See below

Bootstrap Project

  • Your final Bootstrap site must include the following:
  • • Responsive navigation bar (you may include other navigation bars if you wish)
  • • Grid-based layout
  • • A tabbed panel using javascript
  • • An accordian panel using javascript
  • • A carousel image rotator
  • • Javascript component of your choosing. From the left navigation bar on this page.
  • Videos

    • Watch
    • Watch