I’ve been auditing a ton of CSS lately and thought it would be neat to jot down how I’m going about doing that. I’m sure there are a million different ways to do this depending on the size and scale of your app and how your CSS works under the hood, so please take all this with a grain of salt.
First a few disclaimers: at Gusto, the company I work for today, our engineers and designers all write in … Read article
Let's say you need a gradient border around an element. My mind goes like this:
- There is no simple obvious CSS API for this.
- I'll just make a wrapper element with a
linear-gradientbackground, then an inner element will block out most of that background, except a thin line of padding around it.
Perhaps like this… Read article
This is the second post in a two-part series about creating a Gulp workflow for WordPress theme development. Part one focused on the initial installation, setup, and organization of Gulp in a WordPress theme project. This post goes deep into the tasks Gulp will run by breaking down what each task does and how to tailor them to streamline theme development.
This is the first part of a two-part series on creating a Gulp workflow for WordPress theme development. This first part covers a lot of ground for the initial setup, including Gulp installation and an outline of the tasks we want it to run. If you're interested in how the tasks are created, then stay tuned for part two.
One thing that has long surprised (and saddened) me is that the
clip-path property, as awesome as it is, only takes a few values. The
ellipse() functions are nice, but hiding overflows and rounding with
border-radius generally helps there already. Perhaps the most useful value is
polygon() because it allows us to draw a shape out of straight lines at arbitrary points. … Read article
Codrops has a very nice article on CSS Shapes from Tania Rascia. You might know
shape-outside is for redefining the area by which text is floated around that element, allowing for some interesting design opportunities. But there are a couple of genuine CSS tricks in here:
shape-outsideelements both right and left to get text to flow between them.
- You can set
shape-outsideto take an image and use
shape-image-thresholdto adjust where the text flows, meaning you could
These animations are the type of features that can turn a good user experience into a great one. But to achieve this in a React stack, it is necessary to couple crucial parts in your application: the routing logic and the animation tooling.
Let’s start with … Read article