[Repost - Reduced Scope] Live Style Guide - Build Modular Frontend Framework Challenge

Welcome to the Live Style Guide - Build Modular CSS Framework with Sass-lang Challenge.

We need help from the TopCoder Community to develop a CSS framework with Sass-lang that covers all styles as used in the Style Guide provided in forums. You can also view the storyboard in forums.

The CSS framework will then be used to create a visual prototype for the Live Style Guide in a follow up challenge.

Challenge Requirements

The CSS framework with Sass-lang should include the following:

• The library should be written in a modular way so only the parts required can be included.

• The library should include all components designed in the Style Guide. Please see the forums for details of components included in scope.

• CSS framework with Sass should be written using best practices including comments. Use reference BEM as the common CSS methodology

• CSS framework with Sass can extend the Material.io and Angular2 Material libraries. Please reuse the appropriate CSS components from these libraries as needed.

Look and feel:

• The CSS framework components should exactly match the provided designs. All elements from the designs should be covered in the CSS framework (Style Guide and Storyboard are attached in the forum).

Code Requirements

CSS3/SASS

• 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.

Images

• Images should be properly compressed while still having good visual quality.

• Please use best practice repetition usage of background based image.

• Please use sprites when using icons for your submission.

• Make sure your submission looks sharp for Retina and Standard devices

• Wherever it makes sense, you can use Material Design icon font instead of images.

 

Challenge Assets

We’ve provided the following in the challenge forums:

• Link to design sources

• Attached document with a list of required components

 

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 that is open and that can be shared with anyone in the world and which is freely available and to which you have rights to use the data in submitting such data.

Final Submission Guidelines

• Zipped CSS Framework with Sass-lang

• Txt file with instructions on how to run/use it.

• Demo video walking through your solution and how it meets the challenge requirements

• The submissions will be scored by Actian team, and the winners will be selected in Actian's sole discretion. There will be no appeals or appeals responses