The goal of the challenge is to make multiple fixes to the provided CSFV Citizen Science UI Prototype.

The production version of this prototype is deployed to https://www.verigames.com/science

Challenge Requirements

You will address the following in this challenge.

Pages In Scope

You are updating the following pages in this challenge :

• science-landing-page_blog-details(disqus).html

• science-landing-page_blog.html

• science-landing-page_home.html

• science-landing-page_infographics.html

• science-landing-page_interviews.html

• science-landing-page_media.html

• science-landing-page_scholarly-articles.html

Scrollable Widgets

Currently we have some widgets with a scrollbar as in this screenshot. Some other widgets don’t have scrollbars, and the styling of these widgets get broken when the content don’t fit the borders/boundaries of these widgets.

You are required to add a scrollbar to the following widgets same as the one in the screenshot :

• Media Article widgets : the currently broken styling is showing the widget has higher height than adjacent widgets, as in this screenshot.

• Interview Widgets.

• Infographics Widgets.

• From Our Blog Widgets : here is example of broken widget style.

Note that scrollbar should be displayed only when the content height are larger than the prototyped widget height.

Provide instructions for reviewer to test the widgets with/without content that enable scrollbar.

Blog Details Widget

The current page styling is broken in both prototype and production. You are required to fix the styling following in the UI prototyping following the provided storyboard.

• Filename : science-landing-page_blog-details(disqus).html

• The fix should make following changes :

  • Remove “From Our Blog” and “Twitter” widgets.

  • Make the Blog Details Widget full width.

    • The blog widget include Disqus commenting widget.

  • Update bottom widgets below the blog widget to match the bottom widgets as in this screenshot

    • Media article widget

    • Community Stats widget

    • Scholarly Articles Widget

    • Interview Article Widget

    • Infographic Article Widget

    • Newsletter Subscription widget

Specific HTML/CSS/Javascript Requirements

CSFV is a big project, and we are going to launch series of UI prototype contests in the next months. And the current Storyboard is one of the UI themes we will build for CSFV website, it will change in future as we are testing several themes. And since we are not using any Theming framework in frontend (i.e. wordpress) we need to make sure that the UI prototype specifically the CSS part we are building starting from this contest is predictable, reusable, maintainable, and scalable, so when we want to swap themes or upgrade the theme it will be a smooth transition/task. And in order to achieve these points we are enforcing css component-based structure, naming pattern, and enforcing CSS Lint.

CSS Structure and Naming Convention

Structure your CSS into the following categories :

• Base Components - consists of reset rules and element defaults.

• Modules Components - represent reusable visual elements, use this naming pattern :

.component-name
.component-name--modifier-name
.component-name__sub-object
.component-name__sub-object--modifier-name

example

.button-group { } /* component name */
.button--primary { } /* A component modifier (modifying .button) */
.button__icon { } /* A component sub-object (lives within .button) */

• Layout Components - for positioning of site-wide elements as well as generic layout helpers like grid systems, use this naming pattern :

.l-layout-method { }
.grid

example

.l-header { }

• State Components - refers to styling that can be toggled on or off via JavaScript, use this naming pattern :

.is-state-type { }

example

is-hidden { }
is-selected { }
is-expanded { }

• Javascript Components - Used to provide JS-only hooks for a component. Can be used to provide a JS-enhanced UI or to abstract other JS behaviours, use this naming pattern :

js-action-name { }

example

js-submit { }
js-action-save { }
js-ui-dropdown { }
js-ui-carousel { }

CSS Lint

Your code must pass CSS Lint validator with all options are toggled on, if you decided not to include any option in the validation, you must provide a text document explaining why you skipped specific lint option from validation, otherwise, reviewers will deduct your scope for not passing CSS Lint validator.

HTML Requirements

• Your HTML code must be XHTML 1.0 Transitional compliant

• Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.

• Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.

• No inline CSS styles - all styles must be placed in an external stylesheet.

• Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.

• Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent

• Label all CSS, Javascript, or HTML hacks with explanations so others will understand.

• Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.

Javascript Requirements

All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.

You are allowed to use third-party javascript libraries. Please document what libraries you have used and where in the prototype.

Browser Requirements

• IE9+

• Latest FireFox Mac & PC

• Safari Latest Mac & PC

• Chrome Latest Mac & PC

Documents

Provided in challenges forums :

• Existing UI prototype

 

Final Submission Guidelines

Submission Deliverables

• Updated UI Prototype that address the requirement above.
• Preferred a change log.

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and other required files via the challenge detail page on topcoder.com.