Challenge Overview
Welcome to the Anemoi Data Pipeline - Create a simple CSS Framework. As part of this contest, you will be creating a CSS framework based off an existing UI prototype that our client can re-use for other prototypes.
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 Overview
We have a UI Prototype that our client would like to extract components from. Our client wants to create many other UI Prototypes re-using some of the elements present in the current prototype. Thus, we are looking to create a CSS framework, similar to Twitter Bootstrap, that will consist of a single stylesheet and any supporting javascript files that our client can include in their own prototypes to re-create the following UI components that exist in the current prototype:
- Input Box
- Buttons (Multiple types exist in the prototype)
- Error Messages
- SideBar Navigation and Badges (exclusive and inclusive)
- Header Navigation with Branding
- Icons
- Side Panels (Filter Panels)
- Date Pickers
- Select Dropdowns
Simply put, imagine if the developers of the provided UI Prototype created a Twitter Bootstrap-like HTML / CSS / JS Framework by reusing the components and classes from the existing UI Prototype and publishing it for everyone to reuse, just like Twitter Bootstrap - that is the requirement for this contest.
While copying the markup from the prototype into your documentation, please make sure that the CSS styles and HTML markup are correctly used. For example, use nav tags for navigation bar. The prototype does not follow this correctly and thus you are advised to be careful while copying the markup.
Points to Note
- You need to create a documentation that is similar to the existing Twitter Bootstrap documentation where each component / css is explicitly called out and the markup for it is clearly provided.
- If there are multiple versions of the components in the prototype, then each version should be explicitly documented. For example, there could be multiple types of buttons in the prototype. You need to document them all and describe the markup needed to create each button.
- Some components may need you to use Javascript. Clearly mention it for that component in the documentation.
- Organize the files well. 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.
- The elements have to be responsive. There are elements for which there are no responsive designs available yet so you don’t have to provide responsive elements for them.
- 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
