Table of contents
Absolute Imports
Tired of your imports looking like this?
import Layout from "../../../../../layouts/Layout.astro";
Me too, which is why I'm using absolute imports to make it look nice and clean:
import Layout from "@layouts/Layout.astro";
CSS Reset
I never start a project without Andy Bell's (more) modern CSS reset ! It lays the foundation for what I'm about to do with Utopia's fluid responsive design.
Custom Fonts
Using system fonts is a safe and performant way to add some identity to your typography, but let's be honest: They're overused and quite boring. Which is why I like to use custom fonts, usually one for headlines and one for body text. You can of course always change them to Lobster or Papyrus, I won't judge.
Fluid Responsive Design
I need you to sit down for this one. You don't really need breakpoints to define your layout for mobile, tablet and desktop devices. How could you even anticipate what device will be used to gaze upon your beautiful website?
Wouldn't make it more sense if you had a fluid, yet robust design which
works for all viewports? Which requires less code and no breakpoints.css
nearing 1000 lines of code? Let me introduce you to Utopia , which is used to generate adaptive font sizes and spacing.
You should also check out viewports.fyi for a deep-dive into this topic. And while you're at it, have a look at buildexcellentwebsit.es as well.
Preference Detection
This template automatically changes the theme based on your operating settings by utilising prefers-color-scheme and prefers-contrast . It also checks if you prefer reduced motions via prefers-reduced-motion . Look and behold, the power of CSS!
Pre-Commit Hooks
Commiting to something can sometimes take a lot of effort. Commiting
code is no exception, but at least here we can pull out the safety net
to soften our fall in case we made a mistake. In this case it's running
npm run build (powered by Husky ), which will look for the following things in your project BEFORE the
project is build and BEFORE your code is being commited:
- Errors
- Warnings
- Hints
Prettier Config
I don't know about you, but if my code is not nicely formatted after hitting save, I'm starting to feel very weird. Which is why this comes with a Prettier configuration, in case you're using it. Or a you one of those people who do this manually?!
SEO
Predefined values for improved search engine optimisation can be found
in
Layout.astro. These settings have been my reliable
companion for a couple of years now and I put a lot of research, work
and testing into it.
Security Headers
Better safe than sorry, am I right? There are multiple ways to add
security headers to your website and I decided to store them in a
vercel.json file, cause this website was deployed to (you guessed
it) Vercel . It
contains the following headers, feel free to adjust them to your needs:
- Content-Security-Policy
- X-Frame-Options
- X-Content-Type-Options
- Referrer-Policy
- Permissions-Policy
Usability
I've added a bunch of handy utilities which will not only improve usability, but accessibility as well:
- "Back to top" button
- External link (showing icon)
- Improved focus behaviour *
- Skip link
* Thanks to Stephanie Eckles & Adam Argyle
