72hrs!!! CSFV Chat Reskinning UI Prototype Update

Project Overview

Welcome to CSFV - Gaming Community UI Prototype Contest. The goal of this contest is to update the existing CSFV Chat UI Prototype as in order to build a chat web widget.

We have built the UI Prototype in a past challenge, it contains 6 themes for the chat widgets, 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 :

• Remove the base.css and layout.css and any other css rules that rest style values and update module.css/IE css files with specific styling rules for the values reset. 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.
• Merge the 6 module.css file into single file and rename it to chat.css (screen-ie7.css seems identical for all themes so nothing to merge in this 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 css rules it should have ".chat_verigames" as prefix. The root <div> should have chat_verigames class instead of chat. expand pages does not need this change because they open in separate pages (no conflict with other pages).
  • For theme specific, we will add ".chat_themeX" to the root div where X can be 1-5.
  • An example of how css usages are <div class="chat_verigames">, for theme specific it will be something like this <div class="chat_theme1 chat_verigames">, in the chat.css file you will add chat_verigames as prefix to all rules. and for any rule to be overriden you will add the theme prefix rule.
• Remove all themeX js files and keep the original js files into single folder. Fix the css to deal with the workarounds that were done in the themes scripts.js to apply specific theme styling.
• Combine all images in a single folder, they are redundant but if there is a conflict you can rename them.
• We made an attempt to merge and add prefixes to the css, you can find it here http://t2.verigames.org/, (use member/m3mb3r for browser auth login) when the page loads use "elkhawajah" to login, check the chat.css in the page after you logged in, you can chance the theme on the fly by adding the minisite prefix to <div class="chat">  for example if you added "xylem" before "chat" class the theme will chance to the xylem theme. we have 5 themes (circuitbot, xylem, flowjam, ghostmap and stormbound) and you can find these themes defined at the bottom of the chat.css file. but it is buggy and has many problems, so we wanted to update the original prototype in this challenge and apply it to that page.

 

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

All pages in provided UI Prototype cover above requirements. and you must organize your submission as follow :

• Readme file discribing how to update the html to swtich between themes.
• chat-root-folder
  • <all-pages>.html
  • js
    • scripts.js
    • .. etc
  • i
    • all images
  • css
    • chat.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.