Challenge Overview
Welcome to the Living Progress - Build - POL - Create a simple CSS Framework contest. 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.
Contest Details
We have a UI Prototype currently built using Twitter Bootstrap v3. 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:
- 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
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 can assume that the user will first include twitter bootstrap stylesheet and then include your framework’s stylesheet in their HTML pages. Thus, you need to only create a stylesheet with an additional styles for the elements that are not provided by twitter bootstrap.
- Current prototype uses Bootstrap v3. You however need to use Bootstrap v4. Relevant documentation can be found here.
- 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 for each component 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: Latest Chrome on Desktop and Android (latest), Safari (latest iOS and MacOS), latest Firefox, IE11 and Microsoft Edge