‘tutorials’ Archive


Cross Browser font-face Mixin

Cross Browser font-face Mixin

When self hosting your own fonts, we all know that the current "best practice" isn't necessarily in the most stable state. There are all the different font files you must keep up with (.svg, .eot, .ttf, .woff) and the different syntax's you have to get just right. It's not the worst, but if you are Read the full article...


Quick Guide to Using SASS

Quick Guide to Using SASS

I'm sure you've heard all the hype about this LESS and SASS business, and maybe you've even marked it up on your to-do list, but if you're reading this you've probably put it off until now where you face writing a LOT of fairly complicated cross-browser styling to account for different 'themes' in some application which can be very cumbersome Read the full article...


Specificity Point System in CSS

One might think of Specificity in CSS as a tool to better understand what's going on in the cascade. CSS provides a formula for determining a style's specificity. This formula is ultimately the value that's assigned to the style blocks' selector - a tag selector, class selector, ID selector, pseudo selector and so on. Here's how the Read the full article...


Enqueue stylesheets in WordPress the right way

Sometimes when theming out a wordpress site you will encounter situations where you are either forced to use the !important style declaration on an element to override a style that's being applied by a plugin. Using !important does work, however there is a better option, enqueuing your stylesheet in the footer. This ensures your styles Read the full article...


CSS object-fit property

Object-fit CSS property and value explination contain: if you have set an explicit height and width on a replaced element, object-fit:contain; will cause the content (e.g. the image) to be resized so that it is fully displayed with the intrinsic aspect ratio preserved, but still fits inside the dimensions set for the element. fill: causes the element's Read the full article...


Using Media Queries with CSS

Media Features for setting conditions in Media Queries Feature Value Min/Max Description width Length Yes Width of display area heigh Length Yes Height of display area device-width Length Yes Width of rendering area device-height Length Yes Height of rendering area orientation portrait or landscape No Orientation of device aspect-ratio Ratio Yes Ratio of width to Read the full article...