AutomaticCSS @automaticcss - Twitter Profile

AutomaticCSS

@AutomaticCSS

7 months ago

@J_sahani_ Yes it’s in everyone’s account.

1

0

15

AutomaticCSS

@AutomaticCSS

8 months ago

A Better Blog Post Authoring Experience in ACSS 4.0! One of the biggest failures of Gutenberg is its inability to distinguish context properly. For example, if your website uses a black background and white text, Gutenberg will offer you a black background and white text. This is great for PAGES, but not POSTS. Why? Because your post template might inject blog post content into a white/light area even though your site is black. See the Etch blog for an example of this. The problem is that Gutenberg doesn’t know you’re injecting blog post content into a white/light area, so it continues to offer you a white on black authoring experience. This is dumb, and ACSS 4.0 fixes it. In ACSS 4.0, you can override the editor background and foreground color on blog posts only. This is true even if you use a CPT for blog posts. This way, the block editor on PAGES and other CPTs can inherit your website colors while the place you author blog posts can have a custom color experience. Very helpful.

AutomaticCSS's tweet photo. A Better Blog Post Authoring Experience in ACSS 4.0!

One of the biggest failures of Gutenberg is its inability to distinguish context properly. For example, if your website uses a black background and white text, Gutenberg will offer you a black background and white text.

This is great for PAGES, but not POSTS. Why? Because your post template might inject blog post content into a white/light area even though your site is black. See the Etch blog for an example of this.

The problem is that Gutenberg doesn’t know you’re injecting blog post content into a white/light area, so it continues to offer you a white on black authoring experience.

This is dumb, and ACSS 4.0 fixes it.

In ACSS 4.0, you can override the editor background and foreground color on blog posts only. This is true even if you use a CPT for blog posts. This way, the block editor on PAGES and other CPTs can inherit your website colors while the place you author blog posts can have a custom color experience.

Very helpful.

0

273

AutomaticCSS retweeted

John Fraskos

@JohnPixle

11 months ago

I recently wrote an article with practical tips for working with dark mode in @AutomaticCSS. ACSS has a very intuitive logic for managing color schemes, but getting predictable results might be challenging sometimes. Here are 6 design habits that helped me after hours of trial and error. ✦ Start simple Fewer color layers means fewer surprises. Stick to basic structure first, then layer in complexity once your scheme switching is solid. ✦ Use contextual colors (backgrounds and text) Background and text colors simplify your mental model. Relying on them keeps your logic clean and your color switching predictable. ✦ Stay consistent with the role of each palette Example: Use the Base palette for backgrounds and Neutral for text. Pick a logic early and stick to it, or die trying. ✦ Avoid cross-palette mixing Cross-palette combinations (like --primary background with --neutral text) often break in dark mode. Keep text and background colors in the same palette family. ✦ Use scheme exclusions Sections that are already dark, should not invert. Lock those classes with exclusions so they behave consistently across themes. ✦ Test early, and often Toggle dark mode as you build, and catch inconsistencies early. Don’t wait until the end to find out your layout breaks in night mode. Hope it helps! The full post is here: https://t.co/x7zwFI7s24

JohnPixle's tweet photo. I recently wrote an article with practical tips for working with dark mode in @AutomaticCSS.

ACSS has a very intuitive logic for managing color schemes, but getting predictable results might be challenging sometimes.

Here are 6 design habits that helped me after hours of trial and error.

✦ Start simple
Fewer color layers means fewer surprises. Stick to basic structure first, then layer in complexity once your scheme switching is solid.

✦ Use contextual colors (backgrounds and text)
Background and text colors simplify your mental model. Relying on them keeps your logic clean and your color switching predictable.

✦ Stay consistent with the role of each palette
Example: Use the Base palette for backgrounds and Neutral for text. Pick a logic early and stick to it, or die trying.

✦ Avoid cross-palette mixing
Cross-palette combinations (like --primary background with --neutral text) often break in dark mode. Keep text and background colors in the same palette family.

✦ Use scheme exclusions
Sections that are already dark, should not invert. Lock those classes with exclusions so they behave consistently across themes.

✦ Test early, and often
Toggle dark mode as you build, and catch inconsistencies early. Don’t wait until the end to find out your layout breaks in night mode.

Hope it helps! The full post is here: https://t.co/x7zwFI7s24

0

5

1

2

615

AutomaticCSS

@AutomaticCSS

11 months ago

ACSS 4.0 is coming soon. Here’s what you need to know. https://t.co/Cd3lXNDcWP

1

6

0

505

Who to follow

BricksLabs

@BricksLabs

Tutorials on Bricks and WordPress

Oxygen

@RealOxygenApp

If you can build it with WordPress, you can design it with Oxygen.

WebDevStudios | WordPress Leaders

@webdevstudios

18 years building on WordPress. Veteran-owned small business. We care about the web we build. 🇺🇸

AutomaticCSS

@AutomaticCSS

11 months ago

ACSS 4.0 is on the way. We're going to start revealing the details in a series of blog posts and videos over the coming weeks. If you're following us here on X you're in the right place to stay informed. 🎉

0

9

2

0

347