Animating an element along a path is something we as developers would normally reach for a big old JS library (like GSAP) for. But with the new CSS Motion Path module, we can create fancy path animations using only CSS!
Read more
Different people have differing views on writing when it comes to personal blogs. Some people spend a long time perfecting a draft, making sure everything reads well, there are no grammatical errors, and all the code examples are helpful and flawless. Others dash out a draft and publish as quickly as possible, then worry about editing later.
Read more
I’m going to try to keep this 2019 retrospective brief, but like many people, I find it cathartic to look back at the year’s triumphs and disappointments (not dwelling for too long on the latter), and ready for myself for the year ahead.
Read more
Custom properties (also known as CSS variables) allow us to store property values for re-use in our stylesheets. If you’re relatively new to them, you might wonder when you might use them over and above preprocessor variables (if indeed you use a preprocessor). I’m using custom properties a lot in my workflow these days, and thought I would collate some of the use cases here.
Read more
Published on 24Ways
Read it on 24 Ways
I love the new BBC adaptation of Philip Pullman’s His Dark Materials trilogy of novels. There’s also some pretty nice graphic design to appreciate. I’m a sucker for a beautiful title sequence (I need to watch the opening credits of Game of Thrones in full, every single time), and this one certainly fits the bill, as well as the striking logo. After watching a recent episode, I thought I’d have a go at re-creating this logo with CSS!
Read more
I recently needed to build a design for a contact list that looks like this:
Read more
A Modern Front End Workflow
In the previous two articles we went through configuring a project starter repository using NPM scripts and Parcel. I tend to employ more or less the same Sass architecture for every project, so I want my boilerplate to include the SCSS files and folders I need to get started writing code straight away. This is my preferred architecture, loosely based on Harry Roberts’ ITCSS (Inverted Triangle CSS), and our boilerplate at my previous agency, Mud:
Read more
A Modern Front End Workflow
Parcel purports to be a “zero-config” alternative to Webpack, a popular Javascript module bundler. A module bundler takes separate, reusable JS files (or modules) and “bundles” them into a single file to be served to the browser, as well as minifying the output. This can improve website performance, as the browser doesn’t need to load a bunch of files individually. This in itself is very useful, but Parcel also takes care of other tasks for us out of the box, including:
Read more
A Modern Front End Workflow
When it comes to building a simple front-end project, how do you get started? What are the tools you need? I suspect everyone will have a different answer. Do you start with a (JS or CSS) framework, or off-the-shelf boilerplate? Perhaps you use a task runner (like Gulp to orchestrate your project’s needs. Or do you start simple, with just HTML and a CSS file?
Read more
An article on new and upcoming CSS features for Web Designer magazine.
Read it on Creative Bloq
My son was recently tasked with the responsibility of looking after his pre-school class teddy bear for the week, which comes with the obligation to take said teddy bear out on adventures and add your memories to a scrapbook. I quite enjoyed creating this scrapbook layout, and it got me thinking about how I would build something like this with CSS Grid!
Read more