Challenge Overview
Challenge Overview
Topcoder is in the process of creating an updated version of its marketing site. We are happy to bring challenges to our community to help us build this component based website.For this challenge, we’re looking forward to create clean and easily maintainable front-end code of the basic components of the site.
Project Overview
The goal of this new version is to make a component based website that are reusable, clean, and easy to maintain.The goal of this challenge is to develop the front-end UI HTML markups and SCSS styles. The final HTML/SCSS is going to be used for the Wordpress development, so we want really high quality and stand alone HTML/SCSS.
For this challenge you are only required to create a single demo page that displays the basic components outlined below working together.
Resources:
1. Zeplin access for the storyboards but NOT all the screens are in scope.2. SCSS files
Overall Requirements
- 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 hex (ex. #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 abstaqracted 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.
- 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 the provided _variables.scss files.
- Do not redeclare/style that exist in the provided SCSS files 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 relevant SCSS file.
- See the provided TC GUI Kit for reference on Buttons, Colors, and Typography.
Components Requirements
1. Navigation Bar- see Components>navigation/primary/desktop/pre-login/home screen for reference
- logo should be image html tag and not css background
- active and hover state will be the same, the storyboard shows "Products" as the current active nav
- search functionality is out of scope but need to show the search icon (see icon requirement below)
- we should be able to easily switch the nav bar position from relative to fixed by simply adding/changing class names in HTML markup
- nav bar position should be at the top of the screen, see the provided /blog/all-posts screen for reference
- show the nav bar in relative position by default, then provide a note on how to demo the fixed position
2. Tabs
- see Components>navigation/tabs screen for reference
- item's hover and active state will be the same, currently it shows "All Posts" as the active tab.
- filter functionality is out of scope but need to show its label and icon (see icon requirement below)
- we should be able to easily switch the tab bar position from relative to fixed by simply adding/changing class names in HTML markup
- tab bar position should be at the top of the screen after the nav screen, see the provided /blog/all-posts screen for reference
- show the tab bar in relative position by default, then provide a note on how to demo the fixed position
- when in fixed position, it should get only sticky once scrolled down (see http://tco18.topcoder.com/prototype/ for reference, scroll down and you will see the tab bar will get sticky to the top of the screen)
3. Footer
- see Components>footer screen for reference
- column's width should be auto adjusted based on the number of columns
- each column should have equal size
4. User Image/Avatar
- see component/quotes/v2, component/quotes/v3, and Blog - Author Profile screens for reference on how the circled image shows
- a user's avatar should be circled in CSS
- its width should be dependent on its container's width (ex. if the container's width is 50px, the image width & height should be 50px. If it is 150px, the image width should be 150px)
- the container's width is based on specific component's style
- see quotes v2 & v3 storyboard
- provide a section in the demo page to showcase different sizes (ex. 50x50, 100x100, 150x150, 265x265, etc...)
5. Icons
- implement an easy way to call out predefined icons
- these icons should be able to show as static icon, inside a link, and inside a button
- see fontawesome for reference, something similar to https://fontawesome.com/icons/thumbs-up?style=solid
- icons should be scalable, use svg file whenever possible
- provide a section in the demo page to showcase all the icons mentioned below with different sizes, just like how they are displayed in the provided Icons.png
- the icons are:
-- search icon from components/navigation/primary screen
-- filter icon from components/navigation/tabs screen
-- chevron (arrow) left and right icons from components/quotes/v2
-- members, countries, money, and video play icons from components/full-width-feature/v1
-- RUX, duration, deliverables, PDF, and watch video icons from components/solutions/large
-- App Design icon from icons from components/solutions/small
-- and all other icons in the provided Icons.png (separate svg files are provided)
Browser Requirements
- IE 11+- Latest Chrome on Mac and Windows
- Latest Safari on Mac and Windows
- Latest Firefox on Mac and Windows