Website Info

This is an understyled demo site to mostly demonstrate CSS grid. It's derived from the "Intrinsic Framework".

For more information watch the videos on building a vet site at the No Script Show's YouTube channel. You can download the site from Github.

CSS overview

• Approach borrowed from CUBE CSS.
• Aesthetics are separated from structure in global and block .
• The structure (composition) mostly uses CSS Grid's template areas.
• There's a CSS utility file. On this page it adds document flow.

You should find:

• A basic dark mode theme for those with that preference.
• Logical properties used for internationalization.
• Outlines added for high contrast themes (see snippet below).
• Accessibility may meet WCAG 2.2 AAA.
• HTML should validate on all pages.
• Skip to content links.
• A top Google page speed score on mobile testing.

That said, there will be things missed!

outline: 0.1rem solid transparent;
outline-offset: -0.125rem;

Also Noteworthy

• Opening times flexible list items.
• Bento overlays with box shadow.
• Encrypted email address.
• Use of system fonts.
• Aria-labelledby on icons.
• Dark mode SVGs.
• Open Graph

The image below shows the use of CSS "grid breakouts" using named grid lines. It can be set to full width without creating a wrapper div.

Things to improve

These are not done as it's a template rather than a live site. Also, we need to save things for later content and builds.

• Header layout works better here
• Better Dark mode theming ie. bento colours using relative colours.
• If for more pages, I'd have set more variables (ie. border radius).
• If not as a starter site I may have used grid for each homepage image.
• Testimonial with grid (maybe with snap scrolling).
• Use the picture tag on the Bento "call-out" for a mobile image.
• More border styles in the bento boxes.
• Use the picture tag to swap a new mobile image for the bento call-out.
• More styling on the footer.
• Some HTML restructuring (Hours/ Nav/ Service ).
• Blogging (relatively easy to add).
• Combine and minify CSS, but then it's only 9kb.