Open redonkulus opened 2 years ago
Some internal helpers we added at Tinder which not yet covered by the Google sheet
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?
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
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.
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.
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.
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.
+1 to PostCSS plugin
PostCSS plugin and many other integrations are documented on the Installation page https://acss.io/installation.html#bundler-integrations
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.
@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!
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
acss-io/acss-site
repository to theacss-io/atomizer
repository.Project Updates
atomizer
monorepo repository. This will make it easier to test new features and publish changes out together.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.