Position mixins

[yoshuawuyts]

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

[zspecza]

Yeah sure, seems doable. I've been thinking of adding in an equal height columns mixin too. :)

[yoshuawuyts]

Updated my initial post. More positioning suggestions? I don't think finding and porting common solutions should be too hard.

[zspecza]

The position sticky concept intrigues me - I like the idea, dislike the current support. If we're going to add that in, we should probably create a JS polyfill for it. Not a regular old JS library, I mean a proper polyfill - one that detects your CSS for that property on browsers that do not support it (using Modernizr) and uses JS instead. Similar to how selectivizr.js does it for CSS pseudo-classes

[yoshuawuyts]

I agree with that's the proper way to go. Might seem as if it would take a little longer, but definitely worth it.

[yoshuawuyts]

À Quick search got me this: sticky polyfill

[zspecza]

It's a start but not ideal - it only works on a few browsers, which is a little counter-intuitive for a polyfill

[yoshuawuyts]

Oh haha. It was late, didn't check out the details.

[zspecza]

It could be nice to build and improve on though. I'm not so sure that iOS would be doable though, as accurate listening for the scroll event is a little offputting in that respect. Then again I'm pretty damn sure having position: sticky on mobile browsers is going to be annoying and just doing good ol' position: fixed inside a media query would suffice

[zspecza]

Added something I have found extremely useful to your list :D

[jescalan]

Woah, crazy. Really enjoying the stuff you guys have been coming up with - keep it up!

[jescalan]

Is anyone jumping on this one? It's been 7 months since the last activity -- I'm still interested to see some of this functionality pull requested into the 0.2.0 branch, but if nobody has time I'll close the issue for now.

[zspecza]

So, I actually had planned to do this - but If I recall correctly, I hadn't found a solution to implementing these in such a way that it didn't care about the markup. These all rely on inner wrappers, outer wrappers and so on (except for maybe the break out of wrapper one - I'll investigate)

[zspecza]

So, I've been researching this a little in my off time. Nothing too big for conclusions quite yet, but so far:

1. Break Out of wrapper is implementable - it works quite nicely with Grate/Jeet and reduces the need for a lot of markup (more semantic), for example, where one would desire a centered container but a background that extends the full width (which is used a lot on Carrot.is), this markup:

   <div class='bg'>
     <div class='container'>
       <!-- columns of stuff -->
   </div>
   </div>
   

   Becomes this markup:

   <div class='container'>
     <!-- columns of stuff -->
   </div>
   

   The downside to this is that the browser is forced to paint a much larger box than is really needed, which slows down rendering performance. Interestingly, image-replace() suffers from this issue as well (text-indent: -9999px).

2. Equal Height columns - this is a tricky one. The majority of solutions only benefit a limited number of columns and fixed widths. Other solutions involve using extra containers and markup to simulate the backgrounds with absolute positioning in a relative container, while other solutions rely on background gradients to "fake" the column height. All these solutions so far share in common one downfall: inability to perform source-ordering. Source ordering is the ability to "swap" the order of columns, and a perfect example of this feature is Jeet's shift() mixin. The only one that does not lack any of these issues is the "one true layout" method, which takes a similar approach to the Break Out Of Wrapper concept. You simply do this to your columns:

   .parent {
     overflow: hidden;
   }
   .equal-height-column {
     padding-bottom: 9999px;
     margin-bottom: -9999px;
   }
   

   Unfortunately, this approach is severely limiting as well if you need to have some marginal space between the bottom of the columns and the bottom of their container, as the columns push down behind the content beneath it. This is illustrated in this image, where the borders (which are effectively the background) extend beyond the blue section:

   

   It seems that the only truly feasible way to accomplish columns of equal height that is flexible enough to adapt to different layouts is one that uses Flexbox - so I'm not sure if there's a place in Axis for this anymore, though there is an alternative in table-like markup (using actual tables or display: table) - I have yet to research both the browser support/polyfill environments as well as the responsiveness on that yet.

[jescalan]

1. Actually image-replace doesn't use a large negative margin 😀 But good point, perhaps we should benchmark the performance to see if it's enough of an issue that it wouldn't be worth using?
2. Seems like you've put some solid time into this, great research and writeup. I'm ok with flexbox things -- it was only removed from axis because it's taken care of by nib. As long as we include a warning that it might not be production-suitable yet, I think we could get away with it. If there is a way to do it with table though that might be better just because of higher browser compatibility.

[zspecza]

image-replace used to use text-indent: -9999px - y u so sneaky?

I've only read a few image-replace techniques and if my memory serves me right, there is an issue with setting the font size to 0 - but it's not a rendering speed issue. I'll have to look it up again.

As for using flexbox - browser compatibility is just too much of an issue here - I'm fine with flexbox stuff being in Axis, but I will never use flexbox in a design for at least the next two years, so you won't see me implementing anything that uses it. I'm going to do more research on the table method.

[jescalan]

I don't think it did! But that method has worked great for me across every browser so far, been pretty happy with it. But yeah agreed on flexbox shakes fist at IE

[zspecza]

I could have sworn I saw something with "9999px" in it? Was it not text-indent? Wait, I think I found what's tripping me up - it's the 999px being used in rounded() - somehow over time my memory got that jumbled up. My apologies Jeff! 😄 Out of interest though, why not border-radius: 50% instead?

[jescalan]

Haha no worries. Oh I actually did change it to that, but it has a very different effect. If you put border-radius: 50% on a button, it makes the whole button into a weird oval, whereas border-radius: 999px rounds the corners all the way out to make it look like a pill button, but doesn't distort it otherwise. Try it out, it's pretty crazy.

[zspecza]

I see what you mean! That is crazy. o.O

[jescalan]

Cool with me - add that in!

[zspecza]

Haha, you commented before I could finish editing. I just realized property bubbling bubbles all the way to the top so it could get a parent width and that would break it. It would work nicely if Stylus allowed you to specify how far to bubble up, probably with a 0-based index of some kind eg.

rounded()
  border-radius: @width(0) and unit(@width(0)) is 'px' ? @width : 999px

(I've had this idea for ages as well as many other ones that would make a killer CSS preprocessor but I tried and failed - too advanced for me)

[jescalan]

Ah you're right. I assume you opened a stylus issue for this already? haha

[zspecza]

What so they can steal my ideas? lolno

Jokes aside, this issue had already been opened - but not by me :D

[jescalan]

Closing due to inactivity