Latest News

CSS is easy, some might argue, but that “easiness” can cause messy code. This is especially true through power of preprocessors like Sass or Less where, if you aren’t careful, your CSS can become harder to deal with instead of easier. Sass? Harder? This Gist shows a great example of Sass nesting hell.

If your Sass code looks like that, you can definitely improve your code with SEM & BIO, a CSS technique I’ll introduce you to now!

In …

The post Combining the Powers of SEM and BIO for Improving CSS appeared first on CSS-Tricks.

If you ever need to hand-manipulate a color in native CSS, HSL is pretty much the only way. HSL (the hsl() and hsla() functions in CSS) stands for hue, saturation, lightness, and optionally, alpha. We’ve talked about it before but we can break it down a little more and do some interesting things with it.

• Hue: Think of a color wheel. Around 0^o and 360^o are reds. 120^o is where greens are and 240^o are blues.

…

The post HSL() / HSLa() is great for programmatic color control appeared first on CSS-Tricks.

Back in 2012, Internet Explorer 10 came out and, among other things, it finally supported CSS gradients and, in addition to that, the ability to animate them with just CSS! No other browser supported this at the time, but I was hopeful for the future.

Sadly, six years have passed and nothing has changed in this department. Edge supports animating gradients with CSS, just like IE 10 did back then, but no other browser has added support for this. And …

The post The State of Changing Gradients with CSS Transitions and Animations appeared first on CSS-Tricks.

Jeremy Keith talks about a couple of recent frustrating moments in his life. One regarding a musical instrument, one involving a build process:

That feeling of frustration I get from having wiring issues with a musical instrument is the same feeling I get whenever something goes awry with my web server. I know just enough about servers to be dangerous. When something goes wrong, I feel very out of my depth, and again, I have no idea how long it …

The post Frustration appeared first on CSS-Tricks.

Abstracting infrastructure is in our DNA. Roads, schools, water supply networks—you get the idea. Web development is no exception: serverless architectures are a beautiful expression of that phenomenon. Static sites, in particular, are turning into dynamic, rich experiences.

Handling static forms, authentication, and backend functions on statically-generated sites is now a thing. Especially with the JAMstack pioneer platform that is Netlify. Recently, they announced support of AWS Lambda functions on front-end-centric sites and apps. I’ve been meaning …

The post Forms, Auth and Serverless Functions on Gatsby and Netlify appeared first on CSS-Tricks.