Challenge Overview
Welcome to the Brivo WordPress About Us Pages Challenge! The goal of this challenge is to complete the About Us pages/templates of the Brivo wordpress theme. The end result should be fully functional WordPress theme with all its data editable/configurable through WP-Admin.
Final Submission Guidelines
The overall goal of this challenge is to complete the templates, pages, functionality, and custom post type required to complete the About Us pages that our outlined below.
Overall Pages Instructions
- Cover photos on all page should utilize the built-in Featured Image features of WordPress, though this is out of scope in this challenge, it's a good thing to keep this in mind.
- mobile layout version is also part of the challenge scope
Page Requirements
- update the About page to have a side sidebar menu, use wp nav menu
- sidebar menu items are: Overview, Company Team, Careers, Blog, Media, and Sustainability
- default active sidebar nav item will be the "Overview" nav which is actually the "About" page
- copy the sidebar style of What Does Brivo Do?
- Create dummy page for the following pages:
-- Company Team
-- Careers
-- Blog
-- Media
-- Sustainability
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 Advance Custom Fields plugin in creating new custom fields
- For theme options, use the existing Redux 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 and corresponding deployment guide whenever applicable
- For new content, we will be using this plugin http://wordpress.org/plugins/import-html-pages/ to import the data. See the user guide for more details on how to format the content.
- Please organize your content files into post type structure.
-- Create "post" folder for content with regular post type.
-- Create "page" folder for Page post type content
-- Create custom post type folder (e.g. "products") for specific custom post types.