Stratopan Design Specification

gistfile1.md

Stratopan Project Specification

This describes the front-end design and development work required for the Stratopan.com website. The current state of the site is visible here:

https://alpha.stratopan.com

Overall Goals

1. Give the site a more professional appearance whilst leveraging the existing frameworks.

2. Correct structural errors and "bad practices" in the current HTML & CSS code.

3. Differentiate the site by selecting non-default colors fonts, etc.

Not In Scope

1. This is not an attempt to create a whole new theme or design concept for the site.

2. No original artwork will be created (e.g. icons, logos, images, etc.).

3. No new workflows, pages, or user stories will be implemented.

4. A mobile or "responsive" design is not required at this time. Desktop only.

5. Support for older versions of Internet Explorer are not required.

Constraints

1. All HTML and CSS will be built upon Bootstrap 3. No additional frameworks can be used or invented.

2. No additional JavaScript can be used, except to utilize the features that aready exist in Bootstrap and jQuery.

3. Icons may only be selected from those proivded by http://fontello.com. Suggestions of other open-source icons are appreciated though.

4. Fonts may be selected from those provided by http://www.google.com/fonts.

Assumptions

1. Assume the user agent will be Firefox, Chrome, Safari or IE 9+.

2. Assume the user agent has JavaScript and cookies enabled.

Options

1. Styling may be written using LESS instead of CSS. If so, the deliverable must include both the LESS code and the compiled CSS. SASS cannot be used.

Delivery

The work product shall be delivered in either of two ways (but not both):

1. By sending all files in a .tar.gz package to team@stratopan.com.

2. By making a pull request on the Stratopan repository at GitHub.com.

Delivery of intermediate work products shall be done according to the schedule. The final delivery shall include the final revision of all work products, including those already delivered.

Revisions

Revision policy to be negotiated with the designer before starting the engagement.

Required Skills

Previous work experience with Bootstrap is required. This site uses Bootstrap 3 which is fairly new and considerably different from older versions. If you are only familiar with older versions, you'll need to refer to http://getbootstrap.com to get up to speed. Some features of the old Bootstrap do not exist in Bootstrap 3.

The current website is implemented in raw CSS and HTML5 templates with embedded Perl. The Perl code is minimal, but you will see it and have to understand how to work around it. If you happen to break it, we will fix it -- so don't worry about that.

The templates are divided into lots of small, reusable files. So you will have to understand how they are connected and how to navigate through them. When it makes sense, you are encouraged to organize your work into small files as well. This means writing a small bit of Perl code (usually just one line) to link the templates. This is pretty common in web applications. Don't hesitate to ask us questions.

Deliverables

In priority order:

1. Upgrade all pages to Bootstrap 3. The site is currently written with Bootstrap 3 RC-1, so some of the classes and structure must be changed to render properly with the official release of Boostrap 3.

2. Assign appropriate classes and ids to all HTML elements. There shall be no inline styles present in the HTML. All new classes shall be prefixed with "sp-" to distinguish them from classes provided by other frameworks. Classes shall be factored into composable bits with meaningful names. Monolithic classes with lots of duplicated or overlapping styles will not be acceptible. Follow best practices. Don't repeat yourself.

3. Correct alignment and spacing of existing design elements to improve aesthetics. For example, the "Edit Your Profile" button should probably be horizontally aligned with the "Your Repositories" heading on this page: https://alpha.stratopan.com/thaljef. I know this could be achieved by adding some arbitrary margin or padding to the elements. But that's not what I want. Instead, I'm looking for a "correct" and "reusable" solution that positions the elements based on a set of design rules.

4. Correct semantic structure of all pages. For example, you may see occasions where related elements be grouped in a div. In other cases, you may find an extra div that should be removed. Similarly, you may find lists or dictionaries that should be represented with a ul or dt. Fix these things as you see fit.

5. Create a design element to appear on the history view that will appear when there is no history. Similarly, create a design element that will appear in the stack view when the stack is empty.

6. Create a design element to denote public vs. private repositories. This element should appear on the "Create A New Repository" page and on the user's repository listing (i.e. their home page).

7. Create a design element that tells users how to install modules from a stack, using either cpan, cpanm, or cpanp installers. This will take the place of the "To install modules..." text on the stack page, like this one: https://alpha.stratopan.com/thaljef/Genentech/Avastin

8. Select and apply a pair of fonts for all pages (e.g. one for headings and one for body text). These can be chosen from any of the fonts available at http://www.google.com/fonts.

9. Select a palate of custom colors for text, links, buttons, alerts, etc. The scope of collorable design elements is defined by the Bootstrap customizer at http://getbootstrap.com/customize