WPRig CSS Custom Properties Playtime

I’m re-starting the Zine Pro theme from a fresh WP Rig installation, and am just concentrating on the PHP, trying to get it close to an “every-layout.dev” design system.

WPRig is a really empowering framework for me because I want to use new cool things, in this case, I’m hanging out in the _custom-properties.css file and starting my thinking from there.

Right now I’m experimenting with this modular scale idea and trying to find some a sense of symmetry, but there is a lot of CSS to replace throughout the theme. I’m getting there.

:root {
  --ratio: 1.5;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));

I literally just stole that part from the modular scale page, and then started replacing things with like var(--s1);, and yolo’ing it.

Whoa, calc() is cool.

Playing with calc() has me trying new things (for me). One new experiment (for me) is adjusting font size to the viewport width. I don’t have any big monitors, so I’m just messing around.

But as a yolo move, I’m trying to use these calc() equations for the WordPress Gutenberg block editor.

I think I changed the Custom editor font sizes in _custom-properties.css to:

	/* Custom editor font sizes */
	--font-size-small: calc(var(--s-1) + 0.25vw);
	--font-size-regular: calc(var(--s0) + 0.25vw);
	--font-size-large: calc(var(--s1) + 0.5vw);
	--font-size-larger: calc(var(--s2) + 0.5vw);
	--font-size-huge: calc(var(--s3) + 0.5vw);

npm run bundle

I enjoy the fact that I can just run npm run bundle, and quickly upload the theme zip file to my site, and hard refresh my browser and see the changes. Like I just added:

.widget li {
	line-height: var(--s1);
	margin-top: var(--s-1);


I know this is noob shit, but messing with CSS that is already there FOR A REASON takes a little time sometimes. You have to be like, ok, did they have to solve a problem when they did this? Is this an aestetic decision? Etc.

every-layout.dev has been useful for me to think about CSS separation of concerns between layout and look.

More to Come.

I will probably be editing this post once I find out why these things are fail, and I finally find a modular scale that works, but these things are new to me.

I’m just digging through _blocks.css, _customproperties.css, _typography.css, _content.css, _global.css, widgets.css, etc. tonight and chipping away at it, and learning.

Soon I want to tackle more Gutenberg things, but I also want to know this css of this theme inside and out right now.

Leave a Reply

Your email address will not be published. Required fields are marked *