ISTA 230 Introduction to Web Design (Spring 2017)

Assignment 9: CSS Frameworks and Preprocessors

Due Date: April 18, 2017 before 11:59pm

Overview: This assignment will test your understanding of CSS frameworks and CSS preprocessors.

If you have any questions or concerns regarding this assignment, please don't hesitate to contact your instructor at jmspargu@email.arizona.edu or at 520-276-6433.

Assignment: Bob Kane has created a website outlining some of his favorite Batman villains over the years. While his HTML is syntactically sound, he has no understanding of CSS. For this assignment, you will be providing provide him with a design for his website using CSS. The website files will be provided for you by the instructor in your student directory on the ISTA 230 web server. Using your ISTA 230 web account, you will be able to log in to the ISTA 230 server and will find a directory named "assignment9". Within this directory are the files for this assignment. You may modify the HTML file provided by the client. Additionally, you may also use the Bootstrap CSS Framework for this assignment.

In addition to providing a design for the website, the client has also asked that you provide them with a simple means for chaning the background and foreground colors used on the website. To accomodate this request, you'll use the Sass framework to create a file named 'variables.scss' which will guide the color scheme used in your design. This file should contain ONLY two variables, one for the design's primary background color and one for the design's primary foreground color. You should also provide the client with some brief instructions about how to make changes to these variables.

For this assignment, you are expected to use the features provided by the Bootstrap CSS Framework.

Using what we have learned in class, you are to create a website design with the following characteristics:

When the above is completed, your assignment folder should include something like the following:

A brief description of the folders/files above follows:

assignment9
Directory provded by your instructor for the assignment.
index.html
File provided by the instructor, modified by you.
images
Directory provided by the instructor containing all necessary image files for the assignment.
css
Directory created by you.
variables.scss
Sass file contatining two variables for the foreground/background colors and instructions for their use.
style.scss
Primary Sass file contatining all of the styles needed to enhance your website beyond what Bootstrap provides.
style.css
File generated from your primary Sass file (style.scss). YOU SHOULD NEVER NEED TO MODIFY THIS FILE BY HAND!

Grading:

Your work will be graded on the following criteria:

To check if your HTML and CSS validate properly, use the ISTA 230 HTML and CSS Validators:

To evaluate the accessibility of your web pages, use the Accessibility Developer Tools extension for Google Chrome:

Turn In: All of your files for this assignment must have been uploaded to your user account on the ISTA 230 web server by 11:59p on April 18, 2017. Any files uploaded after that will be considered late and your grade will be adjusted accordingly.

Sample Output:

Larger-Sized Device View

Figure 1: Larger-sized device layout

Medium-Sized Device View

Figure 2: Medium-sized device layout

Mobile Device View

Figure 3: Smaller device layout

Highlight Example

Figure 4: An example of the 'glow' effect after cliking on 'The Penguin' link in the navigation.

Theme Examples

Figure 5: An example of quick theme changes made possible by the use of Sass.