Rules of Combat

Code

• Cleanliness

  All code (HTML/CSS/JS) is organized, readable, efficient and current..

  0 - 10

• Semantics

  Logical elements and class/ID names are used.

  0 - 10

• Validation

  HTML will be validated with the W3C Markup Validation Service. 100% valid HTML isn't necessary but thoroughness is encouraged.

  0 - 5

User Experience

• Match Original Design

  Submission should match original design as closely as possible.

  0 - 10

• Accessibility + Good Choice Points

  Smart choices - Covers any accessibility concerns, Elements that should be text are text, buttons are flexible, rollovers look good, etc...

  0 - 10

• Interactions

  Additional states (rollovers, focus, etc) are not in place in the original design. These should be treated in a way that is consistent with the original design.

  0 - 10

Browser Support & Optimization

• Modern Browser Support

  Submission should render well in: Firefox (Latest Version), Safari (Latest Version), Chrome (Latest Version), Opera (Latest Version), and Internet Explorer 10

  0 - 10

• Legacy Browser Support

  Submission should gracefully degrade in Internet Explorer 8

  0 - 5

• Overall Project Size

  The largest (reasonable) entries will receive a 1, the smallest receive a 10.

  No minification of anything but libraries and/or frameworks. Anything that is custom for this project needs to be able to be examined by the judges (Specifically the CSS.)

  0 - 10

• Resource Optimization

  Files, fonts, images, and code should be optimized for speed and efficiency.

  All libraries, frameworks, javascript, images, and css must be included in the project. Do not link to external libraries or frameworks. With the exception of the fonts - we will ensure the fonts are available via a free service such as Google Fonts.

  0 - 10

Responsiveness

• Responsive Implementation

  The submission should be responsive across multiple form factors and platforms.

  0 - 10

Total

• Maximum Score

  100

1. Disclaimer: We will make all attempts to provide a final score for your entry, however there will be a "qualification" round where entries will be removed from scoring round review if they do not address one or more of the main areas of judging.
2. You only need to create the one page from the mockup. It is a single page website.
3. Everything present in the design mockup must be in your finished design, at a minimum. If you wish, expand upon what is there. Just remember that you are being judged on everything that you do. Adding extras may set your design above the others or may sink it.
4. Rollover states are not provided for anything, you must create appropriate states for all interactive elements. Use your creativity.
5. Your submission will be released to the public under a Creative Commons license in your name. If you donʼt like that, then please donʼt enter the contest. After judging is complete, select entries will be hosted online and available to browse & download.
6. Remember low file size is an attribute of quality code design. We should not be downloading 2 MB image files! We will be reviewing the final image quality of all graphics used. No minification of anything but libraries and/or frameworks. Anything that is custom for this project needs to be able to be examined by the judges.
7. You may link to the online resources for fonts used in the design. All the fonts used in the design are free Google Fonts:
   • Oswald: http://www.google.com/fonts/specimen/Oswald
   • Lato: http://www.google.com/fonts/specimen/Lato
   • Merriweather: http://www.google.com/fonts/specimen/Merriweather
   • Lora: http://www.google.com/fonts/specimen/Lora
8. The code should mostly validate via W3C online validation services. Doesn't have to be perfect but should be pretty darn close. We will decide what "close" means.
9. You should use CSS for the design. Any other technology you chose to employ is completely up to you. However this should not be anything we need to install or tweak in order to load the executed code via CodePen.
10. All submissions must work in a "pen" on CodePen. Meaning the entry must load in the judge's browser from the link you provide of your CodePen submission's "pen".
11. If you don't already have a CodePen account signup for a free account here. Once you have your account, go here and convert your account to a free CSSOff Pro level account for the duration of the contest. This will allow you to upload resources like images and javascript files and stuff.
    • PRO accounts are provided free and with full access rights to privacy, asset hosting, collaboration, etc.
    • The accounts are time limited from signup date to the end date of the CSOff contest.
    • Users will not lose the work once the promotion ends.
    • Private pens will stay that way unless the user chooses to publish them, but new private pens can’t be created.
    • Assets uploaded during the promotion will stay uploaded, but once the promotion ends, new assets can’t be uploaded.
    • Have questions or need help?
12. Designs do not have to look the same in every browser. However, the design should be perfectly usable in any browser (listed below), with no areas that appear to be mistakes or broken.
13. Submissions will be tested in modern and legacy browsers:
    • The latest version of: Firefox, Safari, Chrome, Opera, and Internet Explorer
    • Legacy: Internet Explorer 8
14. All registered competitors will receive the design via e-mail on November 12th, 2013 at 12:00 PM EDT US and will have two weeks to complete the project.
15. The final due date for all entries is November 26th, 2013 at 12:00 PM EDT US.
16. There will be a qualifying round where all the submissions will be judged to ensure elements of each category of scoring are present in the submission. Your submission may be disqualified from further judging if it misses one or more of the judging criteria and therefore you may not receive any of the judges feedback.
17. Scoring will happen in 3 distinct scoring "rounds". Round 1 is basic qualification, Round 2 is initial scoring, Round 3 is the final judging round where entries are ranked for winners.
18. The top 25 scores will be posted online whenever winners are announced.
19. There are a set of short "legal terms" you will have to agree to as well in order to enter.

• All submissions must run in a "pen" on CodePen.
• Your entry does not properly address one or more of the areas of judging.
• All libraries, frameworks, javascript, images, and css must be included in the project via codepen.io. Do not link to external libraries or frameworks - with the exception of the fonts used in the design.
• No minification of anything but libraries and/or frameworks. Anything that is custom for this project needs to be able to be examined by the judges.