Challenge Overview
Welcome to the Brivo WordPress Support Landing Page Challenge! The goal of this challenge is to update the Support page/template of the provided Brivo wordpress theme. The end result should be fully functional WordPress theme with all its data editable/configurable through WP-Admin.
Challenge Guidelines
The overall goal of this challenge is to update the template, page, functionality, custom fields, and/or custom post type required of Support page of the provided WordPress theme. The page to update is from Support (http://xtranetbrivo.wpengine.com/support/).
Challenge Requirements
Top section
- image will come from Featured Image (this is already existing functionality)
- text will be from the page content (see What Does Brivo Do page)
Frequently Asked Question section
- custom field (wysiwyg editor)
- all text, image, and button will come from this custom field
Manuals & Downloads
- custom field (wysiwyg editor)
- all text, image, button, including the section title will come from this custom field
- use deadlink for the links
Manuals, Notes, and Videos section
- custom field (wysiwyg editor)
- all content will come from this custom field
- use deadlink for the Learn More links
- use image for the video thumbnail, when clicked it will launch a modal that shows an embedded video to play (use existing modal style)
- please use any video from this channel https://www.youtube.com/user/brivolabs
Card Calculator
- this will be hardcoded in the template file
- Bit Length options are: 26, 33, 34, 35, 37, 40
- Hex is a text entry field that only accepts hexadecimal characters (0-9 and A-F/a-f), you need to apply validation for allowed character and maximum character length
- when Calculate button is clicked, it will show the result
- Bit pattern is based on the bit length and converts a hexadecimal into binary digits
- Card Format is interpreted from the bit pattern to be one of the following: Standard 26 Bit, Generic 33 Bit, Generic 34 Bit (Even or Odd Parity), HID Corporate 1000, HID 37 Bit (with or without Facility Code), Casi-Rusco 40 Bit.
- Internal Card Number and Facility code are conversion to Decimal of specific part of binary digits
- for more info on the calculations, please refer to this page http://www.brivo.com/support/card-calculator, specifically on this JS file http://www.brivo.com/app/static_data/js/calculate.js
Responsive Requirements
Storyboard for mobile versions are also provided, you need to make sure that this page responsive layouts are implemented.
Theme Requirements
General Rules
- It is important to use the LESS file (brivo.less) in creating your CSS
- Utilize any exisitng 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
- 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