Development
Here’s a few guidelines for developers of the Breakit front-end user experience.
Semantics
Follow the guidelines for HTML5 and use a logical structure and hierarchy of headings.
Web standards
Web services that we develop should be built to follow the standards for HTML, CSS and JavaScript.
Do's and dont's
- All new JavaScript services must use ES6+
- Don't use jQuery for any new services we develop.
Tools, frameworks and libraries
Webpack, Gulp, Babel, SCSS, React, Redux
Responsive design
Responsive design is all about presenting content based on the user's device and screen size. Images, typography and layout of the web page should be changed, if necessary, to fit the user's screen size using media queries, flexible images, columns etc.
Device orientation
Do not rely on a screen orientation. All content sholud work regardless of diffrent screen orientation.
Links
All links should be underlined when hovered. Colors should be primary or text color.
Touch areas
All touch areas should be at least 40x40px.
URL Design
Do's and dont's
- Write URLs for humans.
- Use hyphens instead of underscore.
- Use lowercase letters.
- Write descriptive URLs.
- Don't use hash-bangs.
- Don't use unsafe characters.
- Don't write too long URLs.
- Don't include file extensions.
Device testing
Before you deploy a new version - make sure it works on all supported browsers and devices. Use simulators such as VirtualBox, iOS Simulator to make sure everything is looking good and working as expected, but most important also make sure it is working as expected on real devices.