Joshua's Docs - Css
Light

Smooth Scroll with CSS Only

https://gomakethings.com/smooth-scrolling-links-with-only-css/

/** Smooth Scroll - CSS Only! */
html {
	scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

Scroll Jump / Hash Jump Offset

If you need to offset content after a scroll jump / hash jump (e.g. user just clicked on href="#faq" to jump to FAQ section, and you have a fixed or sticky nav that is going to overlap), that used to be a task often accomplished by JavaScript, but can now be done entirely with CSS.

The easiest solution is just:

html {
	/** Or, scroll-padding-top, depending on need */
	scroll-margin-top: var(--fixed-nav-height);
}

However, you could optionally target the jumped-to element specifically, with the :target pseudo-selector. Or combine them:

html, :target {
	scroll-margin-top: var(--fixed-nav-height);
}

References: CSS-Tricks, Web Platform News

Older solutions for this problem usually belong in one of these categories:

  • Use JavaScript to listen for jump and adjust offset after it happens
  • Apply a positive padding with a negative margin, to the element that gets scrolled to

    • Example: padding-top: 60px; margin-top: -60px
  • Apply specific offsetting via :target{}

Common Breakpoints

A lot of frameworks share (roughly) the same set of breakpoints. These will probably change as displays get larger and have higher-resolution, but for now, this is a decent starting point. You'll notice that max-width is not used to cap the higher end of the range; this is because you often want a class to kick in at a minimum width, but stick unless overridden by another (for example, using something like class="xs4 sm2" for columns).

/* Extra Small (xs) */
/* < 600px */

/* Small (sm) */
@media (min-width: 600px) {
}

/* Medium (md) */
@media (min-width: 960px) {
}

/* Large (lg) */
@media (min-width: 1280px) {
}

/* Extra Large (xl) */
@media (min-width: 1920px) {
}

References:

Markdown Source Last Updated:
Sat Jan 30 2021 07:48:28 GMT+0000 (Coordinated Universal Time)
Markdown Source Created:
Sun Jan 24 2021 22:15:43 GMT+0000 (Coordinated Universal Time)
© 2021 Joshua Tzucker, Built with Gatsby
Feedback