HTML and CSS#
HTML#
Code style#
Style HTML code using Prettier with 4-space indentation.
Search engine optimization (SEO)#
On each page of a public-facing website:
Set a unique
<title>
tagSet a unique
<meta name="description" content="">
tagSet social media meta tags, at minimum:
<meta property="og:title" content=""> <meta property="og:description" content=""> <meta property="og:type" content="article"> <!-- or "website" for homepage --> <meta property="og:image" content=""> <meta property="og:url" content=""> <meta name="twitter:card" content="summary">
CSS#
See also
The Data Registry’s webpack.config.js file, for compiling SCSS (Sass).
Frameworks#
Most projects use Bootstrap. Designers are free to use other frameworks like:
Tailwind, a utility classes framework
Vuetify, a Material Design framework
When using Bootstrap, customize it and @import only the components you need.
See also
The Data Registry’s _custom.scss file, for customizing Bootstrap.
Reminders#
Use a CSS framework’s variables and utility classes, instead of creating new classes
Conform to WCAG 2.1 at Level AA for contrast
Avoid using too many font sizes on the same page. To check:
const sizes = {} for (const element of document.getElementsByTagName('*')) { const size = window.getComputedStyle(element).fontSize if (!(size in sizes)) { sizes[size] = [] } sizes[size].push(element) } sizes
Code style#
Style CSS code using Prettier with 2-space indentation. In terms of naming conventions, options include:
Development#
Tachyons X-ray to align objects to a grid