Behind the Framework
Reduce Complexities & Improve Performance
Native CSS
Samples shared, showcase lesser known and modern CSS patterns. The goal in these examples is not to create simple code everyone can understand. It's to provide robust patterns that work really well using modern methods.
CSS Trigonometry
Use the sin() and cos() functions in CSS to place elements perfectly around a circle — and build a circular menu without JavaScript.
Learn moreAnimate On Scroll
CSS only, elements are animated when the page is scrolled and they enter the viewport.
Learn moreCSS Parallax w/ Sections
Pure CSS Parallax Scroll with 3 sections using three layers of perspective. Base, Mid & Top
Learn moreCSS Counters
CSS Counters are one of those things a lot of people aren't aware of. CSS Counters are a method of controlling number values in generated content, using the counter-reset and counter-increment properties. No Javascript required.
Learn moreClip Path & Filters
The clip-path CSS property creates a clipping region that sets what part of an element should be shown. Parts that are inside the region are shown, while those outside are hidden. The filter CSS property applies graphical effects like blur or color shift to an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.
Learn moreInterest Invokers
Interest invokers provide a mechanism for updating an interface or running custom code when a user "shows interest" or "loses interest" in an element (for example, by hovering or unhovering it). They are most commonly used to show and hide popovers.
Learn moreLight & Dark Modes
A fun CSS example for demonstrating the use of color-scheme to support light and dark mode toggle.
Learn moreLine-Clamping
Line Clamping specifies the number of lines after which the content will be clamped and clamp() CSS function which clamps a middle value within a range of values between a defined minimum bound and a maximum bound. See below example showcasing line-clamp on a block of text and clamp() affecting the width of an element.
Learn moreRelative Colour
The CSS colors module defines relative color syntax, which allows a CSS <color> value to be defined relative to another color. This is a powerful feature that enables easy creation of complements to existing colors — such as lighter, darker, saturated, semi-transparent, or inverted variants — enabling more effective color palette creation.
Learn moreCSS Anchor Positioning
The CSS anchor positioning API provides a powerful way to tether an element (like a popover) to another (the anchor) and define a set of position-try-fallbacks used if the element runs out of room. For example, if your anchored element is initially styled to be on the top, but as you scroll and it hits the edge of the screen, the browser can handle the "flipping" to keep it in the viewport.
Learn moreMedia Queries Syntax Range
This new syntax allows for greater accuracy. The min- and max- queries are inclusive of the specified values. The new syntax lets you be more explicit about what you mean and avoid the potential of clashing queries. For example min-width 300px tests for a width of 300px or greater.
Learn moreCSS Tabs
CSS-only tabs to show you don't need to adopt a whole library when creating a tab interface.
Learn moreattr() Calculations w/Star Rating
The attr() CSS function returns the value of a given attribute of the selected element, or a default value if that attribute is not set. The calc() function is used to perform calculations on values.
Learn moreCustom Color-Scheme
The color-scheme CSS property allows an element to indicate which color schemes it can comfortably be rendered in. In this example we explore ways to add accent colors to input elements.
Learn moreAnimating Boarders - @property
CSS Border Animations using css pseudo-elements ::before and ::after. Creating a border animation in css using conic-gradients and custom propertie variables.
Learn more:has() & :not(:has())
The functional :has() CSS pseudo-class represents an element if any of the relative selectors that are passed as an argument match at least one element when anchored against this element. This pseudo-class presents a way of selecting a parent element or a previous sibling element with respect to a reference element by taking a relative selector list as an argument.
Learn moreObject-fit
The object-fit CSS property sets how the content of a replaced element, such as an <img> or <video>, should be resized to fit its container.
Learn moreSticky Positioning with scroll animation
CSS only, animate elements as the page is scrolled while maintaining sticky elements. Inspired by Tesla app.
Learn moreCarousel using scroll-button()
Implement a simple carousel with pure HTML and CSS using scroll-button(), scroll-snap-type and scroll-marker.
Learn morePseudo Content & attr()
Using attr() functions to apply values to the content property of a psedo element. The example below passes a string value through the HTML data-lable attribute. In CSS this value is applied to the content property of the :before pseudo element using the attr() function.
Learn morescroll-target-group
The scroll-target-group CSS property specifies whether an element is a scroll marker group container. This allows for styling the current scroll target. In this example, the current scroll target is styled with red text and bold font weight.
Learn moretext-box-trim
The text-box-trim property let us specify whether to clip the whitespace above and/or below text. It’s used along the text-box-edge property to set how much of the whitespace should be trimmed.
Learn moreComing soon:
- un-bamanced vs balenced text
- pretty balancing
- container queries
- color-mix
- Layers
- Trig functions
- Subgrid