static-dev / axis Goto Github PK

Right now, when you call axis() it automatically loads the mixins into all your stylesheets. There should be an option that lets you @include 'axis' if you want, so you can import it when and where you'd like.

This change will be released through a major version bump, since it would be breaking.

If the parameters of grid
column-width = 75px
gutter-width = 20px
columns = 12

That row (12) returns 960px instead of 1140px

Not sure if it's just me or if these work in roots, but not standalone axis, but gradients (like on the buttons) don't show up in IE9-. Is it possible to provide a fallback background: color for these? I'll submit a pull request unless you have reservations.

Any plan to convert the grid, typography etc. to use rem and fallbacks? I wrote simple mixin that I've been using in stylus to specify rem with rpx() and you can pass in a px which converts with the rem base and provides px fallbacks for IE 8.

We need to write some documentation for Jeet, as the current docs are not on par with what we think users will expect.

We need to decide on a strategy here, since Jeet will be improving soon.

I think the best route forward is this:

1. Maintain our own documentation on http://roots.cx while we wait for those improvements to be merged to Jeet
2. Work with Cory on submitting a pull request to the Jeet website that adds some better docs so he can give input on the recent changes and how we should go about documenting them

Also, since Jeet and Axis are sharing similar ideals, we should probably talk about the possibility of a merge.

/cc
@Jenius
@corysimmons
@yoshuawuyts

@Jenius You mentioned that a new release was imminent. If we gather all relevant issues under a milestone we can focus on closing those out and pushing the release. What do you think?

Just wanted to break it out there: I think we're pushing the bounds of what is possible within pure CSS Axis. As outlined in #59 we discussed the option to add postition:sticky with a javascript fallback. It's definitely of great tool to have within a framework but it does add in complexity. What do you guys think?

It looks like saving new files does not trigger livereload. Restarting roots watch seems to fix this. It would be nice to have dynamically added files also be added to the livereload file watcher

When calling the root mixin forms() I get the following error:

------------ ERROR ------------

Error: /usr/local/share/npm/lib/node_modules/roots/node_modules/roots-css/roots-css/forms.styl:199
   195| // WARNING: Creates classes in your css and styles them - not to be used inside an element.
   196| // Adds nicer looking styles to all text inputs and textareas. Overrides the defaults.
   197| 
   198| forms()
 > 199|   input[type='email']
   200|   input[type='number']
   201|   input[type='password']
   202|   input[type='search']

cannot perform input(color, width)[(('email'))]
    at forms() (/usr/local/share/npm/lib/node_modules/roots/node_modules/roots-css/roots-css/forms.styl:199)
    at framework() (/usr/local/share/npm/lib/node_modules/roots/node_modules/roots-css/roots-css/index.styl:73)

It looks like instead of parsing input[type='email'] as a selector, it's trying to call the input() function and then access the result as an array [(('email'))]

I tried searching around and fixing it, but I couldn't find how to do this properly.

One way to bypass the problem is to remove input and just leave there the attribute selector, but that's an ugly workaround more than a fix, so I'm not making a pull request with it.

forms()
  [type='email']
  [type='number']
  [type='password']
  [type='search']
  ...

Version:

$ roots version
1.0.4

background gradient(red, red), gradient(blue, blue)

is compiled into:

background: #b44326 -webkit-gradient(linear, left top, left bottom, color-stop(0, #b44326), color-stop(1, #b44326)) repeat-x;
background: #b44326 -webkit-linear-gradient(top, #b44326 0%, #b44326 100%) repeat-x;
background: #b44326 -moz-linear-gradient(top, #b44326 0%, #b44326 100%) repeat-x;
background: #b44326 -o-linear-gradient(top, #b44326 0%, #b44326 100%) repeat-x;
background: #b44326 -ms-linear-gradient(top, #b44326 0%, #b44326 100%) repeat-x;
background: #00a6fc -webkit-gradient(linear, left top, left bottom, color-stop(0, #00a6fc), color-stop(1, #00a6fc)) repeat-x;
background: #00a6fc -webkit-linear-gradient(top, #00a6fc 0%, #00a6fc 100%) repeat-x;
background: #00a6fc -moz-linear-gradient(top, #00a6fc 0%, #00a6fc 100%) repeat-x;
background: #00a6fc -o-linear-gradient(top, #00a6fc 0%, #00a6fc 100%) repeat-x;
background: #00a6fc -ms-linear-gradient(top, #00a6fc 0%, #00a6fc 100%) repeat-x;

but it should be compiled into this:

background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b44326), color-stop(1, #b44326)) repeat-x, -webkit-gradient(linear, left top, left bottom, color-stop(0, #00a6fc), color-stop(1, #00a6fc)) repeat-x;
background: -webkit-linear-gradient(top, #b44326 0%, #b44326 100%) repeat-x, -webkit-linear-gradient(top, #00a6fc 0%, #00a6fc 100%) repeat-x;
background: -moz-linear-gradient(top, #b44326 0%, #b44326 100%) repeat-x, -moz-linear-gradient(top, #00a6fc 0%, #00a6fc 100%) repeat-x;
background: -o-linear-gradient(top, #b44326 0%, #b44326 100%) repeat-x, -o-linear-gradient(top, #00a6fc 0%, #00a6fc 100%) repeat-x;
background: -ms-linear-gradient(top, #b44326 0%, #b44326 100%) repeat-x, -ms-linear-gradient(top, #00a6fc 0%, #00a6fc 100%) repeat-x;

Oh, and the reason why I'm making a gradient from red to red & blue to blue is not because I'm insane (or at least not entirely)... it's actually because I can't specify multiple solid background colors, so using multiple solid colored "gradients" was the next best thing. However, I doubt that this odd use of gradients is what's causing this error.

Seriously, it's insane.

Can we turn these animations into submodules or something so we could do something like:

@import axis/animation/core
@import axis/animation/fadeIn

I wouldn't care to work on this if it won't cause a problem with anything else.

roots.cx/axis

• Jeets grid system with examples
• Add examples to vertical rhythm + rewording
• Add examples to utilities
• Reword confusing sections
• Improve landing page. Fixes issues mentioned in jescalan/roots-www-old#18 (comment)
• How to remove surplus elements before deploying. Fixes #47

README.md

• Installation guide
• Quick overview of the capabilities
• Link to different elements
• License
• Travis build status badge
• Contributors
• Browser compatibility badge
• Mention the #roots-dev channel on freenode

Time to add some suggestions.

When I put background-size 100% 100%, 200% 100% in a style-sheet using this library, it compiles to background-size: 100% 100% 200% 100%; (note the missing comma).

This breaks some of my CSS that relies on multiple backgrounds & doesn't happen when I compile the stylus w/out using roots.

I think this error is being caused by something related to https://github.com/jenius/roots-css/blob/master/roots-css/vendor.styl#L171

base-font-size = 24px
base-line-height = 32px

I feel as if this isn't a proper default, other frameworks default to

base-font-size = 16px
base-line-height = 24px

Possibly a mistake?

Probably because of this

border(params...)
  params = unquote('1px solid') unless params
  border: params

Hi there!

Would you be interested in having a separate settings.styl with all the vars of index.styl?
https://github.com/jenius/roots-css/blob/master/roots-css/index.styl#L1-48

It could make it easier to keep track of the settings file through time and at the initial extension of it.

What do you think?

Sorry I must be being thick, How would you actually just use roots-css in say a fresh blank connect or express project.

I look at the devDependencies and I'm confused a bit as to why express and jade are ina css library? Those look like it's just to fire off tests.

Can i require rootsCss instead of stylus since it's a dependency or is it a plugin like nib

Just a heads up - roots-css will still be on npm and entirely functional, but new versions and upgrades will be pushed to axis-css on npm, to keep naming conventions consistent. Sorry about the possible small inconvenience, and promise this is the last of the name changes!

If there are any critical fixes, I'll make sure they are pushed back to roots-css as well.

jescalan/roots#107

if @import 'axis/animation' is used, all the keyframe animations get included, even if only one or 2 are being used... that's over 8000 lines of useless CSS.

It would be nice if only the animations that actually get used would be included, even if it's only on a per-file basis.

Have a read of this: http://html5doctor.com/blockquote-q-cite/

The <cite> tag is meant for citing movie, book, post, document titles, not attribution. There's a whole debate about this in the developer community if you look well enough.

Because of this semantically sound way to show the quote’s source, if you’re going to add a cite attribute on <blockquote>, only do so in addition to visible attribution.

The current styling in Axis does not follow proper convention (a better solution proposed ages ago is mentioned on HTML5 doctor - using the <footer> tag instead, but recently it has come to light that this is equally as bad.

Both approaches validate, but do not conform to the HTML5 spec. To quote the proposed solution:

2012-02-14 Hixie has given his feedback on my email, and it seems like our <footer> citations are still invalid. The official recommendation is to put the blockquote in a figure and add attribution in <figcaption>. Read the whole thread as there are some interesting comments. I’ll wait for the dust to settle a little yet…

Thoughts?

This results in cursor: default compiling to cursor: #00a6fc, leaving button-disabled with a pointer cursor and an invalid property.

Using a default install but am getting this error.

22 Apr 12:12:16 - error: Compiling of 'app/views/styles/workspace.styl' failed. nError: /.../roots-css/roots-css/grid.styl:43
   39| column(x, columns = columns)
   40|  display: inline
   41|  float: left
   42|  overflow: hidden
 > 43|  width: total-width * ((((gutter-width + column-width ) * x) - gutter-width) / _gridsystem-width)
   44|  margin: 0 total-width * ( (gutter-width * 0.5) / _gridsystem-width)
   45|  *width: total-width * ((((gutter-width + column-width ) * x) - gutter-width) / _gridsystem-width)-correction
   46|  *margin: 0 total-width * ( (gutter-width * 0.5) / _gridsystem-width)-correction

a bunch of the preset animations are not working. fix that shit.

This issue should be kept open as a reminder because it's a lot of work and will take some time. Perhaps it should be the final step before the v2 release.

The problem with the current formatting of Axis:

1. Some ports from other libraries are direct copy & paste. They use underscores, tabs instead of spaces and the occasional missing colon. These should be changed to reflect our current formatting rules.
2. There are still a few mixins that are named after HTML elements. We should iron these out to prevent that horrible error from ever happening again.
3. I haven't seen this yet, so it could be unapplicable, but just in case - we should inspect the code carefully to see if any modules define mixins with the same name.

Maybe it's something for in the long run, but would it be an idea to make the grid use flexbox with fallbacks. Maybe add in a switch that completely toggles it off whenever ie-support=true if it causes any issues otherwise?

Right now flex.styl is in Axis, but it seems to be more of a loose module than anything else. I think we should make use of this property to further improve the out of the box quality of Axis.

And we really need to add this to the docs; there's no mention of display: flex in there.

I ran into this issue while adding baseline grid support:

It took me a very long time to figure out what was causing it, roughly 2 hours or so. But I eventually found out what was wrong. I had these lines (roughly):

nav ul
nav ol
   some: property

It turns out that instead of setting some: property, it was actually calling your nav() mixin instead, and erroring out with a really confusing error message.

Changing it to this fixed the problem:

nav
  ul, ol
    some: property

And hence, I put forth this suggestion: don't name mixins after elements. It causes conflicts (that can be avoided as above, but not everyone will be as determined as I was to find out how to fix it, and they'll just complain)

So, instead of nav(), have it be navbar() or navigation() or something along those lines.

Whenever I call semantic's grid() and then apply the indents pull(1) and push(1) absolutely nothing happens, there are no changes to the css after compilation.

Features

• Position mixins
• Responsive images
• Typography
• Grid

Performance

• Big fat refactor
• Documentation

Bugfixes

• Base font size in settings
• Gradient background vendor prefixing
• NPM version badge

Possible fix:

1. Remove vendor-prefixes variable in utilities.sty
2. Add vendors variable in example.sty ( e.g. vendors = webkit moz o ms official )
3. Adapt prefix() function to work with new vendors variable

copy of main issue from jescalan/roots#198

Soooo... lets make a list of the stuff that we need switch in order to move this repo over to @roots-dev, and then do it... GH will provide some redirects, but we should make sure that all the links are changed directly after moving.

1. link on http://roots.cx
2. link on http://npmjs.org

In all consideration the clown car technique seems to be the best option for responsive images at the moment. The following is an example of an svg with fallbacks:

<object data="data:image/svg+xml,
    <svg viewBox='0 0 300 329' 
        preserveAspectRatio='xMidYMid meet' 
        xmlns='http://www.w3.org/2000/svg'>
        <title>Clown Car Technique</title>
        <style>
            svg{background-size:100% 100%;
            background-repeat:no-repeat;
            }
            @media screen and (max-width: 400px){
                svg{background-image:url(images/small.png);}}
            @media screen and (min-width: 401px) and (max-width:700px){
                svg{ background-image:url(images/medium.png);}}
            @media screen and (min-width: 701px) and (max-width:1000px){
                svg{background-image:url(images/big.png);}}
            @media screen and (min-width:1001px){svg{background-image:url(images/huge.png);}}
        </style>
    </svg>" type="image/svg+xml">
  <!--[if lte IE 8]>
      <img src="images/medium.png" alt="Fallback for IE">
  <![endif]-->
</object>

A mixin should be able to take some of the pain out and make using responsive images a lot easier.

Just tests to see if there's any way to break it. It's nearly impossible to test if things look right visually, but I can test to see if mixins are breakable, or if the whole library is broken by a typo or mistake.

If more than 2 args were to be passed to one of the position utils, they should all be used.

absolute: top left right should yield position:absolute; top:0; left:0; right:0;

There's still some documentation on http://roots.cx/axis/ that hasn't been updated with the new name... like at the bottom of the page @import 'roots-css/animation' should be @import 'axis/animation'

fix that shit

Please fix table()

Error: /usr/local/lib/node_modules/roots/node_modules/roots-css/roots-css/tables.styl:87
83|
84| tables()
85| if mixin == 'root'
86| table

87| table()
88| else
89| warn(this mixin should be called at root level)

TypeError: expected "msg" to be a string, but got ident:this
at tables() (/usr/local/lib/node_modules/roots/node_modules/roots-css/roots-css/tables.styl:83)
at ".table-smet" (/Users/exdeniz/Dropbox/Sites/Maint/assets/css/_table.styl:58)

This happens in Roots when watching a directory, but since it's an Axis issue I thought it'd be best to document here. I know it's not a huge bug and doesn't warrant any extreme details except that I experienced it on 64bit Windows 8 (not sure about any other OS) but it's still a bug and since Roots is associated with your amazing workplace, it'd be best to remove anything that implies to a new user; "Hey, I don't think I work when actually I do work!" :)

And just to confirm that it is being called at root level - here's the code that reproduces it:

master.styl:

@import '_settings'
framework()

Have you thought about this, or have you started?

Transitions need some work on them. Right now we need:

• Documentation with examples like on magic (although a cleaner UI would be nice).
• More animations.

So the question is: what animations should be included? I rounded up some interesting options:

• Codrops modals
• Magic css3 animations

p.s. Currently have a huge amount of schoolwork that needs finishing, I'm forced to be a little less active on Axis :(

This is desperately needed. Not sure what the best way to do this is, maybe mocha?

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

• Sticky footer
• Equal height columns
• Position: sticky
• Break out of wrapper

Just wondering what your thoughts on this would be.

Review and adjust the typography file according to this article. Not everything might be applicable, but I'll investigate that.

• Hyphenation
• Ligatures
• Font-face reference (at the top of typography
• Adjusting font sizes for fallback fonts

size: 10em yields width:10px; height:10px;
size: 100% yields width:100px; height:100px;
size: 2em 4em yeilds width:2px; height:4px;

Hey guys,

The value 'center' doesn't seem to revert back to the default setting and 'right' has a different offset from the edge of the box.

Cheers

Nick

you know what to do

Some UI components, namely notice, never set a background color without also setting a gradient in the same rule. This means that every single background rule has a gradient which IE8 can't understand, so IE8 doesn't render a background.

Before I commence with the new grid port, I'd like to ask a question. Jeet uses boxsizing.htc to add IE support for box-sizing: border-box.

I also noticed that the pie.htc file was not present in Roots when I created a new project for the first time - so I'm a little confused.

How do you want me to handle this? Should I create a path variable in settings for the file? Should I just call it from within the Axis folder?

Also, have a quick gloss over Jeet's Moving Parts and tell me if there's anything you'd like to add or give an opinion on.

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.