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> tag

  • Set a unique <meta name="description" content=""> tag

  • Set 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">

    See also

See also

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:

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#

Reference#