axis icon indicating copy to clipboard operation
axis copied to clipboard

WIP: Axis 2.0

Open dbox opened this issue 7 years ago • 3 comments

Hello! We've been working over the last few months rewriting Axis from the ground up, which includes moving away from Stylus. All of the code is now part of the W3c spec, so eventually all browsers will support Axis features out of the box. But, thanks to Postcss & cssnext, we can use all these features, today.

This is a big departure from the current version (which will always be available from the 1.0.0 branch).

On the surface it will seem like a lot of the utilities have been removed, and that is partially true. Many of these have become obsolete from new browser technologies (flexbox, etc) and many now are available as standalone postcss plugins. (I will be posting a full migration guide that covers every feature.)

We're also starting with the minimum framework, so we can get this thing shipped. But we will be adding new tools and mixins quickly. (I will be posting my list as issues as soon as this ships, but please let me know what other features you'd like to see.)

The main difference in 2.0.0 "mixins" (called --apply), is that you cannot pass arguments. So now Axis comes with a very powerful settings file. Here you can quickly edit just about every aspect of your design.

Once we publish this pre-release here's how to install:

npm install [email protected] --save

Then make sure you are using postcss-import and call Axis at the top of your css:

@import 'axis';

/* Your awesome css here */

The main thing that would be super helpful now is getting some more eyeballs on this and testing it. It's particularly important for us to nail down the variable names as changing those in the future will be breaking changes.

You can view the current kitchen sink here. Full docs will be coming in the next few days, but until then the code is pretty well commented, so get in there and start diving in! Thanks!

@jescalan Feel free to interject anything I'm forgetting here. 💥

dbox avatar Jan 31 '17 03:01 dbox

🎉 Exciting stuff! Already using it in 2 sites I'm currently working on, and it's been great so far. Only thing is that we should run 2.0.0-alpha.1, just because of the way semver parses.

jescalan avatar Jan 31 '17 05:01 jescalan

Is there a minimal doc or a sample project anywhere?

mblarsen avatar Apr 07 '17 11:04 mblarsen

@mblarsen http://axis2.netlify.com/ 😁

jescalan avatar Apr 07 '17 15:04 jescalan