Continuing the discussion from http://www.sitepoint.com/community/t/useful-compass-features-for-web-development/117418:
Not a fan of your sticky footer example. Having fixed heights on anything is promoting bad practice, especially in RWD days, and I think it could have been better. This is a better example:
If we are going to show code examples we should be using best practices in doing so 
.
Yes that sticky footer by Ryan Fait has never worked properly and failed in common browsers since the day it was posted. In these days of responsive design that method is a virtually useless technique and should be avoided.
I realise the article wasnât about the footer as such but itâs worth mentioning all the same.
Youâre right, the article was about techniques available from within Compass, rather than writing something yourself.
I canât see Compass being used here.
on best practice -
âin HTML/CSS development the term âbest practicesâ is often used when looking for over zealous absolute truthsâ
Nicolas Gallagher
I used the compass extension literally just for the modular-scale. I think the Gumby framework uses the same thing (or did). In the end it wasnât worth the bloat/dependancy and I ended up writing my own mixins to replace it.
People who use sticky footers should take the time to check their design on high-res screens in portrait mode.
It might even be a good idea to check it on a 4K-screen in portrait, they will be common faster that you think.
I have a couple of 27" QHD-screens in portrait, which is perfect because you donât have to scroll so much unless the page is huge (or the designer is an idiot)
âŚand i frequently fail to notice that some sites has any footer at all, because its ten million miles away from the rest of the content.
Especially on designs where thereâs just some short sales-waffle on the top, and the actual call for action is in the footer, at the bottom of the ocean.
I bet lots of people just moves on from pages like that, thinking âOK they like cupcakes⌠so what?â never noticing that they also sell them.
So perhaps use sticky footers, but set a limit for how far away from the content is should be allowed to be?
âno hacksâ
(Except for any that might be included in html5 shiv and jquery)
Mmmm, thatâs some delicious Stone Soup.
Those arenât hacks? Including Javascript files are hacks? Seriously? You must be joking.
Not to mention they are IE8 only so you could actually remove that if you donât want it.
Apologies to derail this thread but I just needed to answer this question assuming it was related to the demo that Ryan posted (which is actually my codepen demo). There is no jquery on the demo and there are no hacks. The html5 shiv is for the html5 elements that are not supported in IE8. You donât need to use the html5 elements if you donât want and use html4 element instead and the demo will still work back to IE8.
As the inventor (I hate that term) of the original sticky footer way back in 2002 I believe I talk from experience on the matter.
Yes thatâs a good point and setting a media query based on height can solve this problem and is a simple matter of removing the height from the display:table in my example unlike all the other pusher methods.
Maybe these posts should be removed to another thread so as not to derail the article?
Ok then, I would like to reword it to say that broken examples shouldnât be used .
This article covers only the mixins/functions that Compass offers. That means, the sticky footer is based on Compass implementation (not mine). The demo you presented is excellent, but it doesnât use Compass which is presented in this article.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.
