Definition of Done example

definition-of-done.md

Definition of Done

General

• Full compliant to the given Design Style guide
• No lintin errors
• Commit message follows Guidelines
• Component looks like the designs
• All the variations of the component are done (e.g. different viewports)
• There are no @TODOs and commented code except short code information / documentation (only master branch)

Web only

General

• Component is mobile first
• Grid from bootstrap has been used and not modified
• Code lints: HTML, JSON, CSS, mobile friendly, modernIE with no severe errors.
• Forms have validation, are accessible and trigger a proper pattern of a keyboard in a mobile device.
• Airbnb JS and CSS BEM guidelines are followed
• If a lintin rule is disabled it needs a comment that explains the reason

JS

• Code builds successfully
• Code should be written in ES6
• Naming conventions of functions, variables, private variables, classes and constants, filenames and components are followed

CSS / SCSS

• No id's or markup elements are used. Exceptions: html, body
• BEM guidelines are followed
• Sizes use REM
• SCSS code is documented with KSS format (only if needed! -> http://warpspire.com/kss/)

SEO and Accessibility

• Markup is Semantic and SEO friendly (Also for non-SEO crawlers: non-Google search crawlers (e.g. Yandex, Baidu, Soso, Sogou, MSN Bing ...))
• Content images are responsive and have an alt attribute.

Documentation

• All features and decisions are documented
• Markup is documented

Media and markup

• Layout images are loaded via CSS3 (Images not required for SEO)
• Videos and images should be fluid unless stated otherwise.
• Videos should use video.js polyfill (e.g. https://github.com/videojs/videojs-contrib-media-sources)
• Icons are provided as SVG
• Markup is written in lowercase
• Attributes use double quotes
• Elements in the markup are uniquely identifiable
• Markup nesting is kept simple

QA/ Testing

• Provide appropriate links for testing