Responsive TopCoder - Cloudspokes Home Page - Wordpress Theme Build

Welcome to 72hrs TopCoder - CloudSpokes – Front Pages WP Theme Build Contest.  We are building a NEW website from scratch and we now need you to convert provided UI Prototype (HTML) to responsive wordpress theme.
We want to leverage HTML5/CSS3 but we still need to support some older browsers. Feel free to use the HTML5 Shiv fix for Internet Explorer.
On this  phase, we will build a responsive wordpress theme from provided UI Prototype.

General Rules :

• Please use provided baseline theme. It can handle url_rewrite for /active-contests/{contestType}, /contest-detail/{contestID}, etc. demo : http://cloudspokes.wpengine.com
• Less Templates,Less Custom Field, More Purposes. Keep in your mind we will play more on {post_content} by using WYSWYG editor instead of template creation. this contest will only create 1-2 template(s). So Please ensure your CSS can handle elements/objects that are created via WYSWYG editor (ie:list, table, image)
• The editor must function as expected by our content editors. When then set styles via the rich editor, it should preview and display correctly on the site. This includes inserting images into posts, formatting fonts, positioning text around images, etc
• Please use active JSON that is provided by TCApi Plugin
• Please provide changelog for any changes (TCApi Plugin)
• Please visit http://docs.tcapi.apiary.io/ as reference JSON mockup and as reference of URLs
• Ensure your pages display correctly in all browsers. It is your responsibility to make sure the pages display correctly. Make sure you test on tablets and mobile phones too.
• Ensure you submission clear of HTML and CSS Validation error and warning
• Please leave any existing issues on provided UI Prototype, This prototype is being fixed by the winner
• Please use Mobile view is for portrait orientation of tablet device, and it should be fluid based on browser width
• Switching the orientation (from landscape to portrait or vice versa) will also switch layout to correct layout directly, without reloading page.  Example : http://www.cloudspokes.com/, http://bradfrostweb.com/demo/mobile-first/ and http://www.studiopress.com/responsive/ and provided Prototype
• Winner will be asked to patch UI issues later, and patching files will be provided later

 

Baseline Layout
Since header and footer will be same/similar for previous, this and upcoming prototype, please create new base.css file to handle header, footer include their mobile view.
You can extract it from provided prototype. Keep in your mind we will call this base.css for upcoming prototype / template.
Note:
- As usual, header.php and footer.php should be reusable for other template which want to call header and footer section.
- Menus at Header and Footer should be managed from wp-admin as usual.
 

Home Page Template (include mobile view)
UI Prototype : home.html
see [Wireframe-outlines.png] for the sections
URL : http://siteurl/

• This template is for home page. Please use ‘Home’ or something like that as template name.
• Main Carousel should be managed from wp-admin. Carousel content should support “only text” ,” image+text”,or “image only”. see http://s13.postimg.org/tnwnbgvcn/carousel_scoe.png. Current UI Prototype still have issues on this carousel, so leave it as is
• Content 1 and Content 2 section will be part of {post_content},  so everything should be editable via Post Body Editor
• Content 1 and Content 2 should support two or three items. Current Prototype does not support 3 columns, so leave the broken layout as is and we will fix it later
• Content 3 is part of footer
• Icons on Content 2 should be as img instead of background, because they would be editable via Post Body Editor
• "View Challenge" button will link to Challenge Page described below

 

Challenge Page Template (include mobile view)
UI Prototype : view-challenge.html
URL : http://siteurl/challenges, currently it is as  '/active-contest' on provided baseline theme

• This template will also be used for http://siteurl/{contestType}/challenges, where {contestType} is Design, Develop, and Data/Algorithm. We're thinking we need create design,develop and data pages from wp-admin
• http://siteurl/challenges will display all contest type
• Replace current dummy JSON source to actual  JSON that is provided by TC-API Plugin via http://siteurl/wp-admin/admin-ajax.php?action=get_active_contest&contest_type= (it is working correctly now)
• Clicking table header will sort data. see how provided theme/plugin work

Community Page Template (include mobile view)
UI Prototype : community.html
URL : http://siteurl/community

• Three Boxes at header will be part of {post_content},  so everything should be editable from Post Body Editor
• Data for 4 badges(ACTIVE MEMBERS, COMPETING TODAY, AVAILABLE PRIZE, ACTIVE CHALLENGES) above Top 10 can be harcoded for now, we will replace it later with realtime data
• Use same JSON that is used by /challenges page template for open challenges (active contests) list
• Please reuse "tops" widget of baseline theme. data is provided by plugin via AJAX
• Please reuse "Stars of the Months" widget of baseline theme
• News, Events and Community highlight items should be as default "Post" post_type. Please provide the best way to filter them, because they are only featured items and NOT all items

 

Specific Wordpress Requirements

In addition to following Wordpress standards and best practices, please note the following requirements.

• Provide actual sreenshot to represent theme
• General Requirement - Do not break or override any of the standard Wordpress features. If you need to, please explicitly explain in your submission.
• Make proper use of the Wordpress Menu system.
• Do not hardcode settings/config in the template code. Please create a "Theme Options" panel for configuration settings.
• Use sidebars when appropriate. We should be able to add widgets to sidebars.
• Use Widgets when appropriate. We'd like to avoid doing a copy/paste to include the same functionality in multiple templates/pages.

 

Specific HTML/CSS/JavaScript Requirements

• You MUST use HTML5 and CSS/CSS3
• 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, JavaScript, 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.
• Current website code has some inline CSS, please move them to external CSS file.

JavaScript Libraries/Plugins

JavaScript libraries already used in the current site can be used in this contest too. New ones need to be proved by client first.

Browser Requirements

• IE 7+
• FF 7+
• Safari 5+
• Chrome Latest
• Chrome / Safari on tablets / phones

Final Submission Guidelines

Submission Deliverables

• A WordPress theme is a folder with new name mentioned above and 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, and contain and use template tags to call for specific information from the blog's database, such as a post title, the post date, its categories, and more.
• You must include Deployment Guide.
• You must include All Assets and PHP files from provided theme into your theme, and please make sure the existing menus, pages, blog still work properly.
• You must include any necessary plug-in files along with the necessary configuration settings.
• You must include your new exported XML file.

Submission Guidelines

Submit an archive file contains all HTML/CSS/JS/images and another required files into Online Review Tool.