HTML and CSS#
HTML#
Code style#
Style HTML code using Prettier with 4-space indentation.
CSS#
Frameworks#
Most projects use Bootstrap, some of which use Python packages like django-bootstrap5. Designers are free to use other frameworks like:
Tailwind, a utility classes framework
Vuetify, a Material Design framework
Reminders#
Use a CSS framework’s variables and utility classes, instead of creating new classes
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