!!72hrs!! CSFV Notification WIdget UI Prototype Update

Project Overview

Welcome to CSFV - Gaming Community UI Prototype Contest. The goal of this contest is to build a simple html page with all CSFV UI notifications.

We have three notification popups in the 6 CSFV websites, they have same functionality with different styling (different themes). We have game developers maintain their own pages and they want to host these notification widgets, so we decided to build a web widget that can be used by anywebsite or page within the CSFV domain.

We have a prototype for 6 themes, we expect the efforts needed to complete the task is minimal and we hope you enjoy it!

Competition Task Overview

In this challenge you are required to address the following :

• Build a single html page that host the notification icons in header and popups.
• Remove all css rules that reset styling of HTML elements. this is important so when loading the css in 3rd party websites they won't break because of the reset values provided by these websites.
• Build a single structured css file for the 6 themes. (of course, IE css needs it's own css file).
• All JS functionality of the notification popup should go in single notifications.js file.
• Because this is going to load as web widget by websites who has it's own css styling, we need to add prefix to the css rules :
  • All original/default (default theme is 06_Loggedin_Home-EmptyMessages.png) css rules should have ".notif_verigames" as prefix. The root <div> should have notif_verigames as class name.
  • For theme specific, we will add ".notif_themeX" as class name to the root div where X can be 1-5.
    • default -> verigames theme
    • 1 -> circuitbot theme
    • 2 -> xylem theme
    • 3 -> flowjam theme
    • 4 -> ghostmap theme
    • 5 -> stormbound theme
  • An example of how css usages are <div class="notif_verigames">, for theme specific it will be something like this <div class="notif_theme1 notif_verigames">, in the notification.css file you will add notif_verigames as prefix to all rules. and for any rule to be overriden you will add the theme prefix rule.
• Combine all images in a single folder, they are redundant but if there is a conflict you can rename them and override the image in css rules.

Notification Popups Behavior

The three notification popups functionality will work the same as it is currently done in the provided ui prototypes with following changes : 

• Body of the popup should be scrollable, scrollbar is default browser
  
• Friends notification should be updated for all themes to match the storyboard provided in challenge forums :
  • Friend request
    • When clicking "confirm" it will show "processing" button then "view profile"
    • When clicking "Ignore" it will show popup "are you sure you want to ignore ?" with "yes" and "no" buttons.
  • Friend Recommendation - it will show you list of recommended friends
    
    • Clicking "Add as friend" will show "processing" buton then "view profile"
    • Clicking on "x" will remove that item from list
• By default show a counter number in notification icons, when opening the notification the counter should be removed.
  • By default the html tag for counter icons should be set to display:none, the current prototypes change that during page load via js, it should be hardcoded in html.

Specific HTML/CSS/Javascript Requirements

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 patter :

  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.

HTMLRequirements:

• 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 on Mac & PC
• Latest Safari on Mac & PC
• Chrome Latest Mac & PC

Documentation Provided

Existing UI Prototype part are provided in forums

Final Submission Guidelines

Submission Deliverables

A single HTML page cover above requirements. and you must organize your submission as follow :

• Readme file discribing how to update the html to swtich between themes.
• notification-root-folder
  • index.html
  • js
    • scripts files
    • .. etc
  • i
    • all images
  • css
    • notification-default.css (this will be the default css)
    • notification-themeX.css (each theme should have it's own css)
    • ie css files.

By default, the pages will be using the orignal theme, reviewers will check your work by placing a prefix to the root div in the html page. We are following this approach to verify that reskinning is done properly. Also reviewers will be validating your work with provided UI prototype to verify that the styling and js functionality have not changed.

Final Submission

For each member, the final submission should be uploaded to the Online Review Tool.