CSCI 446 Unit #2

Purpose:

Review CSS
Enhance CSS knowledge with SASS, Compass and custom fonts

Programming Assignment

This is an individual assignment. The purpose is to learn SASS, which will make writing CSS code much easier!

Preparation

Read the Sass Guide: http://sass-lang.com/guide
Walk through this beginner's tutorial: https://cornercubicle.net/starting-with-sass-for-web-designers-lesson-1/. A few notes (as I found the tutorial left out a few details):

This tutorial includes a link for installing SASS and Compass. SASS may already be installed (depending on your rails installation), but be sure to install compass.
Create a simple html page to try out SASS (this was not clear to me at first, doh!). For now, just put a simple header and paragraph in the file (along with all the normal html tags). This file belongs in your first_project directory.
When you ran create project first_project the output included instructions for including the stylesheets in your html. We will only deal with the screen, so you should add the following line of code to the head of your html file:


    <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />

Be sure to run compass watch in your command window. That way, every time you make changes to your .scss file, they will be reflected in the .css (and therefore in the browser).
Make some simple changes to screen.scss (in the sass directory). For example, just change the size of the header or color of the text. Notice that the command window shows that the stylesheets are recreated. Take a look at screen.css (in the stylesheets directory). Refresh your browser to see the changes.
Play with this a bit, until you're sure you understand how it's all working.
Do not worry about Step 4: Optimizing the Final CSS Output. For now, it will be easier if you can easily read the processed files.

Exercise

For this lesson we will create a simple page modeled (very) loosely after reddit and the Oatmeal. See the screenshot below. We will use this page to explore a variety of techniques. For ease of grading, name your file SassyPage.html.

SASS

A primary purpose of this exercise is to explore SASS. The following is a list of SASS features you must use, with some hints about how I used them. Note that you do not need to match my css exactly... so these hints are just to give you an idea. Feel free to use the SASS features as you see fit, as long as you use all that are listed.

Variables. I used these for widths, fonts, etc.
Nesting. I nested list items within several different divs.
Partials. We'll use this feature with custom fonts, explained below.
Mixins. I just used the border-radius mixin from the SASS guide to style two different items (nav links and submit button).
Inheritance. I used this for some divs and header styling.
Operators. I used this to control the size of some divs.
Comments. This is not a SASS feature, but to get full credit for this assignment you must make liberal use of comments.

Custom fonts

With CSS3, it is easy to add custom fonts. I suggest that you work on the rest of the site first, to get used to SASS. Then you can add a custom font. You will use the following resources:

Choose a font from: http://designlovr.com/30-beautiful-and-free-fonts-you-can-use-with-font-face/
Package the font using: http://www.fontsquirrel.com/tools/webfont-generator
The webkit created by font squirrel provides a CSS file that defines your custom font. You will want to include this stylesheet in your screen.css file. But do not cut and paste the code. We want to be modular. Instead, you will use the css file created by font squirrel as a SASS partial. For hints on partials, read http://stackoverflow.com/questions/7111610/import-regular-css-file-in-scss-file

I used custom fonts for my h1 tags. The font I chose was blackjack, you may choose another font.

A few hints about file placement (these won't make sense until you've looked at the resources... figure out what you can on your own first, then take a look at these hints as needed):

The partial css file containing the custom font definition should be placed in the sass directory.
The font definition files should be placed in the stylesheets directory.

CSS techniques

If you're working with CSS, it's important to be able to find and follow techniques to achieve the desired affects. Do a google search to figure out how to get a footer (the copyright statement in our example) to always stay at the bottom of the page.

Put the URL for the site you used at the top of the screen.scss file.

Example output

Your task is to create a page that looks similar to the page shown below.

Sample first html page — Figure 1: Cyndi's sample page

Specific Requirements

This assignment is worth 40 points. You must include at least the following:

(2) HTML 5 file with reasonable structure.
Use the following SASS features:

(2) Variables. Reuse some colors, fonts, etc.
(2) Nesting.
(2) Partials.
(2) Mixins. Use the mixin at least twice.
(2) Inheritance.
(2) Operators.

(4) Use a 2-column format with a full-size header/footer. Include a copyright in the footer.
(4) Login box with text fields, checkbox, button. Reasonable format.
(4) Sidebar that is slightly smaller than the login section. Includes a centered image and at least 3 links.
(5) A sticky footer (i.e., stays at bottom of page)
(5) Uses a custom font
(2) Comments that explain your css
(2) Comments for the grader so that he knows how the SASS features were used (see below).

You may change: the header and paragraph text, the color scheme, the sidebar image, the nav links, the sidebar links, the footer text. You are not required to have any real functionality (e.g., login button, nav links won't do anything).

For ease of grading, put comments at the top of screen.scss to indicate how/where you met the specific SASS requirements. If it's not clear that a requirement has been met, you will not receive credit (even if you met the requirement... it doesn't count if you don't document it).

Submit

Zip your files and submit on BB. The grader should be able to easily run SassyProgram.html in a browser, and review the comments in your screen.scss file to ensure that all requirements are met.