Atomizer Roadmap

[redonkulus]

Hi everybody 👋! If you haven't noticed, there has been renewed activity in the project. Atomizer has served us well internally at Yahoo, as most properties have been using it to manage and build their CSS in production. While we have been using it for many years, we haven't been keeping the project as up to date as it could be.

Below is just some of the work that we plan to do to enhance the project.

Welcome Carrie 🎉!

I would also like to welcome @carriemorrison as a core contributor to the project. She has been working at Yahoo for many years and is our de-facto CSS and Accessibility technical leader for many of our properties. She has extensive knowledge of ACSS/Atomizer and is very familiar with the architecture and concepts. Join me in welcoming her!

Atomizer

• Add new ACSS classes: There has been an unprecedented amount of features and enhancements to the CSS spec since Atomizer was first released. We are currently evaluating the latest standards and adding missing classes to Atomizer. You can see the list in our Google Sheet. Feel free to comment or add suggestions.
• Remove old IE support refactor: remove --ie feature support #448

Packages

We want to make it easy for users to integrate Atomizer into their existing projects. We will look into framework/library integrations to make Atomizer as easy as it can be.

• esbuild, Rollup, Vite, Webpack plugin feat: add atomizer-plugins package #483
• Postcss plugin
  • feat: add postcss-atomizer package #496
  • feat: add postcss-atomizer plugin himynameisdave/postcss-plugins#337

Integrate Guides

Integration guides are important to give users easy to follow instructions for integrating Atomizer in existing and new project.

• Astro
• Next.js
• NuxtJS
• Remix
• SolidJS
• SvelteKit

Website

• Migrate website code from the acss-io/acss-site repository to the acss-io/atomizer repository.
• Integrate Vercel in Pull Requests to automatically deploy the site for preview and testing.
• Added Slack invite to Support page
• Add dark mode support - WIP: Support dark mode on the site #505
• Review and update all content for accuracy (In progress)
• Re-organize navigation and content to make it easier to find information docs navigation reorganization, add new docs #462
• Add site search feat(site): add simple site search #459
  • Make search full screen on mobile
• Add documentation pages for logical groupings of classes. Similar to the "Grid System" page which includes inline-block, flex and tables.
• Add REPL to make it easier to try Atomizer. Following Atomizer Web as an example feat: add REPL for users to experiment #465
• Add table of contents to top of page on mobile - feat: add toc to right side of each page #460
• Reference page: Add links to MDN for classes - docs(app): add mdn link on Reference page #474

Project Updates

• Migrate all active packages and website into the recently converted atomizer monorepo repository. This will make it easier to test new features and publish changes out together.
• Integrate GitHub Dependabot to automatically update dependencies across libraries.

This is just some of the work that is currently being scoped, we will update this issue in the future as we add new features and enhancements.

[roderickhsiao]

Some internal helpers we added at Tinder which not yet covered by the Google sheet

1. image rendering
2. backdrop filter
3. font stretch
4. mix blend mode
5. content-visibility

[redonkulus]

Thanks @roderickhsiao I've added 1, 2, and 3 to the doc. 4 was already added. 5 doesn't seem to be implemented in Firefox or Safari yet, is it part of the spec yet or just a Google thing?

[roderickhsiao]

Thanks!

For content visibility,
its currently module level 2 https://drafts.csswg.org/css-contain-2/#content-visibility

Safari (no singal) https://lists.webkit.org/pipermail/webkit-dev/2020-May/031217.html
Mozilla mozilla/standards-positions#135

probably we can wait a bit

[roderickhsiao]

One thing I like about Tailwind is those examples (similar to what we did for Stencil before), some small common UI examples showing responsive/bidi/theme ...etc will make atomizer more approachable.

[redonkulus]

Good point. It's something Carrie and I have discussed. She added the Alignment page with examples and snippets to help. Is that what you had in mind?

I do like how Tailwind has a page per rule, which has examples, snippets, customizations. But adding a page per rule seems like a bit much to maintain.

We were thinking of grouping like classes together on one page so that the examples are a little more real world like.

[roderickhsiao]

Yeah, I think the tutorial pages make sense!
Probably not a page per rule but some real-world UI like carousel/button ... etc to showcase that we can also build higher-level design systems using Atomizer will make people focus a bit more of how to use it instead of hating the syntax at first without giving a try lol

The examples on Tailwind of how to change font/theme are cool,
Perhaps adding a small example on those syntax part instead of full page snippets (we already have the snippet just not showing the UI).

I personally think Tailwind can get adopted pretty fast because their build-in class/theming make it very easy to start and the UI output is modern, lots of developers now start a project from boilerplate like create-react-app/nextjs and want to have a very easy way to begin with without designers.

[redonkulus]

Perhaps adding a small example on those syntax part instead of full page snippets (we already have the snippet just not showing the UI).

Ya that's a good idea. Having the UI on the page with the examples is key to help users understand how it works.

I personally think Tailwind can get adopted pretty fast because their build-in class/theming make it very easy to start and the UI output is modern, lots of developers now start a project from boilerplate like create-react-app/nextjs and want to have a very easy way to begin with without designers.

Ya I think that is where atomizer differs, Tailwind is more like Stencil (internal project), whereas Atomizer is more of a utility for building from scratch. I think its ok for atomizer to lean into the unopinionated side of its usage but with simple examples to show what is possible. Today, Tailwind charges for boilerplate templates that users can use, I think we can just provide those for free.

[jitendravyas]

+1 to PostCSS plugin

[redonkulus]

PostCSS plugin and many other integrations are documented on the Installation page https://acss.io/installation.html#bundler-integrations

[mikestopcontinues]

Now that there's a postcss plugin, should the Remix docs be updated to suggest it? Seems cleaner than a double-render, but perhaps there's something I'm missing.

[redonkulus]

@mikestopcontinues that's a good point. I haven't tested the PostCSS plugin with Remix yet, but worth a try. I created an issue to track it #646

If you have bandwidth, it would be helpful to test it out locally and see if there are any issues. Thanks!