Clorox Mobile layout update

Welcome to Clorox responsive upgrade challenge. In this challenge, we are looking for you to update the layout of the SharePoint website/components by referring to the storyboard.

Let us know any question you have!

General requirements

• Sharepont latest version.
• Gulp
• SCSS
• HTML
• JavaScript

General requirements

Layout

• Layout: Page should be fluid.
• Desktop: Beyond storyboard width, content should be centered & background should be fluid.
• Mobile: 375px to 768px Use your best judgment to make the sections fit on a mobile screen. There won't be any score-down as long as the sections don't break the layout on a mobile screen.
• Focus on consistency. It's acceptable to do minor layout adjustment if the storyboard isn't consistent.

Framework-specific

• Don NOT use any framework like ReactJS, AngularJS, etc.
• JQuery is allowed. Please confirm the plugins you are going to use in the forum. Basically, all MIT licensed libs are allowed
• SCSS is a must.
• Use the SharePoint framework based submission in the forum as the base of your submission.
• All data should be hardcoded in the code. JSON is NOT required.
• Create components based layout.

Code Formatting

• Please use clean INDENTATION for all HTML code so future developers can follow the code.
• Provide comments on the page elements to give a clear explanation of the code usage. The goal is to help future developers understand the code.
• Use appropriate linter to validate your code.

HTML Specific

• HTML should be valid HTML5 compliant.
• All HTML code naming should not have any conflicts or errors.
• Element and Attribute names should be in lowercase and use a '-' or camel naming to separate multiple-word classes (i.e.. 'main-content', or 'mainContent)
• Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
• No inline CSS styles- all styles must be placed in an external stylesheet.

CSS Specific

• Use CSS3 Media Queries to load different styles for each page. Do not build a different page for different device/layout.
• You may use SCSS in the project.

Javascript

• The JS code should pass EsLint vaidation.

Platform

• Desktop: Chrome latest, Firefox latest (Mac & Windows), safari latest (Mac), IE11+ (Windows)
• Mobile: Chrome latest, Safari latest.

Application requirement

• All the data in the application should be hardcoded.
• Create components of different sections.

0 Resources & links

• Getting started with sharepoint
• Zeplin source provided in the forum.
• Storyboard source & submission posted in the forum.
• Existing SharePoint submission posted in the forum.
• Please note that all the pages/components are in scope.
• Share point components can be treated as pieces of a maze where you have to arrange in a specific order to create a complete page.

1.Sidebar & main menu

• Ref: https://zpl.io/aX5PpXg
• To the existing menu items add a 3, 4 sub-menus. These sub-menus should appear when a user hovers the main menu links. The drop-down menu list layout is up to you. Keep the background white & add some shadow to it.

1.1 Make Menu responsive

• Ref: https://zpl.io/25AwB9r & https://zpl.io/VKyozL8
• On reducing the browser width to 768px for less, the sidebar menu should appear.
• Clicking the hamburger icon should toggle the sidebar-menu show hide state.
• Notice the selected menu appears at the center topmost menu bar.

2. Home

• Ref: https://zpl.io/anLymOk
• Follow the storyboard for layout. If any of the components is not present then use your best judgment to add them to the page.
• All the pages present on the desktop page (https://marvelapp.com/hfe349j/screen/58032179) should be there on the mobile page.

3. News

• Ref desktop version: https://marvelapp.com/hfe349j/screen/58032185
• All the components present on this page should be there on mobile.
• Refer to the mobile-specific screens present in the storyboard pages to make this page responsive.
• If any of the components is not present then use your best judgment to add them to the page.

4. News Details

• Ref: https://marvelapp.com/hfe349j/screen/58032186
• All the components present on this page should be there on mobile.
• Refer to the mobile-specific screens present in the storyboard pages to make this page responsive.
• If any of the components is not present then use your best judgment to add them to the page.

5. Teams

• Ref: https://marvelapp.com/hfe349j/screen/58032174
• All the components present on this page should be there on mobile.
• Refer to the mobile-specific screens present in the storyboard pages to make this page responsive.
• If any of the components is not present then use your best judgment to add them to the page.

6. People

• Ref: https://marvelapp.com/hfe349j/screen/58032173
• All the components present on this page should be there on mobile.
• Refer to the mobile-specific screens present in the storyboard pages to make this page responsive.
• If any of the components is not present then use your best judgment to add them to the page.

7. Human

• Ref: https://marvelapp.com/hfe349j/screen/58032176
• All the components present on this page should be there on mobile.
• Refer to the mobile-specific screens present in the storyboard pages to make this page responsive.
• If any of the components is not present then use your best judgment to add them to the page.

8. Strategy

• Ref: https://marvelapp.com/hfe349j/screen/58032175
• All the components present on this page should be there on mobile.
• Refer to the mobile-specific screens present in the storyboard pages to make this page responsive.
• If any of the components is not present then use your best judgment to add them to the page.

9. Verification

• Submit a verification video or verification document for each of the implemented pages.