Challenge Overview

Topcoder is in the process of developing a new version of the Connect platform, which connects customers with project managers, copilots and competitors to run projects through the Topcoder services.

We are happy to bring challenges to our community to help us building one of the main tools our teams and community members will be using soon!

For this challenge, we’re looking forward to update the project navigation (header, footer) with several states (HTML/SCSS).

Final Submission Guidelines

The new version of Topcoder Connect aims to provide an easy experience for customers and project/challenge managers through a very clean and modern UI.

The goal of this challenge is to develop the front-end UI HTML/SCSS for the new Project Navigation. The final HTML/SCSS is going to be used for the React components development, so we want really high quality and stand alone HTML/SCSS.

Required Page
1. Project Layout/Navigation
- See the left panel in the in the HTML Spec.
- All states must be delivered (5 pages from the HTML Spec).

Overall Requirements
- Match the provided HTML Spec.
- Clean up CSS if any duplicate or conflict rules are found for the required components.
- HTML and CSS code must be W3C validated. - Source code and design text must be written in US-English.
- The minimum size of a screen is 768px. NOT mobile.
- Use the base-unit, corner-radius, and color names variables instead of pixels and #fff colors.
- Create high quality SCSS, look at https://github.com/appirio-tech/tc-ui/blob/feature/connectv2/src/styles/_checkboxes.scss - the Slider is a good example of well abstracted code.
- Don't overly nest your code; we'll need to abstract the final DOM into multiple components; try to stay into smaller logical pieces.
- We use autoprefixer, so don't worry about all browser-specific rules.
- For color references you can also use our style guide https://app.frontify.com/d/zEXqGHFD1YN2/ui-library#/elements/colors.
- Use flexbox instead floats.
- Define spacing with multiples of $base-unit, and corner radius through $corner-radius.
- Do not include third-party libraries; we want to stay as vanilla as possible at this stage.
- DO NOT redeclare hex colors as variables - use the ones we have in /styles/_colors.scss.. (https://github.com/appirio-tech/tc-ui/tree/feature/connectv2).
- Do not redeclare/style buttons and form elements that exist in the /styles/_forms.scss and the library as whole. If you need to define a button style (or extend an existing one) - think how this could happen in the /styles/_forms.scss (or relevant _*.scss) file. In the end we want to add extrapolate the styles you create int 2 places:
-- Component-specific styles (used only once).
-- Global styles (/styles/*.scss) used from all components.
-- Can you try to work in such a way so we can just copy-paste the SCSS for the appropriate DOM structure for the component?

Browser Requirements
- IE 11+
- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows

Resources
Project Template (local running sample, your starting sample/template)
Specifications (interactive HTML files with measurements and assets)
Topcoder UI Kit Guidelines

Deliverables
Provide all your files in a zip container.

REVIEW STYLE:

Final Review:

Community Review Board

Approval:

User Sign-Off

SHARE:

ID: 30055095