Super-Powered Grid Components with CSS Custom Properties

A little while ago, I wrote a well-received article about combining CSS variables with CSS grid to help build more maintainable layouts. But CSS grid isn’t just for pages! That is a common myth. Although it is certainly very useful for page layout, I find myself just as frequently reaching for grid when it comes to components. In this article I’ll address using CSS grid at the component level.

Grid is neither a substitute for flexbox nor vice versa. In …
The post Super-Powered Grid Components with CSS Custom Properties appeared first on CSS-Tricks.

Link: https://css-tricks.com/super-power-grid-components-with-css-custom-properties/

Simple Interactive Pie Chart with CSS Variables and Houdini Magic

I got the idea for doing something of the kind when I stumbled across this interactive SVG pie chart. While the SVG code is as compact as it gets (a single element!), using strokes for creating pie chart slices is problematic as we run into rendering issues on Windows for Firefox and Edge. Plus, in 2018, we can accomplish a lot more with a lot less JavaScript!
AI got the following result down to a single HTML element …
The post Simple Interactive Pie Chart with CSS Variables and Houdini Magic appeared first on CSS-Tricks.

Link: https://css-tricks.com/simple-interactive-pie-chart-with-css-variables-and-houdini-magic/

Switch font color for different backgrounds with CSS

Ever get one of those, “I can do that with CSS!" moments while watching someone flex their JavaScript muscles? That’s exactly the feeling I got while watching Dag-Inge Aas & Ida Aalen talk at CSSconf EU 2018.
They are based in Norway, where WCAG accessibility is not a just good practice, but actually required by law (go, Norway!). As they were developing a feature that allows user-selectable color theming for their main product, they faced a challenge: automatically adjusting …
The post Switch font color for different backgrounds with CSS appeared first on CSS-Tricks.

Link: https://css-tricks.com/switch-font-color-for-different-backgrounds-with-css/

1 Element CSS Rainbow Gradient Infinity

I first got the idea to CSS something of the kind when I saw this gradient infinity logo by Infographic Paradise. The gradient doesn’t look like in the original illustration, as I chose to generate the rainbow logically instead of using the Dev Tools picker or something like that, but other than that, I think I got pretty close—let’s see how I did that!
The post 1 Element CSS Rainbow Gradient Infinity appeared first on CSS-Tricks.

Link: https://css-tricks.com/1-element-css-rainbow-gradient-infinity/

Dark theme in a day

Marcin Wichary has written a great piece that dives into how he used CSS Variables to create a night mode and high contrast theme in an app. There’s so many neat tricks about how to use CSS Variables (Chris has also looked at theming) as well as how to organize them (Andras Galante has an interesting take on this) in here. Plus, Marcin shares some tricks about using filters to invert the color of an image.
I also …
The post Dark theme in a day appeared first on CSS-Tricks.

Link: https://medium.com/@mwichary/dark-theme-in-a-day-3518dde2955a

A Strategy Guide To CSS Custom Properties

CSS preprocessor variables and CSS custom properties (often referred to as “CSS variables") can do some of the same things, but are not the same.
Practical advice from Mike Riethmuller:
If it is alright to use static variables inside components, when should we use custom properties? Converting existing preprocessor variables to custom properties usually makes little sense. After all, the reason for custom properties is completely different. Custom properties make sense when we have CSS properties that change relative …
The post A Strategy Guide To CSS Custom Properties appeared first on CSS-Tricks.

Link: https://www.smashingmagazine.com/2018/05/css-custom-properties-strategy-guide/

1 HTML Element + 5 CSS Properties = Magic!

Let’s say I told you we can get the results below with just one HTML element and five CSS properties for each. No SVG, no images (save for the background on the root that’s there just to make clear that our one HTML element has some transparent parts), no JavaScript. What would you think that involves?

The desired results.
Well, this article is going to explain just how to do this and then also show how to make things fun …
The post 1 HTML Element + 5 CSS Properties = Magic! appeared first on CSS-Tricks.

Link: https://css-tricks.com/1-html-element-5-css-properties-magic/

Theming With Variables: Globals and Locals

Setting CSS variables to theme a design system can be tricky: if they are too scoped, the system will lose consistency. If they are too global, you lose granularity.
Maybe we can fix both issues. I’d like to try to boil design system variables down to two types: Global and Component variables. Global variables will give us consistency across components. Component variables will give us granularity and isolation. Let me show you how to do it by taking a fairly simple component as an example.
The post Theming With Variables: Globals and Locals appeared first on CSS-Tricks.

Link: https://css-tricks.com/theming-with-variables-globals-and-locals/

What Houdini Means for Animating Transforms

I’ve been playing with CSS transforms for over five years and one thing that has always bugged me was that I couldn’t animate the components of a transform chain individually. This article is going to explain the problem, the old workaround, the new magic Houdini solution and, finally, will offer you a feast of eye candy through better looking examples than those used to illustrate concepts.

The Problem
In order to better understand the issue at hand, let’s consider the …
The post What Houdini Means for Animating Transforms appeared first on CSS-Tricks.

Link: https://css-tricks.com/what-houdini-means-for-animating-transforms/

Everything you need to know about CSS Variables

This is by far the biggest deep dive I’ve seen on CSS Variables posted to the web and it’s merely Chapter One of complete e-book on the topic.
Truth is, I’m still on the thick of reading through this myself, but had to stop somewhere in the middle to write this up and share it because it’s just that gosh-darned useful. For example, the post goes into great detail on three specific use cases for CSS Variables and breaks the …

Everything you need to know about CSS Variables is a post from CSS-Tricks

Link: https://medium.freecodecamp.org/everything-you-need-to-know-about-css-variables-c74d922ea855