Perfect Footers


Styling footers proves to be a bit tricky. On a site where there’s a lot of content, this is not an issue. However, if you want to have the page be full height and scroll when the content overflows, there is some subtlety to styling the footer. It’s pretty easy to accidentally have the footer float in the middle of the page when the content overflows and the page scrolls. It’s also pretty easy to have the content hide underneath the footer. Head past the break for the details.

Read More

SASS Antipattern: The Selector Bomb


SASS is a really powerful tool, which sometimes means that one has to be careful. It can generate all kinds of insane CSS that is hard for debugging and hard for the browser to parse and apply. Now and then, you have to take a step back and ask yourself if you really need to use SASS for the task at hand. I’d like to attempt to coin a new term for an anti-pattern that I, and many others, have stumbled upon.

Read More

Multiple Background Images in CSS


Image showing how the HTML and CSS in this blog post render

Nearly every software developer who works with front-end code has probably used the CSS property background-image. What some might not know is that background-image can take many images and set how those images are positioned. This could be particularly useful if you don’t have full control over the HTML that is being generated for whatever reason. You could also have multiple elements and use an nth-of-type selector to achieve the same effect. Click through for the code and a JSFiddle demo.

Read More

Styling the Dreaded File Input


Styling a file input turns out to be quite difficult since CSS can’t reach into the control to get access to the elements. Head past the break to get the details.

Read More