AutomaticCSS @AutomaticCSS - Twitter Profile

AutomaticCSS

@AutomaticCSS

about 1 year ago

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

1

0

15

AutomaticCSS

@AutomaticCSS

about 1 year 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

288

AutomaticCSS retweeted

John Fraskos

@JohnPixle

over 1 year 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

623

AutomaticCSS

@AutomaticCSS

over 1 year ago

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

1

6

0

514

Who to follow

Advanced Custom Fields

@wp_acf

ACF® is a powerful plugin for WordPress developers giving control of custom content with fields, post types & taxonomies. From @dliciousbrains & @wpengine

Kyle Van Deusen

@kylevandeusen

Website developer and co-founder of The Admin Bar — Voted the #1 WordPress community.

WebDevStudios | WordPress Agency

@webdevstudios

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

AutomaticCSS

@AutomaticCSS

over 1 year 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

352