Sharing your Atomic CSS work on CodePen

Hey all! I am back with a neat trick in Web Maker. As many of you might have seen, Web Maker now supports Atomic CSS! It uses Atomizer behind the scenes to auto generate the required CSS classes while you write only HTML.

But if you ever tried sharing your Atomic CSS creation on CodePen (through the ‘Edit on CodePen’ button’) you would get an error as CodePen doesn’t supports Atomic CSS currently. But worry not. There is nice little trick to share your creation on CodePen. Heres how:

1. Finish your Atomic CSS creation inside Web Maker.
2. When you are done, change the CSS Mode from Atomic CSS → CSS. This makes all your generated (un-editable) CSS into plain (editable) CSS.
3. Click on Edit on CodePen button and done! Your creation is now on CodePen for the world to see!

Opening Web Maker ACSS creation inside CodePen

Caveat

This trick is perfect for just sharing your work on CodePen. But if you want your pen to be editable by others, that won’t be possible as the CSS cannot be generated again from HTML inside CodePen.

Have you found some cool trick inside Web Maker to make you more efficient and productive? Let me know in the comments or tweet out to @webmakerApp.