AlpineUX Logo

Food & Drink

Hospitality & Real Estate

Services & Retail

I am incredibly grateful to have worked with Jason for almost three years.

Todd, Turnip Vegan

Website

Platforms

Custom Code

Patient, knowledgeable, and professional—Jason made the website development process smooth and stress-free.

Justin, ShortOnSpace

In-person Locations

 

AlpineUX Navbar Mountain Image

Webflow

CSS / SASS

Javascript

jason@alpineux.com Start a Project

Code

Snippets, helpers, and components we use and share.

esc

Type to search across all code snippets
Webflow CSS Javascript

The Temporal API

The Date object has been the most hated part of JS for 30 years. In 2026, we use the Temporal API. It is immutable and handles time zones correctly.

Fluid Scale Mixin

This mixin automates the math. You just tell it which "level" of the scale you want, and it handles the rest.

Automatic Transition Wrapper

Stop writing transition: all 0.3s ease-in-out on every hover. Use a mixin that defaults to your brand's specific timing and easing curves.

SCSS Color Palette Generator

Generate an entire monochromatic palette from a single base color using a loop.

The "Quantity Query" Mixin

You can style an element based on how many siblings it has (e.g., "if there are 4 items, make them 25% width; if there are 3, make them 33%").

The Getter Function for Maps

Don't use map-get($colors, "primary") everywhere. It’s verbose and ugly. Write a simple wrapper function instead.

Centralize All Z-index Values

Z-index bugs are some of the most painful to debug. Never write a raw z-index number again.

Disable Body Scroll When Navbar Is Open

Prevent background scrolling when a mobile hamburger menu is open. Vanilla JavaScript snippet that toggles a scroll-disabled class on the body element and resets on window resize.

Disable Body Scroll When Navbar Is Open

Prevent background scrolling when a mobile navigation menu is open in Webflow. Toggles a scroll-disabled class on the body and resets on desktop resize.

SCSS Breakpoint Mixin with Map

A reusable SCSS breakpoint mixin using sass:map. Define breakpoints once, use them everywhere with @include bp() for clean responsive styles.

CSS Child Selectors

Learn 5 CSS selectors for styling child elements — descendant, direct child, adjacent sibling, attribute, and state-based selectors with beginner-friendly examples.