Skip to content

A2 - Layouts and Styles

Run the update. You'll get a folder called a2 within your Unit 4 folder. In there, you'll see an example that uses the concepts from this assignment, and you will also see a sample subfolder that contains the exact same thing. The intention is that you will modify the version that is directly within a2, and leave the version inside the sample subfolder unchanged so you can use it for reference.

About CSS

Every component in kijj contains the method addCssClass(...).

CSS is a web technology that gives us fine control of what each element of our document should look like. Once you've assigned a CSS class to a component, you can open the file style.css to define specific styling attributes.

Introduction to CSS

For the purpose of completing this assignment, it is sufficient to model your work off of the style.css provided to you in the example. However, you may find these links useful:

The rest of this site is useful for learning more about specific styles you can apply.

About Layouts

This example also uses the generic KLayout class in kijj that let's you define your own zones. You'll see this within the JavaScript:

// Initialize the layout
layout = new KLayout()
layout.rows[0] = "header header"
layout.rows[1] = "zone1 zone2"

This tells us that the layout will be a grid with two rows and two columns. The header zone will span both columns of the first row. In the second row, zone1 is on the left and zone2 is on the right.

There is more information about layous on the kijj documentation page.

Your Task

Modify the code provided to create something that shows your ability to use CSS classes and layouts. You should strive to:

  • Add to the layout. Consider making a third zone beside zone1 and zone2, and/or adding a footer zone at the bottom that spans the entire row.
  • Modify the CSS for one of the classes that's already there, and then create at least one more new css class for a different component.

The functionality of your app is not really important for this assignment, since the focus is on styling and layout.