Challenge Overview
Welcome to the Living Progress - Build - Social Volunteer Discovery - Create Twitter Bootstrap like Components contest. As part of this contest, you will be creating components using Twitter Bootstrap in the theme of an existing prototype.
The prize money for this contest has been increased by $500 / $250 for the first and second place respectively. Additionally, we have increased the registration phase by 24 hours and submission phase by 48 hours to encourage participation.
Contest Details
We have a UI Prototype currently built using Twitter Bootstrap. Our client would like to create components based off this prototype. While the components will be written using bootstrap’s classes and additional classes created for the prototype, you will need to follow the existing prototype’s theme when creating these components.
Simply put, imagine if the developers of the existing 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.
You need to go through the existing prototype and create a Bootstrap-like framework for the following elements:
- Typography. This includes headings (h1 to h6), paragraphs, ordered and unordered lists
- Forms. This includes input, textarea, checkbox, radio, select dropdowns (single and multi selection) and buttons.
- DateTimePicker
- Cards
- NavBar
- Jumbotron
- Thumbnails
- List Groups
Points to Note
- Your documentation is expected to be on the lines of 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.
- In the list of elements / components mentioned above, if the existing prototype does not have an element listed, then you need not document it.
- Some components may need you to use Javascript. Clearly mention it for that component in the documentation.
- Basically, your first task as part of this contest is to go through the prototype and identify the different types of elements / components used and then proceed to document them.
- Organize the files well. Use SASS to organize the .scss stylesheets for each component similar to how Twitter Bootstrap does and provide a simple build tool to compile them all into a single stylesheet.
- It is absolutely crucial that you make use of the correct twitter bootstrap classes, existing prototype’s classes and semantic HTML markup as possible. For example, use the <nav> tag for navigation. Use the bootstrap classes as much as possible.
- 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: Latest Chrome on Desktop and Android (latest), Safari (latest iOS and MacOS), latest Firefox, IE11 and Microsoft Edge
Final Submission Guidelines
Ensure that you have organized the templates as described in the Contest Details. Your submission should look like this page with all the components listed out along with the markup needed to build them and submit the SASS files well organized to get the components correctly. Create a .zip file and submit them.