Challenge Overview
Welcome to the GE Brilliant Career - SASS it Up! contest. As part of this contest, you will take an existing prototype and re-organize the existing stylesheets using SASS to help maintain them better.
If you get a score greater than 93, then you are eligible to get a bonus of $300. This is applicable up to the first four submissions only.
Project Overview
GE Brilliant Career Labs wants to build a website to help students navigate their way into a STEM career using multiple resources aggregated into one simple, information site. The first phase will build out the initial website, allowing students to register, gather information and fill out modules to help them develop their soft skills.
Contest Details
We have completed building the prototype for our application. In the interest of getting a fully functional prototype running in a short span of time, we ran multiple contests in parallel. To make merging the code bases easier, we had requested participants to create individual stylesheets.
Now that the prototype is stable, we would like to go back and correct our stylesheets. They currently have the following problems:
- Multiple instances of duplicate rules
- Although we have 2-3 stylesheets created by the participants, they are not organized and it is difficult to maintain them
- It is very difficult to update existing styles based on feedback from the client. The rules to update cannot be easily located without using Firebug or Google Chrome’s Developer Tools.
- The rules defined do not follow any order and some of the selectors are too specific.
We would like you to take the existing prototype and apply the following changes:
1. Follow a guideline and be consistent:
- Use 2 spaces for indentation
2. Use SASS to write the CSS and gulp to build the files. SASS here refers to the CSS extension. The syntax in SASS that you will use is SCSS.
3. Follow the 7-1 Architecture pattern and organize your sass files based on it. If carried out correctly, you may not need any file under pages and themes as most of your files will be under components and layout. Under components, feel free to organize the files further under additional folders by grouping the components logically.
Eventually, you will be left with a single compiled CSS file. Update each HTML page to use this one CSS file.
Points to Note
- The objective is to prevent duplicate styles from getting created and to make it easier to maintain the code base. That should be the goal of this exercise and the reviewers are requested to review the submissions keeping this in mind.
- We understand that there could be scenarios where you may have to update the HTML pages. In such a case, you can certainly proceed to update the HTML pages. However, the emphasis is on improving the stylesheets and as such you are not required to update the HTML pages beyond updating the stylesheet used.
- No use of inline styles with the HTML pages and no styles to be defined under <style> tags.
- You absolutely cannot update the stylesheets of third party libraries. To be sure that the original code does not do this, we advise you to use the files from the original websites and replace the existing ones and correct any changes carried out originally directly in the original stylesheet by defining any overriding rules in the user defined stylesheets.
- All HTML pages are in scope for this contest. Although it may appear that there are too many HTML files, you will observe that most of them share the same components thus making it easier to organize the stylesheets.
- There should be no changes to the user interface - visually and content wise. The client has already approved of it and you cannot make changes to it. In other words, the end user will not feel any difference.