A few weeks ago, Zach Leatherman announced that he was going to change the Built with 11ty section 11ty's documentation. He was going to create a performance leaderboard to showcase performant projects using the tool. I wanted my site to break into the top 100!
CSS has a whole lot of power. There are properties and values for any number of amazing designs. With all that power comes a lot to remember. If you don't know about all the tools in your toolbox, how will you find the right one for the job? In this post, we'll take a look at three lesser-used, but super useful tools for various jobs in CSS.
I love JavaScript, but I love rendered HTML much more, so I challenged myself to convert James' client-side JS code to something that rendered HTML. I wanted to do it as quickly and as concisely as possible.
In this tutorial, we'll take a look at how we've added margins in the past with Flex and how gap makes it so we can have these internal margins with no hacks.
The state of the web in 2018 has been heavy into the world of JavaScript. We've made amazing advancements in the way our sites work. Every site has the ability to feel like an application. Without HTML, though, our fancy future may have a dystopian layer right beneath the surface.
It struck me recently as I was writing a new Sass mixin that there may be designers and developers out there that haven't translated vanilla CSS into a Sass function. In this article, I want to show how to take often-used CSS and convert it into a DRY (Don't Repeat Yourself) Sass mixin.
It’s no secret that I'm a fan of ::before and ::after pseudo-elements. I use them to great effect for creating darkened overlays in this previous post. They have so many uses beyond that, though. Here are my top 3 uses for them in my every-day development process.
In a previous tutorial, I described how to create a simple fluid card grid with CSS Grid. In this tutorial, we'll take it a step farther and create promotional spaces that morph in interesting ways.
Use :after elements to create the simplest HTML possible to render useful and fun overlays on top of background images. Then extend them with blend-modes!
Contrary to popular belief, CSS is an absolute delight. Many developers I talk to think the phrase "Modern CSS" is an oxymoron. If you haven’t been watching the growth and maturity of CSS in the past 5 years, you’re doing yourself a disservice.
I'm still convinced that taking inspiration from punk rock design of the 70s and 80s is going to be a trend. If you want to start small, introduce some angles to your design. This is a simple trick to angle a stripe of content without adding awkward white space.
Mobile navigation and the "hamburger nav" pattern aren't going away. In this tutorial, I'll walk you through creating a mobile off-canvas navigation with only CSS and HTML.
Our design trends are about to get a facelift. Grid Layout is coming in the next release of modern browsers. It's important to get a grip on its utility. Let's take a common trend in editorial and marketing design - the "cover page" banner area.
CSS Grid is coming in Firefox 52 in March. That’s amazing. It could overshadow a few small improvements that are also coming in the release. The Box-Alignment module is getting a couple new features, as well.
Grid is an amazing new CSS Specification coming to major browsers in 2017. When it’s ready for use in production, it’s going to drastically change the way we do layout on the web. Currently, there’s no real browser support. Edge and IE10/11 "support" grid, but they implemented an early version of the specification and it’s significantly broken.
With the death of Lella Vignelli last week (Dec. 21, 2016), I read for the first time The Vignelli Canon. The layout of the pages inspired me. I knew that I wanted to give a quick update to some of my blog posts to mirror some of the design from that book -- a book that talks about grids, as well.
Since the Web became a more beautiful place with the advent of CSS, there’s always been a struggle in the use of more modern features of CSS with browsers who are either slower to adopt or more cautious in the way the implement features. There have been many potential solutions for this issue.
There’s magic in the air around CSS right now. There’s so much new to be excited about. One simple thing that you should get excited about is the CSS Shapes Module. These are not CSS shapes like building triangles out of border property hacks. This is taking your content and shaping it around shapes and images.
Layout in CSS is hard. We’ve spent the 2 decades since the inception of CSS battling with its idea of how to lay out content on the web. When we moved from table-based layouts to CSS layouts with floats and positioning, we gained a LOT of flexibility, but we also lost things like vertical centering that tables afforded us. Floats and positioning got us a long way to making really nice looking sites, but with the advent of responsive design and fluid layouts, the struggle has been real...
A giant of the music industry passed on April 21. While I wasn’t a zealous follower of his music, I can tell you the world is a sadder place without Prince in it. But that’s not what I’m writing about. In the social media memorializing of this titan, I came across this