Axis is a large and robust css utility library built on top of stylus.

  • By Static Dev
  • Last update: Oct 20, 2022
  • Comments: 17

Axis

npm tests dependencies

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

Github

https://github.com/static-dev/axis

Comments(17)

  • 1

    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?

  • 2

    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

  • 3

    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: 1

    Let's say for whatever reason I wanted to change the border radius to 13px instead of 3px. I change code.styl and test/fixtures/code.css to both be 13px, but for some reason the test doesn't recognize the change on code.css. Still shows up as 3px. 2

    But if I change code.style back to 3px, oddly, code.css now sees it as 13px, but clearly still breaking because code.styl is 3px: 3

    Am I doing something super dumb, or is something off with testing?

  • 4

    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.

  • 5

    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

  • 6

    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.

  • 7

    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

  • 8

    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:

  • 9

    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?

    AUTHOR EDIT: A sass port is underway at the moment by a third party. Scroll to the bottom of this issue for discussion and a link to the project!

  • 10

    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 to display: none and then store a space-separated list of url(path/to/image)s in the content property, like so:

    .first-image {
      background: url("../img/image1.png");
    }
    
    .second-image {
      background: url("../img/image2.png");
    } 
    
    body:after {
      display: none;
      content: url("../img/image1.png") url("../img/image2.png");
    }
    

    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:

    1. it requires maintaining a long list of images
    2. the body:after declarations need to be at the bottom of the stylesheet or it will cause a cascade failure

    The 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:

    // initialize empty "array"
    image-cache = null
    
    // overwrite url() to cache any images not in the "array" already
    // then revert back to it's original use
    url(s)
      push(image-cache, s('url(%s)', s)) unless s in image-cache
      return 'url(%s)' % s
    
    // mixin that outputs the image cache script
    cache-images()
      body:after
        display: none
        content: image-cache
    
    .element-1
      background: url('img/image1.png')
    
    .element-2
      background: url('img/image2.png')
    
    cache-images()
    

    This results in the following CSS:

    .element-1 {
      background: url('img/image1.png');
    }
    .element-2 {
      background: url('img/image2.png');
    }
    body:after {
      display: none;
      content: url('img/image1.png') url('img/image2.png');
    }
    

    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?

  • 11

    Axis Range overwrites Stylus Range

    I find it unfortunate that valid Stylus is invalid when using the Axis library.

    $myList = range(50px, 800px, 50)
    

    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 for color-range.

    Other than that. Thank you for a nice library - I enjoy it.

  • 12

    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; to navigation which does break everything.

    #page > nav {
      grid-area: nav;
      background-color: #ffa08c;
    }
    

    Expected behaviour

    It should not touch the name of the grid-area

  • 13

    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.

    State Update :rocket:
    Dependency chai
    New version 4.0.1
    Type devDependency

    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.

  • 14

    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.

    State Update :rocket:
    Dependency chai
    New version 4.0.0
    Type devDependency

    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.

  • 15

    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.

    State Update :rocket:
    Dependency mocha
    New version 3.4.2
    Type devDependency

    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

    🐛 Fixes

    🔩 Other


    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 flag
    • 92561c8 Add --no-warnings flag
    • ceee976 lint test/integration/fixtures/simple-reporter.js
    • dcfc094 Revert "use semistandard directly"

    There are 108 commits in total. See the full diff.

  • 16

    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.

    State Update :rocket:
    Dependency autoprefixer-stylus
    New version 0.14.0
    Type devDependency

    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.

  • 17

    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.

    State Update :rocket:
    Dependency coffee-script
    New version 1.12.6
    Type devDependency

    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 and export 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; add cake build:browser:full to additionally run the tests
    • d141d5c 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.