Challenge Overview
Welcome to Anemoi Data Pipeline - Update CSS Framework. As part of this contest, you will update our custom CSS Framework with additional components.
Important Note
Members from certain countries are restricted from working on this challenge, due to the client’s company policies. Challenge submissions cannot be accepted from members registered in a country with a score of 37 or less according to Transparency International's Corruption Perception Index 2015.
If your country is highlighted in red in the following sheet your submission WILL NOT be accepted, unfortunately. This is NOT a new Topcoder policy or something that will become a normal part of future challenges. This is an isolated policy and requirement for this specific client and their challenges. Thank you for your understanding.
https://docs.google.com/spreadsheets/d/1MFZCGwIqgllzWBJuh2adC_BRCCG4kZwN1m8j4ZgbuLc/edit?usp=sharing
Contest Details
We ran a contest earlier in the Code track where we extracts existing components from our clients’ prototype and created our own custom CSS Framework that our client can make use of to build additional user interfaces.
We wish to extend this framework with additional components. Following are the additional components that you need to update this documentation with:
In context of the layout:
a. Grid View. In this layout, we would like you to describe how to arrange the cards in this layout. Additionally, we would also like you to specify how to achieve the exact set of cards displayed in the snapshot shared in the contest forums.
In context of standalone components:
a. Radio buttons
b. Check boxes
c. Text Area
d. Multi Select
e. Buttons - These are already existing. Some additional forms have been suggested in the design. You need to have this work for button, input and anchor tags.
f. Pagination controls
g. Tables. These are tables themselves and are independent from the Table View Layout. They contain hover states and contextual rows
For the layout, you need to follow the existing prototype itself from which you can extract the existing layout markup. For the standalone components, you need to implement the design shared in the contest forums.
Points To Note
- You need to implement the designs as independent components and update the provided framework documentation with these components. You are encouraged to use the existing CSS classes.
- Use SASS to organize the .scss stylesheets where each component has its own .scss file similar to how Twitter Bootstrap does and provide a simple build tool to compile them all into a single stylesheet. This build tool already exists. You only need to update it to include the additional SCSS files created as part of this contest.
- The browsers that you need to support are: IE11+ and Latest Google Chrome.
- You are NOT creating a twitter bootstrap theme. You are NOT required to update the prototype. You are only preparing the documentation and the stylesheet. You DON’T have to use twitter bootstrap for this framework as the prototype is NOT built using bootstrap. You can make use of twitter bootstrap but it is optional. You can however make use of bower to manage any dependencies the stylesheet may have on third party libraries.