Challenge Overview
Welcome to the Brivo WordPress Base Theme Prototype Challenge
In this initial prototype challenge, your goal is to establish a base WordPress theme and build prototypes of the Storyboards as custom page templates.
The end result should be a functional, navigable prototype that is integrated in a basic fashion with WordPress. Further challenges will have a goal of integrating the content and functionality with WordPress.
We have a presentation coming up and need to be able to demo/prototype the screens
Final Submission Guidelines
Challenge Guidelines
This challenge has two overall goals:
- Prototype all HTML, CSS, and JavaScript from the provided storyboards
- Establish a base WordPress theme.
NOTE: 90% of this project is an HTML/CSS/JS prototype. The remaining 10% is establishing the base-line WordPress theme that will be refined in future challenges.
Page/Screen Requirements
All pages must be coded with mobile-first principles and utilize responsive design.
- Home 1.1 - 1.4
- code as a custom page template. All content is hard-coded in this page unless otherwise specified.
- ���The large image in the background of the hero unit should allow for either a responsive image. The text and buttons should display.
- The three buttons should slide upward and reveal additional information:
- on deskops, on hover
- on tablet, on "click"
- on mobile, clicking the buttons should go to the link instead.
- The search icon should cause a search bar with submit button to slide down.
- Social media flyout on the right side should have a transition in desktop to slide in, and should be fixed to the viewport. These buttons should be stored in a single template part file that can be loaded in each other template (no redundancy). The social media flyout should be separated into its own file and included on each other custom page template.
- The Brand Story content should be defined as the "page content" for hte page template (the_content() function should display this copy. The brand story button is non-functional for this challenge.
- The products and solutions carousel should be coded with the example information, and allow for images and text as displayed. The "view brand" button should be changed to "view demo." The view demo button should launch the 5.0 demo modal. All "learn more" buttons should go to the product details demo page.
- "Schedule demo" should launch the 5.0 request demo modal.
- Products 2.1
- code as a custom page template. All content is hard-coded in this page unless otherwise specified.
- All filter group toggles should have functional JavaScript, but use dummy values.
- Add a "learn more" button to each product area that links to the product details demo.
- Products 2.2
- Roll over effect should be similar to the "word on the street" section of http://doubledutch.me/
- Products Detail 3.0
- code as a custom page template. All content is hard-coded.
- A responsive video solution must be included either via plugin or javascript included in theme.
- Related Products Carousel should be impelemented in JavaScript. Should have CSS3-based transition effects.
- Testimonials should be its own theme part file.
- Export/Email/Share buttons do not need to be functional at this time.
- Product documents will use dummy data at this time.
- Email and Subscribe buttons do not need to be functional at this time.
- Search Results 4.1
- Do not implement
- Search Results 4.2
- Do not implement.
- Demo Modal 5.0
- ���Implement the "Request a Demo" button anywhere in theme with a function and short code that enqueues and includes the necessary HTML/CSS/Javascript for Modal.
- Utilize a 3D/CSS3 transition effect when displaying the Login
- Login Modal 5.0
- Login modal is hard-coded and not functional. Login modal should be coded as a template part and included in other files.
- ���Login modal triggered by header "login" link.
- Utilizes same image as home page custom header graphic.
- Brand Story 7.0
- Do not implement.
- Brivo Dealer 8.0
- code as a custom page template. All content is hard-coded in this page unless otherwise specified.
- View Demo should launch 5.0 request demo modal.
- Right column should be included in layout but exclude the list of posts. Include a simple "contact" form with fields identical to the footer contact form on Home 1.0.
- All images must be responsive
- In the "Resources" section, utilize a hover/ CSS 3D transform transition similar to Products 2.2.
- WordPress Details
- Title should be defined by the page title.
- A text block below the header "Summary" should be defined by the_content() of the page
- Screens 12 and 15 - Do not Implement
Theme Requirements
General Rules
- 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.
- Theme development should be mobile first.
WordPress Guidelines
- Your project should use the 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.
- For each storyboard screen, utilize a custom page template. You do not need to create custom post types or taxonomies or custom fields in this challenge. Each storyboard should have at least one page created in your WordPress install, with this custom template assigned. Where possible, your theme should link between the appropriate screens via this page.
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. 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.
- Document your plug-ins and/or helpers and what they are used for.
Browsers Requirements
- IE8+
- Latest FF Mac & PC
- Latest Safari Mac & PC
- Latest Chrome Mac & PC
- Android Tablet
- Android Phone
- iPhone
- iPad
Submission Deliverables
- Detailed deployment instructions.
- A WordPress theme is a folder containing all the images, css, javascript, and PHP files that describe the appearance and layout of a WordPress blog. The PHP files have a standard naming convention for page types. Your submission should include a custom page template that can be assigned to demo pages for each of the main screens. It does not need to implement posts at this time - only the custom page templates listed above.
- You must include any necessary plug-in files along with the necessary configuration settings.