Live Style Guide - Build UI Prototype Challenge

Welcome to the Live Style Guide - Build UI Prototype Challenge.

Last month, we launched a challenge to build a SASS framework for this Live Style Guide. The winning submission from that challenge is attached in the forums.

We need help from the TopCoder Community to convert the SASS framework which covers all styles as used in the Live Style Guide (provided in forums) into a UI prototype as per the storyboard provided in forums.

General Requirements

• The prototype must include all components provided as part of the SASS framework - refer to the PDF provided in forums. 
• The prototype must follow the navigation scheme as defined in storyboard, implementing the corresponding left and right pane.
• When clicking on the respective element in the left sidebar, it must open the corresponding detail view in the right pane.
• All components (except Logos, Colors, Typography, and Colors) are expected to show sample HTML code for the corresponding component and their various states.
  • Please note that the Storyboard shows sample HTML from Bootstrap style guide but you are expected to show the correct HTML for each component based on the provided SASS framework.
• Logos, Colors and Typography - Show the left and right pane components as per storyboard, no click operations supported.

Allowed Technologies

• jQuery
• Angular 6.x
• ReactJS 16.x

Code Requirements

HTML/HTML5

• Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• All HTML code naming should not have any conflicts or errors.
• 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)
• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• No inline CSS styles- all styles must be placed in an external stylesheet.
• 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.

CSS3

• Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Please use clean INDENTATION for all CSS so developers can follow the code.
• All CSS naming should not have any conflicts.
• As possible use CSS3 style when create all styling.
• 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.

Javascript

• You are encouraged to use your own scripts.
• Open Source may be leveraged so long as usage is in compliance with the open source license.
• We may ask you to provide us with a list of third party code used.

Images

• Images should be properly compressed while still having good visual quality.
• Please use best practice repetition usage of background based image.
• Please use the Material Design icon font when using icons for your submission.
• Make sure your submission look sharp for Retina and Standard devices

Challenge Assets

We’ve provided the following in challenge forums

• Link to shared Marvelapp Storyboard
• Existing SASS Framework

 

Submission/ Review

• Zipped Live Style Guide Prototype
• Read me text file with instructions on how to run and use it.
• Demo video walking through your solution and how it meets the challenge requirements -> This is needed by client and MUST be provided
• The submissions will be reviewed by Actian team as needed, and the winners will be selected in accordance with the standard UI Prototype scorecard protocol.

Scorecard

• Standard UI Prototype scorecard applies
• Must comply with the stated requirements.

                   

Additional terms and conditions for all participants

By participating in this Competition, You acknowledge and agree that                          

• You must comply with all applicable laws in submitting a Competition Submission, and you represent that you are authorized to submit the Competition Submission.

• Actian Corporation (“Actian”) is free to use, disclose, distribute or otherwise exploit Residual Knowledge. Residual Knowledge means information that is retained in the unaided memories of Actian’s employees and contractors who have had access to any Competition Submissions submitted by You. An employee’s or contractor’s memory will be considered unaided if the employee or contractor has not intentionally memorized the information for the purpose of retaining and subsequently using or disclosing it; and

• If You provide comments, criticism, suggested improvements, test results, answers to questions, and other feedback regarding the function, features, and other characteristics of the Actian products in written or oral form (“Feedback”), You agrees that all Feedback is the property of Actian and may be used, reproduced, adapted, modified, distributed, and otherwise exploited by Actian in any manner and for any purpose.

• You are not entitled to any compensation from Actian or any of the benefits which Actian may make available to its employees, and You are not authorized to make any representation, contract or commitment on behalf of Actian.

• Employees and direct and indirect subcontractors of Actian Corporation and its subsidiaries and other affiliates, and employees and direct and indirect subcontractors of Actian’s partners (including TopCoder and its affiliates) are not eligible to participate in the challenge.

• You may only use data or images that are open and that can be shared with anyone in the world and which is freely available or to which you have rights to use and share the data in submitting such data and images.

Final Submission Guidelines

Please see above