Challenge Overview
Welcome to FAST - Brivo Parallax Pages WordPress Integration Challenge! The goal of this challenge is to integrate the already built prototype pages to the backend of wordpress by just creating pages, custom post types with custom fields, and a shortcode.
Final Submission Guidelines
The overall goal of this challenge is to integrate the static prototype pages to the backend of wordpress with details outlined below and making sure that all its content are editable via WP Admin.
Screen Requirements
The provided wordpress theme has already the screens requireds that is hardcoded in the template, make sure that this hardcoded content will be transfered to WP admin editable content and as much as possible we should retain the markup structure in the template, use your best judgement on this. All functionality of the existing hardcoded screens should be retained.
1. Brivo Story
- the content of these screens (01_1_Brand-Story.png to 01_4_Brand-Story.png) will come from the content of the following pages:
-- "Powerful security made simple" from Brivo Story page
-- "Who we are", "what we promise", and "Who we service" are child page of Brivo Story page
- this Brivo Story screen set should be able to hold unlimited number of child pages
- the sort order of the child pages screen should be determined via menu order
- add custom field named Youtube Video ID that will serve as the video background of the whole parallax pages
2. Brivo History
- please refer to screens 02_1_Brand-History.png to 02_4_Brand-History.png for the following:
-- content from these screen will come from Brivo History page (ideally like this: "where we've been" + timeine shortcode + "where we're going" + "Brivo Newsletter" button)
-- the timeline section (starting from 1999) should be embedded to this page via shortcode (see shortcode and custom post type requirements outlined below for the timeline details)
- please refer to screen 03_1_Case-Studies.png for the following:
-- "What we've done" screen is a child page of Brivo History page
-- this Brivo History screen should be able to hold unlimited number of child pages
-- the sort order of the child pages screen should be determined via menu order
3. Company
- please refer to screens 04_1_Our-Company.png to 04_6_Our-Company.png (before the "Who we are" part) for the following:
-- all sections in the mentioned screens content part of Company page
- please refer to screens 05_1_Team.png to 05_2_Team.png for the following:
-- this screen is a child page of Company page
-- "Who we are" title and "Work with Brivo" button should be part of the content
-- "Select a Department to view" can be hardcoded but its dropdown values should be from the Department custom field of "Team Member" custom post type
-- "Management" option should be displayed by default
-- the team member profiles will pull content data from the "Team Member" custom post type that is outlined below that are sorted by menu order
-- clicking any "team" member will reveal its profile details screen
-- profile image should be part of the content not through CSS background
Custom Post Type Requirements
1. History Events
- should have the basic title, content editor, and featured image
- should have the following custom fields:
-- Event Date - a date picker field and should be set as required
-- Display Media
--- this determine what will display on the event item
--- this will be a radio button field in horizontal layout and with choices of Featured Image and Video, make Featured Image the default value
-- Youtubue Video ID - a text field with conditional logic that is only visible when Featured Image is selected in Display Media
-- Event Type
--- this will be a radio button field in horizontal layout and with choices of Major and Minor, make Major the default value
--- this field determines the type of an event item, major event by default are open while minor event are hidden.
2. Team Member
- should have the basic title, content editor, and menu order
- should have the following custom fields:
-- Department - dropdown select field
-- Position - text field
-- Profile Image - file upload field, this will be the image in profile display as shown in 05_2_Team.png
-- Profile Thumbnail Image - file upload field, this will be the image as shown in 05_1_Team.png
-- Hover Image - file upload field, this will be the hover image of a member profile in the department view
Shortcode Requirements
1. History Timeline
- the purpose of this shortcode is to create a timeline display as seen in screens 02_1_Brand-History.png to 02_4_Brand-History.png and that pulls date from the "History Events" custom post type
- unique year should be determined from the all posts of "History Events" custom post type
- make sure to display event items in alternating position (left or right)
- event thumbnail will be determined by Display Media value
-- if Featured Image, it will use the thumbnail of that featured image and when clicked will show the full image in the modal
-- if Video, display the image thumbnail based on the Youtube Video ID field value and when clicked it will show the embedded youtube player in the modal
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.
- Menus should be implemented with WordPress menus when required.
- Create and utilize a custom page template whenever possible and applicable.
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
- For custom fields, use the existing http://www.advancedcustomfields.com/ plugin in creating new custom fields
- For theme options, use the existing http://reduxframework.com/ in creating new/required theme option fields
- 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
- Please use the Parallax branch - https://gitlab.com/brivo/brivo-wordpress/tree/parallax
- 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