- All public-facing content crawlable at page load.
- All page content pieces linkable, and linkable cross-device.
- Semantics trumps aesthetics.
- All content to all users. Never show or hide content based on device.
- Device agnostic design and UX. Mobile and widescreen should look and feel similar; basically less media-queries = more device agnostic.
- Consider viewport height as much as width.
- As resolution-independent as possible. Vector > raster.
- Embrace native. Scroll, inputs, etc. Never disable pinch/zoom.
- Either do it well, or push back with a suggestion.
- Support evergreen browsers and IE 9+.
- < 5MB initial page load.
- Optimize the shit out of media assets (we have a process for SVG, JPG, PNG and video).
- Mobile first (min-width media queries).
- In context media queries, not grouped at the end of the stylesheet.
- No front end frameworks such as Bootstrap or Foundation.
- No globally-scopped CSS selectors!!!! Always scope styles to a component id/class.
- Semantic, layout-agnostic classnames only (“.intro” instead of .left-column”).
- SCSS.
- CSS selectors leverage the semantic markup (no BEM).
- Vanilla JS.
- JS as modular components, documented inline with JSDoc.
- Gulp not Grunt. Gulp 4.0+, used locally in projects (no global install).
- Always document project meta, setup and deployments in a readme.
- Git.
- Preference NPM dev dependencies over gems, etc.
- Validate the document outline with the HTML5 algorithm.
- Validate markup.
- Our approach to normalising/resets (part of Barebones).
- Handling font icons (part of Barebones).
- Guide to smarter CSS animations (don’t use animate.css).
- How to optimise SVG.
- Working with HTML5 video (see the bash script).
- Barebones. Most projects start with this.
- Hurdler.
- Skid slider. Leverages Hurdler.
- Yaw. Powers horizontally pannable scenes using canvas and an image sequence.
- Customizing native select inputs.
- Full component based project structure. All component assets (HTML template, CSS, JS, images) stored togeather.
- Drop SCSS for standard CSS Level 4 (variables, etc) via PostCSS plugins.
- Drop font icons for SVG.
- Drop Base64 font embedding in anticipation of HTTP/2 and to benefit from WOFF 2.0.
The ultimate future is isomorphic React builds on Node, e.g. http://fluxible.io.
