Challenge Overview
Welcome to Wordpress Theme and Framework exploration for Power Management Company
An IoT and Power Management Solution company would like to have a Wordpress site built using an existing invisionapp mockup. A theme will be customized to include all of the components designed in the mockup. Each component will by styled according to the colors, fonts, images and other assets provided from the mockup. The pages will be built using the copy presented on the mockup and the components created in earlier challenges.
This is the initial challenge to explore/build the solid base of Wordpress theme for Power Management company. You are encourage to use suggest best frameworks that will meet application goals that will be use on the sequence challenge to build another components.
As part of this challenge you will need to document all WordPress, PHP, HTML5, CSS3, and JavaScript code changes. We need clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built.
Wordpress Site Goals
- The site will host static content which may change over time.
- The users changing the content on the site will be non-technical users so updating, adding, and removing components and copy should not involve code.
- Avoid the usage of shortcodes, we need able to do select component visually on Admin page
- All Components must re-usable. We provide initial component grouping. But you are encouraged to optimize the component usage.
General Requirements:
- Our focus for this Wordpress Site will be only desktop browsers.
- Create the WordPress template files based on the storyboard files and build the pages using those created templates.
- Follow WordPress hierarchy structure. We recommend to use named templates for pages so that we can re-use them on other future page.
- Use Wordpress Customizer for specific theme options.
- There should be no hardcoded text labels in the theme files, all of them should be editable via WP Admin.
- Use Advanced Custom Field plugin ( https://www.advancedcustomfields.com/ or ACF Pro ) for custom fields or suggest an open source plugin that will still serve the purpose. Please note that you need to organize the custom fields to make them presentable in WP Admin (ex. use of tabs).
- Extensive documentation is required on how to manage and deploy the theme(s) and page configurations.
Storyboard Design
https://eaton.invisionapp.com/share/HMG4VUH3FSD#/screens/282555290
Click around to get the ideas of all component possibilities customization
Submission Requirements
1). Initial Components for Homepage
https://eaton.invisionapp.com/d/main#/console/13542151/282555290/inspect
Check forum for InvisionApp access.
Page Layout
- Need able to set fluid or using fixed width
Component: Header
Modifiable Elements
- Background image
- Background height
- Logo
- Logo placement
- Tagline
- Tagline placement
Component: Main Navigation
- Background color
- Shadow style
- Menu hover style
- Menu active/inactive color
- Menu active/inactive border style
- Sub nav Background color
- Sub nav Shadow style
- Sub nav Menu hover style
- Sub nav Menu active/inactive color
- Sub nav Menu active/inactive border style
Component: Footer
- Image
- Tagline
- Alignment
2). Theme, Framework & Plugins Suggestion
- Pick base framework that will cover application goals
- List Reason why pick this framework. Need able and possible to build all elements variations based on all storyboard pages. Describe each page will be great
- Wordpress Best Practice Structure/Hierarchy
- Wordpress Best Practice Usage
- Wordpress Code Quality
- Reusable Components
- Build Homepage for demo
- How the Admin page work? Editing/Adding/Remove components with use of page editing plugin/framework?
- Easy to access the component.
- Page Speed
- Possible to expand, customize the components.
- Support/possible to build another type of components for the sequence challenge?
- You can pick one of these Wordpress framework suggestions OR come up with your own suggestion that meet our expected Wordpress goal as stated above:
https://flyntwp.com/
http://www.cherryframework.com/v3/
http://gantry.org
http://runwaywp.com
https://understrap.com/
https://www.getbeans.io/
- Listed any plugins that will be helpful to build the app.
- Plugins for WP Admin should help non-technical users without coding experience. Avoid the shortcode usage.
- We need provide best User Experience when editing the page components.
- You can create document file to describe your solutions.
- Any other suggestions?
Code Requirements
Wordpress:
- Use the stable/latest version of Wordpress.
- Advance Custom Field is the recommended plugin for Custom Fields.
- Redux framework in case you need to use theme options.
- You are allowed to plugins or frameworks that you think is best to use as additional or alternate to the plugins/framework mentioned above.
HTML5:
- HTML should be valid HTML5 compliant.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS3:
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use Bootstrap for this challenge.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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.
Javascript:
- 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.
Browser Target
IE11+
Safari
Chrome
Firefox
- Wordpress Theme source code that includes PHP template, CSS, JS, and Images files including all the required plugins.
- Wordpress site code with any plugins or frameworks
- Wordpress database dump (.sql format)
- Sample data and Detailed Deployment guide.
An IoT and Power Management Solution company would like to have a Wordpress site built using an existing invisionapp mockup. A theme will be customized to include all of the components designed in the mockup. Each component will by styled according to the colors, fonts, images and other assets provided from the mockup. The pages will be built using the copy presented on the mockup and the components created in earlier challenges.
This is the initial challenge to explore/build the solid base of Wordpress theme for Power Management company. You are encourage to use suggest best frameworks that will meet application goals that will be use on the sequence challenge to build another components.
As part of this challenge you will need to document all WordPress, PHP, HTML5, CSS3, and JavaScript code changes. We need clear explanation of the code to help us figure all the code functions and make it easier for future developers and the client to understand what you have built.
Wordpress Site Goals
- The site will host static content which may change over time.
- The users changing the content on the site will be non-technical users so updating, adding, and removing components and copy should not involve code.
- Avoid the usage of shortcodes, we need able to do select component visually on Admin page
- All Components must re-usable. We provide initial component grouping. But you are encouraged to optimize the component usage.
General Requirements:
- Our focus for this Wordpress Site will be only desktop browsers.
- Create the WordPress template files based on the storyboard files and build the pages using those created templates.
- Follow WordPress hierarchy structure. We recommend to use named templates for pages so that we can re-use them on other future page.
- Use Wordpress Customizer for specific theme options.
- There should be no hardcoded text labels in the theme files, all of them should be editable via WP Admin.
- Use Advanced Custom Field plugin ( https://www.advancedcustomfields.com/ or ACF Pro ) for custom fields or suggest an open source plugin that will still serve the purpose. Please note that you need to organize the custom fields to make them presentable in WP Admin (ex. use of tabs).
- Extensive documentation is required on how to manage and deploy the theme(s) and page configurations.
Storyboard Design
https://eaton.invisionapp.com/share/HMG4VUH3FSD#/screens/282555290
Click around to get the ideas of all component possibilities customization
Submission Requirements
1). Initial Components for Homepage
https://eaton.invisionapp.com/d/main#/console/13542151/282555290/inspect
Check forum for InvisionApp access.
Page Layout
- Need able to set fluid or using fixed width
Component: Header
Modifiable Elements
- Background image
- Background height
- Logo
- Logo placement
- Tagline
- Tagline placement
Component: Main Navigation
- Background color
- Shadow style
- Menu hover style
- Menu active/inactive color
- Menu active/inactive border style
- Sub nav Background color
- Sub nav Shadow style
- Sub nav Menu hover style
- Sub nav Menu active/inactive color
- Sub nav Menu active/inactive border style
Component: Footer
- Image
- Tagline
- Alignment
2). Theme, Framework & Plugins Suggestion
- Pick base framework that will cover application goals
- List Reason why pick this framework. Need able and possible to build all elements variations based on all storyboard pages. Describe each page will be great
- Wordpress Best Practice Structure/Hierarchy
- Wordpress Best Practice Usage
- Wordpress Code Quality
- Reusable Components
- Build Homepage for demo
- How the Admin page work? Editing/Adding/Remove components with use of page editing plugin/framework?
- Easy to access the component.
- Page Speed
- Possible to expand, customize the components.
- Support/possible to build another type of components for the sequence challenge?
- You can pick one of these Wordpress framework suggestions OR come up with your own suggestion that meet our expected Wordpress goal as stated above:
https://flyntwp.com/
http://www.cherryframework.com/v3/
http://gantry.org
http://runwaywp.com
https://understrap.com/
https://www.getbeans.io/
- Listed any plugins that will be helpful to build the app.
- Plugins for WP Admin should help non-technical users without coding experience. Avoid the shortcode usage.
- We need provide best User Experience when editing the page components.
- You can create document file to describe your solutions.
- Any other suggestions?
Code Requirements
Wordpress:
- Use the stable/latest version of Wordpress.
- Advance Custom Field is the recommended plugin for Custom Fields.
- Redux framework in case you need to use theme options.
- You are allowed to plugins or frameworks that you think is best to use as additional or alternate to the plugins/framework mentioned above.
HTML5:
- HTML should be valid HTML5 compliant.
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
- 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)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- 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.
CSS3:
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- You are allowed to use Bootstrap for this challenge.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- 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.
Javascript:
- 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.
Browser Target
IE11+
Safari
Chrome
Firefox
Final Submission Guidelines
Submission Guidelines:- Wordpress Theme source code that includes PHP template, CSS, JS, and Images files including all the required plugins.
- Wordpress site code with any plugins or frameworks
- Wordpress database dump (.sql format)
- Sample data and Detailed Deployment guide.