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.
Animate 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 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 moreScrollSnap Carousel
Implement a simple carousel with pure HTML and CSS. OK Maybe a little JS.
Learn moreSticky Positioning with scroll animation
CSS only, animate elements as the page is scrolled while maintaining sticky elements. Inspired by Tesla app.
Learn moreCSS Tabs
CSS-only tabs to show you don't need to adopt a whole library when creating a tab interface.
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 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 moreComing soon:
- un-bamanced vs balenced text
- pretty balancing
- container queries
- color-mix
- Layers
- Trig functions
- Subgrid