search

acss-io / atomizer

A library to create small, reusable CSS that scales as your website grows.
https://acss.io
Other
1.54k stars 97 forks source link

Atomizer Roadmap #452

Open redonkulus opened 2 years ago

redonkulus commented 2 years ago

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

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.

Integrate Guides

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

Website

Project Updates

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 https://github.com/mozilla/standards-positions/issues/135

probably we can wait a bit

roderickhsiao commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

+1 to PostCSS plugin

redonkulus commented 1 year ago

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

mikestopcontinues commented 1 year ago

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 commented 1 year ago

@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 https://github.com/acss-io/atomizer/issues/646

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