Axis
Axis is a large and robust css utility library built on top of stylus.
Installation
You can install axis through npm, as such:
npm install axis --save
Documentation
You can find full documentation for axis here. This includes usage instructions for integration with gulp, grunt, express, and more, as well as detailed and permalink-able documentation for each mixin that axis offers.
Library Size
Some people have expressed concern that axis is too large of a library and they would prefer a smaller one, where they use a higher percentage of the mixins offered. But since axis is a mixin library, it actually adds zero size to your code. That's right, when you include axis and compile it, not a single character is added to your code.
The only time it adds anything are when you use its mixins, which are engineered carefully to be as slim and concise as possible, and only use spec-compliant css3. This means that you can make axis' entire library of utilities available for free, use only what you like, and almost certainly add up with less code than if you wrote it yourself. Good deal, right?
Browser Prefixing
Axis does not include any cross-browser code at all, only pure css3 as defined by the official spec. If you want your code to work better across browsers, we would recommend that you use autoprefixer, a library that is extraordinarily good at ensuring your css works correctly in the range of browsers you need it to.
Miscellaneous
- Details on the license can be found here
- Details on running tests and contributing can be found here
equal-widths()
@jenius feel free to veto this. Here's another thing I use all the time in my mixins based on this idea:
http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
My mixin isn't super portable at the moment but I could probably write it to be, but I may need some help.
Let me know if you want it.
@abstracthat you ever use anything like this?
Version 0.2.0
This branch is for breaking changes that will push into the next release of axis, which I'd like to chase a little harder. I'll be working on making sure the code is clean, a bunch of our current issues are cleared out, and hopefully get started with integrating nib for the browser-level stuff now that it's being better maintained.
Also want to note that stylus is moving quickly toward a solution for having mixins accept blocks, which is super exciting and will allow us to quickly include responsive mixins and utilities. I'd love to have us be among the first to ship support for these.
Finally, was checking out this project the other day, and would love to offload the responsibility for keeping up with vendor properties to them. If there's a good way to get it integrated, I think this would be an excellent option.
Also, I'd like new changes and improvements to happen in this branch. I'm going to push a small release based on the last commit to master which will be the last upgrade to version
0.1.x
(unless there are bugfixes) before we can release the next version.I haven't been giving axis enough love recently, but this is an awesome library and deserves better. Let's get this bad boy up to speed, shiny and fresh as can be.
/cc @yoshuawuyts @declandewet
Weirdness with testing
@jenius Something odd seems to be happening with testing. Seems to affect most files, but not all. Maybe I'm doing something wrong?
Here is a super simple example:
Here is
code
untouched, passing:Let's say for whatever reason I wanted to change the border radius to
13px
instead of3px
. I changecode.styl
andtest/fixtures/code.css
to both be 13px, but for some reason the test doesn't recognize the change oncode.css
. Still shows up as 3px.But if I change
code.style
back to 3px, oddly,code.css
now sees it as13px
, but clearly still breaking becausecode.styl
is3px
:Am I doing something super dumb, or is something off with testing?
Merge With Nib
Since both axis and nib are pretty much going in the same direction, would you be interested in merging them?
I feel that by combining them, we could get the large number of contributors, well tested code base, and "identity" that nib has, with the wonderful improvements and extensive documentation that axis has made.
debug() 2.0
Not sure if something like this already exists, but here is a little mixin I wrote that really helps us with development:
http://codepen.io/dbox/pen/dPzZoE
Might be cool to add to Axis. I don't know if it fits in with the core functionality of Axis, but it's something that our team uses on every project a lot, so thought others might find it helpful.
cc @jenius
Offcanvas menus
These mixins allow you to create an element with offcanvas menus and a content area. Each offcanvas container can have 1-4 menus and 1 content area. All parameters have defaults, but are configurable.
Mixins: offcanvas() - creates an area with 1 menu and 1 content area (uses offcanvas_multi behind the scenes) offcanvas_multi() - container with 1-4 menus and 1 content area
Additive Mixin: offcanvas_menus() - creates classes for creating offcanvas menus
There is currently no default styling. I also added script tags to the test pages to toggle the open classes.
Position mixins
I recall having trouble setting up a sticky footer, and I believe I'm not the only one. Could we maybe build a mixin to ease some of this?
Position mixins
Remove Nib
Ref #192
Not yet complete, but the majority of the work has been done here and tests are passing. Still needs touchups, a couple more tools imported from nib, and some adjustments to the visual test results.
We also need a summary of all the breaking changes somewhere, which is going to be rather large.
On the plus side, the code is significantly lighter, cleaner, and better. Whoo! :tada:
Axis Sass Port
Hello, just finished watching your tutorial videos on roots and axis. Looking forward to start using these in my projects.
Do you have any plans on porting axis this to Sass?
Image Cacheing Mixin
So, I was thinking...
There is a technique whereby one can achieve a relatively simple means of "preloading" images through the use of CSS alone, and it is considerably well-supported given that all it requires feature-wise is pseudo-elements.
The technique is to simply create a pseudo-element on a top level node (e.g. the
body
tag), set it todisplay: none
and then store a space-separated list ofurl(path/to/image)
s in thecontent
property, like so:Though it may not seem obvious at first, this is quite a useful technique, because it technically enables the browser to cache every image on a website on the first page load, no matter what page the image does or does not display on.
This means that if Bobby Jenkins visits a website with this code for the first time, he'll wait for the page to load, but every page he visits after that will already have every image (that was set in CSS) pre-loaded and cached, so he won't be waiting on them to load when he browses the site further.
The only two drawbacks to this technique is that:
body:after
declarations need to be at the bottom of the stylesheet or it will cause a cascade failureThe good news is, because Stylus has transparent mixins, we can cache any image the user enters into their stylesheet in an array automatically, and then they can call a mixin that outputs all the images for them, taking the pain of maintenance away:
This results in the following CSS:
Does this sound awesome or what? Before implementing it, though - I wanted to get your opinion @jenius - does this kind of mixin belong in Axis?
Axis Range overwrites Stylus Range
I find it unfortunate that valid Stylus is invalid when using the Axis library.
Seemingly it is overwritten by the Axis color range function.
Wouldn't it be better to use another name for the color range that Axis provides. Or is there a workaround I'm not familiar with? Either way I think that leaving Stylus function intact would be the more intuitive solution. Or maybe there is a way to overload the method name if
range
really is the best name forcolor-range
.Other than that. Thank you for a nice library - I enjoy it.
Rewrite of grid-area values
Using this sample code https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas#Example
Actual behaviour
Axis does rename the
grid-area: nav;
tonavigation
which does break everything.Expected behaviour
It should not touch the name of the
grid-area
Update chai to version 4.0.1 🚀
| 🚨🔥⚠️ Action required: Switch to the new Greenkeeper now! 🚨🔥⚠️ | | --- | | This version of Greenkeper will be shutdown on May 31st. | | With Integrations first-class bot support landed on GitHub and we’ve rewritten Greenkeeper to take full advantage of it. Simpler setup, fewer pull-requests, faster than ever.

Hello lovely humans,
chai just published its new version 4.0.1.
This version is not covered by your current version range.
Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.
I recommend you look into these changes and try to get onto the latest version of chai. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.
Do you have any ideas how I could improve these pull requests? Did I report anything you think isn’t right? Are you unsure about how things are supposed to work?
There is a collection of frequently asked questions and while I’m just a bot, there is a group of people who are happy to teach me new things. Let them know.
Good luck with your project :sparkles:
You rock!
:palm_tree:
The new version differs by 352 commits .
b38b8d7
fix: (#978) remove browser field (#982)
d0ace69
Update supported node version badge in README FIX #975
ab1fbad
Merge pull request #973 from chaijs/chore-uncomment-travis-deploy
545ca2f
chore: uncomment travis lines
6349ff4
Merge pull request #972 from lucasfcosta/release-4.0.0
0fe98b1
[email protected]
30a4451
Merge pull request #967 from lucasfcosta/remove-lib-bump
8ba95a7
Remove bump command to change lib/chai.js
0825826
Merge pull request #964 from zetamorph/assert-nestedInclude-ownInclude
f3adfd9
fix: PhantomJS 1.x incompatibility (#966)
b744130
Assert: made documentation more descriptive
33e4403
test: added custom message test to negated .nested-, .deep-, .own.include
4180242
test: added message argument to negated nested-, deep-, own- and deepOwnInclude
40bb490
assert interface: add .deepOwnInclude and notdeepOwnInclude
97b6243
assert interface: add .ownInclude and .notOwnInclude
There are 250 commits in total. See the full diff.
Update chai to version 4.0.0 🚀
| 🚨🔥⚠️ Action required: Switch to the new Greenkeeper now! 🚨🔥⚠️ | | --- | | This version of Greenkeper will be shutdown on May 31st. | | With Integrations first-class bot support landed on GitHub and we’ve rewritten Greenkeeper to take full advantage of it. Simpler setup, fewer pull-requests, faster than ever.

Hello lovely humans,
chai just published its new version 4.0.0.
This version is not covered by your current version range.
Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.
I recommend you look into these changes and try to get onto the latest version of chai. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.
Do you have any ideas how I could improve these pull requests? Did I report anything you think isn’t right? Are you unsure about how things are supposed to work?
There is a collection of frequently asked questions and while I’m just a bot, there is a group of people who are happy to teach me new things. Let them know.
Good luck with your project :sparkles:
You rock!
:palm_tree:
The new version differs by 350 commits .
ab1fbad
Merge pull request #973 from chaijs/chore-uncomment-travis-deploy
545ca2f
chore: uncomment travis lines
6349ff4
Merge pull request #972 from lucasfcosta/release-4.0.0
0fe98b1
[email protected]
30a4451
Merge pull request #967 from lucasfcosta/remove-lib-bump
8ba95a7
Remove bump command to change lib/chai.js
0825826
Merge pull request #964 from zetamorph/assert-nestedInclude-ownInclude
f3adfd9
fix: PhantomJS 1.x incompatibility (#966)
b744130
Assert: made documentation more descriptive
33e4403
test: added custom message test to negated .nested-, .deep-, .own.include
4180242
test: added message argument to negated nested-, deep-, own- and deepOwnInclude
40bb490
assert interface: add .deepOwnInclude and notdeepOwnInclude
97b6243
assert interface: add .ownInclude and .notOwnInclude
24d7fa3
assert interface: add deepNestedInclude and notDeepNestedInclude
7063b94
assert interface: add nestedInclude and notNestedInclude
There are 250 commits in total. See the full diff.
Update mocha to version 3.4.2 🚀
| 🚨🔥⚠️ Action required: Switch to the new Greenkeeper now! 🚨🔥⚠️ | | --- | | This version of Greenkeper will be shutdown on May 31st. | | With Integrations first-class bot support landed on GitHub and we’ve rewritten Greenkeeper to take full advantage of it. Simpler setup, fewer pull-requests, faster than ever.

Hello lovely humans,
mocha just published its new version 3.4.2.
This version is not covered by your current version range.
Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.
I recommend you look into these changes and try to get onto the latest version of mocha. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.
Do you have any ideas how I could improve these pull requests? Did I report anything you think isn’t right? Are you unsure about how things are supposed to work?
There is a collection of frequently asked questions and while I’m just a bot, there is a group of people who are happy to teach me new things. Let them know.
Good luck with your project :sparkles:
You rock!
:palm_tree:
GitHub Release
3.4.2 / 2017-05-24
The new version differs by 108 commits .
a15b20a
:ship: Release v3.4.2
fc802a9
:memo: Add Changelog for v3.4.2
10ff0ec
Eagerly set process.exitCode (#2820)
fc35691
Merge pull request #2818 from makepanic/issue/2802
3e7152f
Remove call to deprecated os.tmpDir (#2802)
e249434
Merge pull request #2807 from mochajs/npm-script-lint
17a1770
Move linting into an npm script. Relates to #2805
ac0c1c8
v3.4.1
64d96d3
:ship: Release v3.4.0
4e3252e
Force rebuild of mocha.js on npm version
7554b31
Add Changelog for v3.4.0
9f7f7ed
Add
--trace-warnings
flag92561c8
Add
--no-warnings
flagceee976
lint test/integration/fixtures/simple-reporter.js
dcfc094
Revert "use
semistandard
directly"There are 108 commits in total. See the full diff.
Update autoprefixer-stylus to version 0.14.0 🚀
| 🚨🔥⚠️ Action required: Switch to the new Greenkeeper now! 🚨🔥⚠️ | | --- | | This version of Greenkeper will be shutdown on May 31st. | | With Integrations first-class bot support landed on GitHub and we’ve rewritten Greenkeeper to take full advantage of it. Simpler setup, fewer pull-requests, faster than ever.

Hello lovely humans,
autoprefixer-stylus just published its new version 0.14.0.
This version is not covered by your current version range.
Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.
I recommend you look into these changes and try to get onto the latest version of autoprefixer-stylus. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.
Do you have any ideas how I could improve these pull requests? Did I report anything you think isn’t right? Are you unsure about how things are supposed to work?
There is a collection of frequently asked questions and while I’m just a bot, there is a group of people who are happy to teach me new things. Let them know.
Good luck with your project :sparkles:
You rock!
:palm_tree:
The new version differs by 23 commits .
3451eab
0.14.0
428b0c7
chore(package): update coveralls to version 2.13.1 (#164)
13b4df9
chore(package): update postcss to version 6.0.1 (#167)
0c94129
chore(package): update autoprefixer to version 7.1.0 (#171)
851591c
chore(package): update coffee-script to version 1.12.6 (#172)
75b2865
chore(package): update mocha to version 3.4.1 (#170)
25ac643
chore(package): update autoprefixer to version 6.7.7 (#159)
efeb583
chore(package): update mocha-lcov-reporter to version 1.3.0 (#155)
8f0c574
chore(package): update autoprefixer to version 6.7.5 (#157)
f46d375
chore(package): update postcss to version 5.2.15 (#156)
ce6a467
chore(package): update autoprefixer to version 6.7.4 (#154)
acc0d5a
chore(package): update coffee-script to version 1.12.4 (#153)
e97ee9a
chore(package): update autoprefixer to version 6.7.3 (#151)
5e72367
chore(package): update postcss to version 5.2.13 (#150)
4b78e17
chore(package): update coveralls to version 2.11.16 (#148)
There are 23 commits in total. See the full diff.
Update coffee-script to version 1.12.6 🚀
| 🚨🔥⚠️ Action required: Switch to the new Greenkeeper now! 🚨🔥⚠️ | | --- | | This version of Greenkeper will be shutdown on May 31st. | | With Integrations first-class bot support landed on GitHub and we’ve rewritten Greenkeeper to take full advantage of it. Simpler setup, fewer pull-requests, faster than ever.

Hello lovely humans,
coffee-script just published its new version 1.12.6.
This version is not covered by your current version range.
Without accepting this pull request your project will work just like it did before. There might be a bunch of new features, fixes and perf improvements that the maintainers worked on for you though.
I recommend you look into these changes and try to get onto the latest version of coffee-script. Given that you have a decent test suite, a passing build is a strong indicator that you can take advantage of these changes by merging the proposed change into your project. Otherwise this branch is a great starting point for you to work on the update.
Do you have any ideas how I could improve these pull requests? Did I report anything you think isn’t right? Are you unsure about how things are supposed to work?
There is a collection of frequently asked questions and while I’m just a bot, there is a group of people who are happy to teach me new things. Let them know.
Good luck with your project :sparkles:
You rock!
:palm_tree:
The new version differs by 48 commits .
f0e9837
1.12.6 missing updated output
f661f91
1.12.6 (#4548)
e00fa5d
Fix #4533: chained calls incorrectly wrapping enclosing implicit objects (#4534)
51c0657
Fix #4150: Correctly outdent ternary followed by method call (#4535)
26cb24a
return
andexport default
can now accept implicit objects (#4532)ac1b2b5
Iss4248 unicode code point escapes (cleanup) (#4522)
96b6c5f
Fix #4248: Unicode code point escapes (#4498)
bfce054
Fix parenthesized conditions in if-else assignment (#4519)
ff60e6a
fix 'future reserved words' test (#4518)
0da9d71
Fix broken links, update redirected links (#4505)
fecdbac
A particular REPL test is broken in Node 4.8.2 because of a regression that was fixed in Node 5.11.0; just disable the test for Node < 6. Fixes #4502. (#4510)
473e8a1
Merge pull request #4507 from GeoffreyBooth/tests-exit-code
faf6d17
cake build:browser
should just assemble the browser build, not also test it; addcake build:browser:full
to additionally run the testsd141d5c
If the tests fail, return a non-zero exit code
a36b454
Merge branch 'master' of github.com:jashkenas/coffeescript
There are 48 commits in total. See the full diff.