Move Modal in on a Path

Have you seen those fancy interactions where a modal window flys down from the top of the page? Maybe it slides in from the side while it fades up to full opacity? Maybe it falls in from above and goes from blurry to focused? Kinda cool, if it fits the vibe of your website.
They always seem to move in a straight line though. Thanks to the fairly new offset-path, they don’t have to!

The offset-path property in CSS …

Move Modal in on a Path is a post from CSS-Tricks

Link: https://css-tricks.com/move-modal-path/

Form Validation Part 3: A Validity State API Polyfill

In the last article in this series, we build a lightweight script (6kb, 2.7kb minified) using the Validity State API to enhance the native form validation experience. It works in all modern browsers and provides support IE support back to IE10. But, there are some browser gotchas.
Not every browser supports every Validity State property. Internet Explorer is the main violator, though Edge does lack support for tooLong even though IE10+ support it. And Chrome, Firefox, and Safari got …

Form Validation Part 3: A Validity State API Polyfill is a post from CSS-Tricks

Link: https://css-tricks.com/form-validation-part-3-validity-state-api-polyfill/

Form Validation Part 1: Constraint Validation in HTML

Most JavaScript form validation libraries are large, and often require other libraries like jQuery. For example, MailChimp’s embeddable form includes a 140kb validation file (minified). It includes the entire jQuery library, a third-party form validation plugin, and some custom MailChimp code. In fact, that setup is what inspired this new series about modern form validation. What new tools do we have these days for form validation? What is possible? What is still needed?
In this series, I’m going to show …

Form Validation Part 1: Constraint Validation in HTML is a post from CSS-Tricks

Link: https://css-tricks.com/form-validation-part-1-constraint-validation-html/

Stickybits: an alternative to `position: sticky` polyfills

Stickybits is a small JavaScript utility plugin. It’s goal is not to get in the way. It does one thing well: help with sticky elements. It is not dependent on other JavaScript Plugins, can be imported via npm, and approaches sticky elements in a very utility-oriented way.

Solving the sticky element problem can lead to sticky situations
When navigating sites, it is common to see HTML elements, like banners and navigations, sticking to the top and bottom of the browser. …

Stickybits: an alternative to `position: sticky` polyfills is a post from CSS-Tricks

Link: https://css-tricks.com/stickybits-alternative-position-sticky-polyfills/

A Pretty Good SVG Icon System

I’ve long advocated SVG icon systems. Still do. To name a few benefits: vector-based icons look great in a high pixel density world, SVG offers lots of design control, and they are predictable and performant.
I’ve also often advocated for a SVG icon system that is based on s (an “SVG sprite") and the <use> element for placing them. I’ve changed my mind a little. I don’t think that is a bad way to go, really, but there is …

A Pretty Good SVG Icon System is a post from CSS-Tricks

Link: https://css-tricks.com/pretty-good-svg-icon-system/

Server-Side React Rendering

React is best known as a client-side JavaScript framework, but did you know you can (and perhaps should!) render React sever-side?
Suppose you’ve built a zippy new event listing React app for a client. The app is hooked up to an API built with your favorite server-side tool. A couple weeks later the client tells you that their pages aren’t showing up on Google and don’t look good when posted to Facebook. Seems solvable, right?

You figure out that …

Server-Side React Rendering is a post from CSS-Tricks

Link: https://css-tricks.com/server-side-react-rendering/

Naming Things is Only Getting Harder

I was working with CSS Grid and came to the grid-column and grid-row properties. I paused for a moment.
They’re not overly complicated. They are shorthand properties for expressing where an element should start and end on a grids defined columns and rows.
What caught me was the fact that I can name these lines. It’s not a requirement (you can use numbers), but the ability to name the grid lines is something we can do here. In fact, naming …

Naming Things is Only Getting Harder is a post from CSS-Tricks

Link: https://css-tricks.com/naming-things-is-only-getting-harder/

Reactive UI’s with VanillaJS – Part 2: Class Based Components

In Part 1, I went over various functional-style techniques for cleanly rendering HTML given some JavaScript data. We broke our UI up into component functions, each of which returned a chunk of markup as a function of some data. We then composed these into views that could be reconstructed from new data by making a single function call.
This is the bonus round. In this post, the aim will be to get as close as possible to full-blown, class-based …

Reactive UI’s with VanillaJS – Part 2: Class Based Components is a post from CSS-Tricks

Link: https://css-tricks.com/reactive-uis-vanillajs-part-2-class-based-components/

What Does a Well-Documented CSS Codebase Look Like?

In the front-end community, there is a lot of attention related to documenting JavaScript. That’s not so much the case with CSS. Often times I feel like lost when I join a project with minimal or no CSS documentation.
Even though CSS is relatively easy to write, it can be quite hard to maintain. The specificity, the global scope of everything, and the lack of guidance can easily lead to inconsistency, code duplication, and over-complication.
I’ve long been curious …

What Does a Well-Documented CSS Codebase Look Like? is a post from CSS-Tricks

Link: https://css-tricks.com/well-documented-css-codebase-look-like/