CSS: currentColor

In the absence of widespread support for native CSS variables we can still take advantage of one type of variable – currrentColor. This permits inheritance of the color property to other properties in the element’s rules as well as the child elements. This way we only need to set the color value and it’s updated everywhere it’s used. There’s good support for this and even though the use … Continue reading CSS: currentColor

Faster HTML Markup with Emmet

If you haven’t heard of Emmet it’s a plugin you can use with your favourite text editor or with online coding services like Codepen. Chances are yours supports it. Basically it lets us use abbreviations when writing HTML/CSS and then expands them for us. It’s not a HTML pre-processor like Haml but is easier to learn since, for the most part, it uses CSS syntax. Creating an HTML5 document Once we … Continue reading Faster HTML Markup with Emmet

Beating the bloat – using Bootstrap and Sass

One of the greatest benefits of Sass is its modularity. Imports and mixins let us organise and reuse the declarations we need in a project without unnecessary duplication. This is especially useful when it comes to frameworks like Bootstrap, which, owing to their sprawling capability, are prone to bloat and are often brimming with rules we only use a fraction of. To make it worse we then create another custom … Continue reading Beating the bloat – using Bootstrap and Sass

Sass Loops

As well as introducing variables to our stylesheets Sass also lets us use loops. For example, I want to create rules for 10 classes that set widths for form text inputs and I want the width to increment by 10%. e.g.: .input-10 { width: 10%; } .input-20 { width: 20%; } … .input-100 { width: 100%; } etc. Sure, I could type them out but wouldn’t it be easier to get … Continue reading Sass Loops

Graphic for article on Sass colour functions

Colour accents with Sass

Sass is much more than just adding variables and mixins. Its colour functions gives us powerful ways to do things like set accents for our page design. So, say I’ve got a background colour and I want a lighter variant of the same colour for my content and a slightly darker variant for my heading and body text. With Sass we can darken or lighten colours by specified … Continue reading Colour accents with Sass

More efficient CSS with Sass

CSS pre-processors are an attempt to overcome the inefficiencies of CSS as it currently stands. Pre-processors adopt a  Don’t Repeat Yourself (DRY) methodology which is core to most programming languages so applying programming concepts like variables to CSS makes sense. This is great if, for example, we’re using the same colour value in a few places in our stylesheet and for whatever reason this changes (say a subtle … Continue reading More efficient CSS with Sass