Challenge Overview
Welcome to the Brivo Parallax Page Prototype Challenge! The goal of this challenge is to create the parallax prototype pages of Brivo WordPress theme. We are using WordPress but we only require static template file for this challenge.
Final Submission Guidelines
The overall goal of this challenge is to create the parallax page based on the provided storyboard and with the detail outlined below.
Screen Requirements
1. Overall Screen:
- all the content of parallax screes will all come from a single template page only
- use the existing header and sidebar social media widget from the provided wordpress theme
- this parallax page will replace the page on "What does Brivo do" > "Brivo Story" page (http://xtranetbrivo.wpengine.com/what-does-brivo-do/brivo-brand-story/)
- site reference on how the parallax works is http://whiteboard.is/
- use video as background instead of image, you can use any video from here https://www.youtube.com/user/brivolabs
- you can use open source jQuery plugin to make a video background (ex. http://www.seanmccambridge.com/tubular/)
- all text should be editable and not will not treated as an image
- all buttons should be deadlink for now, copy existing hover effect in each button style
- replace any instance of "Brivo Brand Story" into just "Brivo Story"
- clicking any item from the sub navigation (Brivo Story, Brivo History, and Company) will slide to its corresponding content screen
- scrolling down the page will make its corresponding nav item in active state (see scrollspy feature of Bootstrap)
2. Brivo Story
- replace any video placeholder with actual video from this page https://www.youtube.com/user/brivolabs
- brand logo should be treated as a content (img tag) and not a CSS background, these logos are not clickable
3. Brivo History
- the blue square section in each timeline item are placeholder for images and videos that when clicked will launch a modal displaying the full image or video player
4. Company
- On "Who we are" part, by default it will display staff from Management department
- the intention of each thumbnail is to have a serious photo of staff that when hovered will show/reveal a funny photo. To simulate this, you need to create a dummy version of a photo, what is important is the functionality.
- changing the department will show its under that department and will hide staffs from other department
- fill in dummy content for each department
- clicking any staff item will show its details screen
- clicking "Prev Staff" at the bottom will slide the content from left to right to show the new staff details
- clicking "Next Staff" at the bottom will slide the content from right to left to show the new staff details
- clicking the "x" icon will close the "staff detail" screen and will show again the department staff view
Responsive Requirements
We don't have storyboard for responsive layout but we still need this page to be responsive. The provided theme is using Bootstrap, and by default Bootstrap code/markup already support this feature and we just need to show it looks good on different devices. The sample site reference (http://whiteboard.is/) as a basis is a good example to follow.
Theme Requirements
General Rules
- It is important to use the LESS file (brivo.less) in creating your CSS
- Utilize any existing styles and functionality, do not introduce new code that has the same functionality or styles from the provided theme
- Test in all the required browsers.
- Watch word typos in every place including the source code. Make sure they have correct meaning.
- DO NOT render any CSS properties from JavaScript functions.
WordPress Guidelines
- Your project should use the provided theme, this is based from Roots starter theme. (http://roots.io/starter-theme/) This theme includes the latest Bootstrap, and utilizes LESS for CSS. A tutorial for getting started with Roots can be found here. (http://roots.io/roots-101/)
- Follow the Roots method for structuring your theme. Wherever you might need to have duplicate markup and queries, use get_template_part() to move this section to its own template file. These files should be saved in a /templates/ directory. Compartmentalize your structure wherever possible.
HTML/CSS Requirements:
- Your HTML code must be HTML5 compliant
- Validate your code - reviewers may accept minor validation errors, but please comment your reason for any validation errors.
- The generated CSS file from LESS file should be validated for errors
- Use the validators listed in the scorecard.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
- No inline CSS styles - all styles must be placed in an external stylesheet.
- Use semantically correct tags - use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- 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)
- Label all CSS or HTML hacks with explanations so others will understand.
- Your code must render properly in all browsers listed in the scorecard in both Mac and PC environments.
Interaction Guidelines
All Javascript/Interactive elements described above must be implemented in your submission. Any libraries required should be included in your Roots-based theme, but should not be compiled with Grunt into a single file. All libraries should be included in the Theme through the standard WordPress script/styles include method, wp_enqueue_script() and wp_enqueue_style().
- All JavaScript must not have a copyright by a third party. You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
- You are allowed to use the jQuery JavaScript library for this contest.
- Label all JavaScript hacks with explanations so others will understand.
Wordpress Plugins and Helpers
- You are allowed to use open source WordPress Plug-ins and/or Helpers. Use the existing assets if the purpose or functionality of this plugin/helpers already exists.
- Document your plug-ins and/or helpers and what they are used for.
Browsers Requirements
- IE9+
- Latest FF Mac & PC
- Latest Safari Mac & PC
- Latest Chrome Mac & PC
- Android Tablet
- Android Phone
- iPhone
- iPad
Resources and Guidelines:
- Latest theme, plugin, and data available on GitLab https://gitlab.com/brivo/brivo-wordpress
- You will need to create an account in GitLab if you haven't had yet
- Once you register for this challenge, send us GitLab login to jamesmarquez@gmail.com with a subject "Brivo GitLab Access"
- We will add you to the developers group on a repo in GitLab. This will give you access to work on issues, create branches, and merge requests.
- Follow the provided deployment guidelines in deploying the theme in your local workstation
Final Submission Guidelines
- Please submit updated and new files theme files, git patch file, new content files, and any other config file whenever applicable
- Deployment Guide