Challenge Overview
Challenge Overview
Topcoder is in the process of rewriting the challenge details page (i.e., the page you're reading about this challenge on). We're starting this process by redoing the styling of this page.
For this challenge, we'd like to completely rewrite the stylesheets for this page using SCSS according to the live spec designs attached to this challenge.
SCSS Guidelines
You'll need to make sure the SCSS you write matches our SCSS guidelines. Notice that these guidelines reference shared files like _tc-colors.scss -- these references are to the react-components repo's listings-release-v3 branch. Since this has some styles we need, we'd like to have this included as a dependency.
Live Specs
Your guide to what you're implementing are the attached live specs. Please refer to the specs for dimensions, font weights, layout, copy, etc. for the styles you're writing (as well as the templates you're adjusting). We WILL be judging to these specs during review, and submissions that are closer to spec will score higher. Below, we go over some of the individual parts of the specs.
There are 17 artboards in total. These numbers below correspond to the artboards in the order they appear in the live spec.
1) Main body and side column styles
This gives you a general overview of how we'd like to render different elements. Partly, this is necessary because the body of the challenge-details page can have whatever sort of HTML content the user puts in (and we're responsible for making it look nice). Partly, this is here because we'd like to establish some general standards of how elements should be rendered on this page. You can see this, for example, on the sidebar. This content isn't arbitrary, but we'd still like the syntax and semantics to match this spec. This might mean that you'll need to rewrite the template some, swapping <div>'s for <p>'s, <h2>'s for <h3>'s, etc.
2) Overview of button styles and states
We may not use all of these on this page, but this is very important for state transitions. The styling for these buttons should not be embedded within the general challenge details code. You may want to put it with the other shared styles in react-components.
3) Page header
Overview of page header in different states. As you can see, things are rearranged a bit. The template might need to be rearranged to match.
The rest of the boards show examples of how the various tabs can appear. In general, you should follow spacing, fonts, colors, and other styles on these pages as closely as possible. You should also be testing your styles with real challenges to make sure everything renders all right. As with the page header and sidebar, you may need to make some adjustments to the html template to make everything match (though your main focus should be the scss you're writing).
Note that some of the later boards have mobile and tablet views. Your code should be written responsively, with appropriate breakpoints.
Also, note that your code should not break the styling of any other pages, like the terms or submission pages. You should verify that these pages aren't broken in your testing.
Topcoder is in the process of rewriting the challenge details page (i.e., the page you're reading about this challenge on). We're starting this process by redoing the styling of this page.
For this challenge, we'd like to completely rewrite the stylesheets for this page using SCSS according to the live spec designs attached to this challenge.
SCSS Guidelines
You'll need to make sure the SCSS you write matches our SCSS guidelines. Notice that these guidelines reference shared files like _tc-colors.scss -- these references are to the react-components repo's listings-release-v3 branch. Since this has some styles we need, we'd like to have this included as a dependency.
Live Specs
Your guide to what you're implementing are the attached live specs. Please refer to the specs for dimensions, font weights, layout, copy, etc. for the styles you're writing (as well as the templates you're adjusting). We WILL be judging to these specs during review, and submissions that are closer to spec will score higher. Below, we go over some of the individual parts of the specs.
There are 17 artboards in total. These numbers below correspond to the artboards in the order they appear in the live spec.
1) Main body and side column styles
This gives you a general overview of how we'd like to render different elements. Partly, this is necessary because the body of the challenge-details page can have whatever sort of HTML content the user puts in (and we're responsible for making it look nice). Partly, this is here because we'd like to establish some general standards of how elements should be rendered on this page. You can see this, for example, on the sidebar. This content isn't arbitrary, but we'd still like the syntax and semantics to match this spec. This might mean that you'll need to rewrite the template some, swapping <div>'s for <p>'s, <h2>'s for <h3>'s, etc.
2) Overview of button styles and states
We may not use all of these on this page, but this is very important for state transitions. The styling for these buttons should not be embedded within the general challenge details code. You may want to put it with the other shared styles in react-components.
3) Page header
Overview of page header in different states. As you can see, things are rearranged a bit. The template might need to be rearranged to match.
The rest of the boards show examples of how the various tabs can appear. In general, you should follow spacing, fonts, colors, and other styles on these pages as closely as possible. You should also be testing your styles with real challenges to make sure everything renders all right. As with the page header and sidebar, you may need to make some adjustments to the html template to make everything match (though your main focus should be the scss you're writing).
Note that some of the later boards have mobile and tablet views. Your code should be written responsively, with appropriate breakpoints.
Also, note that your code should not break the styling of any other pages, like the terms or submission pages. You should verify that these pages aren't broken in your testing.
Final Submission Guidelines
Your submission should be a git patch against the tc-site repo. You may also want to put some of your shared styles in the react-components repo. Make sure the patch has a user email so that we don't have to add it manually. Please provide a short deployment guide, and an accompanying video that shows a) your changes in action and b) a brief code walkthrough. If your code wins first or second place, please submit a PR against the repos you've made your changes against.For development purposes, you may want to use a vagrant virtual machine.
If you want to pull in outside components or other CSS or JS libraries, GET THEM APPROVED!