CSS math functions min(), max() and clamp()
CSS provides a set of functions for creating numerical expressions to use without having to resort to complex calculations using calc() and variables. Clamp # My favorite use for these functions is to...
Using Pointer Events
In May 2019 I wrote a post about Pointer Events as an introduction to Pointer Events and how they could be polyfilled for browsers (Safari) that didn't support them natively. Almost a year later...
Creating a color library
The idea is to use Dudley Storey's The new defaults to automate adding the colors on the list as a set of CSS Custom Properties using both Javascript and CSS properties. We will use Node and its...
@property rule
CSS Properties and Values API Level 1 provides a CSS equivalent solution to CSS.registerProperty, the @property at-rule. Unfortunately, it is not implemented by any browser yet. The reason why I'm...
Gutenberg as design systems (part 3)
Blocks are awesome and provide a graphical way to create content but sharing them is not as intuitive as I would like to be, at least not yet. This post will discuss how to use plugins to share both...
Gutenberg as a design system (part 2)
In part 1 we discussed how to build variations for specific components. We'll now see how we can create templates ready for the user to fill and either use as-is or modify it when needed. Block...
Gutenberg as a design system (part 1)
One of the things I've found the most intriguing about Gutenberg is the ability to create variations of a given element and build the basic components of design systems. From there we can also build...
Building Gutenberg Blocks (Part 4)
There are many other things we can do with blocks and things to explore. But for right now we'll move into enhancing the blocks we've built and add some flare to them. Making the editor match the...
Building Gutenberg Blocks (Part 3)
Internationalization # We'll take a break from building actual blocks and talk about internationalization or i18n. Taking good care of i18n when you build your plugin will allow you or someone else to...
Building Gutenberg Blocks (Part 2)
We've only worked with static content so far. But the idea behind Gutenberg is to let you work with your own content. This section will also introduce the RichText block components as opposed to the...