CSS is fun and cool and I like it.
Link

Algorithmic Layouts

Don't miss this video by Heydon that digs into CSS layouts. It's great how he combines fundamental knowledge, like the way elements flow, wrap, and can have margin with new layout methods like flexbox and grid (with specific examples). Of particular note is the clear demonstration of how flexbox and grid help avoid the need to constantly intervene with media queries in order to affect responsive layouts.… Read article

user avatar
Shared by
Chris Coyier
Sponsored Article

Building Responsive WordPress Forms

Within the arsenal of every WordPress developer exists a toolbox of plugins used to implement key features on a website. Forms, up until now, have been a point of contention for most developers, given that no form plugins have offered seamless integration with existing website code. Therefore, forms often become an alien chunk of code requiring custom and time-consuming stylization.

Now there’s a solution: WS FormRead article

Article

New ES2018 Features Every JavaScript Developer Should Know

The ninth edition of the ECMAScript standard, officially known as ECMAScript 2018 (or ES2018 for short), was released in June 2018. Starting with ES2016, new versions of ECMAScript specifications are released yearly rather than every several years and add fewer features than major editions used to. The newest edition of the standard continues the yearly release cycle by adding four new RegExp features, rest/spread properties, asynchronous iteration, and Promise.prototype.finally. Additionally, ES2018 drops the syntax restriction of escape sequences from … Read article

Link

Toggling Animations On and Off

A nicely detailed tutorial by Kirupa that gets into how you might provide a UI with persisted options that control whether animations run or not.

The trick is custom properties that control the movement:

body {
  --toggle: 0;
  --playState: "paused";
}

Which are used within animations and transitions:

.animation {
  animation: bobble 2s infinite;
  animation-play-state: var(--playState);
}

.transition {
  transition: transform calc(var(--toggle) * .15s) ease-in-out;
}
Read article
user avatar
Shared by
Chris Coyier
Article

Styling a Web Component

This confused me for a bit here so I'm writing it out while it's fresh in mind. Just because you're using a web component doesn't mean the styles of it are entirely isolated. You might have content within a web component that is styled normally along with the rest of your website. … Read article

Link

How To Learn CSS

Outside of my extreme envy of the SEO they are going to get out of this, Rachel is spot on here. Learning CSS has some pillars, like language syntax, selectors, layout, and flow that, once learned, unlock your CSS merit badge.

What I would add is that if you really want to learn CSS, give yourself a project that has real-world stakes (like a personal website), so what you are doing with CSS feels important and gives you the incentive … Read article

user avatar
Shared by
Chris Coyier
Article

Sass Techniques from the Trenches

Having been in the web development industry for more than 14 years, I’ve seen and written my fair share of good and bad CSS. When I began at Ramsey Solutions five years ago, I was introduced to Sass. It blew my mind how useful it was! I dove right in and wanted to learn everything I could about it. Over the past five years, I’ve utilized a number of different Sass techniques and patterns and fell in love with some … Read article

Link

The 10,000 Year Clock Design Principals

In the new year edition of the Clearleft newsletter, Jeremy Keith linked to the design principals Danny Hillis thought about while considering a clock that would work for 10,000 years.

Here's part of that page… Read article

user avatar
Shared by
Chris Coyier
Article

Reader Mode: The Button to Beat

As a young nerd, I loved to immerse myself in digital worlds, learning the ins and outs of the rules someone else had created for me (intentionally or not). But the older and crankier I get, the more I find myself losing patience when navigating these "delightful" experiences.

This fascination was great for my eventual career as a designer, but unfortunately, it was also like teaching someone kerning—once you learn how to quantify a bad user experience, you can’t … Read article

Link

The practical value of semantic HTML

I love how Bruce steps up to the plate here:

If the importance of good HTML isn’t well-understood by the newer breed of JavaScript developers, then it’s my job as a DOWF (Dull Old Web Fart) to explain it.

Then he points out some very practical situations in which good HTML brings meaningful benefits. Maybe benefits isn't the right word, as much as requirement since most of it is centered around accessibility.

I hope I’ve shown you that choosing the

Read article
user avatar
Shared by
Chris Coyier
Article

2018 Staff Favorites

Last year, the team here at CSS-Tricks compiled a list of our favorite posts, trends, topics, and resources from around the world of front-end development. We had a blast doing it and found it to be a nice recap of the industry as we saw it over the course of the year. Well, we're doing it again this year!

With that, here's everything that Sarah, Robin, Chris and I saw and enjoyed over the past year.… Read article

Link

The Most Hearted of 2018

We've released the Most Hearted Pens, Posts, and Collections on CodePen for 2018! Just absolutely incredible work on here — it's well worth exploring.

Remember CodePen has a three-tiered hearting system, so while the number next to the heart reflects the number of users who hearted the item, each of those could be worth 1, 2, or 3 hearts total. This list is a great place to find awesome people to follow on CodePen as well, and we're working on … Read article

user avatar
Shared by
Chris Coyier
Article

WordCamp US 2018

I recently attended and had the chance to speak at WordCamp US 2018 in Nashville. I had a great time. I love conferences that bring people together around a tight theme because it's very likely you'll have something to talk about with every person there. Plus, I rather like WordPress and its community. The vibe was very centered around Gutenberg, as it was released in WordPress 5.0 just as the conference started. … Read article

Link

The Elements of UI Engineering

I really enjoyed this post by Dan Abramov. He defines his work as a UI engineer and I especially like what he writes about his learning experience:

My biggest learning breakthroughs weren’t about a particular technology. Rather, I learned the most when I struggled to solve a particular UI problem. Sometimes, I would later discover libraries or patterns that helped me. In other cases, I’d come up with my own solutions (both good and bad ones).

It’s this combination of

Read article
user avatar
Shared by
Robin Rendle
Article

Multi-Line Inline Gradient

Came across this thread:

My first thought process was:

But it turns out we need a litttttle extra trickery to make it happen.… Read article

Sponsored Article

Jetpack

My favorite way to think about Jetpack is that it's a WordPress plugin that brings a whole heap of features to your site. I've documented the features that we use here on CSS-Tricks, which isn't even all of them (yet).

Some of Jetpack features are essentially connecting it to the powers of WordPress.com. For example, of course, WordPress.com has some amazing way to optimize and serve images. They can build a service that millions of sites on WordPress.com can benefit … Read article

Link

Quicklink

We're in the future now so, of course, we're working on ways to speed up the web with fancy new tactics above and beyond the typical make-pages-slimmer-and-cached-like-crazy techniques.

One tactic, from years ago, was InstantClick:

Before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by (test yourself here). InstantClick makes use of that time to preload the page, so that the page is already there when

Read article
user avatar
Shared by
Chris Coyier
Article

Storing and Using the Last Known Route in Vue

There are situations where keeping a reference to the last route a user visited can come in handy. For example, let’s say we’re working with a multi-step form and the user proceeds from one step to the next. It would be ideal to have the route of that previous step in hand so we know where the user left off, in the event that they navigate away and come back later to complete the form later.

We’re going to cover … Read article

Article

Thank You (2018 Edition)

Another year come and gone! As we do each year, let's take a look at the past year from an analytical by-the-numbers perspective and do a goal review. Most importantly, I'd like to extend the deepest of thanks to you, wonderful readers of CSS-Tricks, for making this place possible. … Read article

Link

Awesome Demos from 2018

This is an outstanding list of creative and artistic browser demos from this past year from Mary Lou at Codrops.… Read article

user avatar
Shared by
Chris Coyier
icon-link icon-logo-star icon-search icon-star