Snippets
Here is a collection of useful HTML, CSS and JavaScript snippets that I have saved for future me or perhaps for present you.
Hocus a SCSS mixing
A mixin for hover and focus-visible
![Hocus a SCSS mixing](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F78913%2F1666598124-scss-icon.png&w=64&q=75)
![Hocus a SCSS mixing](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F78913%2F1664101281-css-icon.png&w=64&q=75)
Intersection Observer
Know when element is on the screen
![Intersection Observer](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F78913%2F1664125182-js-icon.png&w=64&q=75)
Accessible Tabs Element
A fully accessible tabs element
![Accessible Tabs Element](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F78913%2F1664192641-html-icon.png&w=64&q=75)
![Accessible Tabs Element](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F78913%2F1664125182-js-icon.png&w=64&q=75)
![Accessible Tabs Element](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F78913%2F1664101281-css-icon.png&w=64&q=75)
Customisable Buttons
Customisable with CSS Vars
![Customisable Buttons](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F78913%2F1664192641-html-icon.png&w=64&q=75)
![Customisable Buttons](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F78913%2F1664101281-css-icon.png&w=64&q=75)
Responsive CSS Grid
A responsive grid layout.
![Responsive CSS Grid](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F78913%2F1664101281-css-icon.png&w=64&q=75)
Scroll Snap Container
A slick scroll container
![Scroll Snap Container](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F78913%2F1664101281-css-icon.png&w=64&q=75)
Custom Scrollbar
Customise the containers Scrollbar
![Custom Scrollbar](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F78913%2F1664101281-css-icon.png&w=64&q=75)
Prefers Reduced Motion
Reduce animation motion
![Prefers Reduced Motion](/_next/image?url=https%3A%2F%2Fwww.datocms-assets.com%2F78913%2F1664101281-css-icon.png&w=64&q=75)