CSS Code Snippets

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:

Lists: Change Spacing Between Bullet and Text

One way is to use the ::before pseudo-element to create an element that lives in the space between the bullet and text, and then use a positive margin to increase the spacing, or negative to decrease. For example:

<ul>
	<li>List item</li>
</ul>

<style>
ul li::before {
	content: '';
	/** Very little space between bullet and text! */
	margin-left: -8px;
}
</style>

Many more solutions are discussed on this and this StackOverflow.