omnicalc_mockups's Introduction

Omnicalc Mockups

The goal of this project is to practice using Bootstrap to layout and style our pages.

Introduction

There are eight files in this repository:

word_count/new.html
word_count/results.html
loan_payment/new.html
loan_payment/results.html
time_between/new.html
time_between/results.html
descriptive_statistics/new.html
descriptive_statistics/results.html

These are blank HTML documents except that they are already linked to Bootstrap and Font Awesome.

Your job is to make static mockups of the following targets:

Your mockups won't actually perform the calculations, of course, but try to make them look as close to the targets as possible. Also, don't attempt the datetime picker on time_between/new.html yet.

If you need to write any custom CSS beyond vanilla Bootstrap, you can do so in custom_styles.css, which is already linked to all eight documents.

We'll bring our static mockups to life soon.

Setup

Fork and clone this repository.
Open the entire folder in Sublime.
In Chrome, open the file you are working on in one tab and your target in another tab.

Steps

Create the basic grid skeleton. Shoelace.io may come in handy.
Add the list of links to the left side. Since the documents are located in different folders, you need to use relative file paths to make the links work.
Add a panel to the right side.
Add content to the panel body; either a form or a description list, depending on which page you are working on.
Add the navbar to the top.
Include Font Awesome icons where appropriate.
Make it Responsive:
On extra-small and small screens, hide the left nav.
On medium and large screens, hide the navbar links (since the left nav is visible).
When a form submit button is clicked, make it so that you end up at the corresponding results page.
Experiment with different Bootswatches.

Recommend Projects