My SVG workflow, from awkward to simple

Initially I thought it would be quite frustrating to get going with SVG, but after jumping in and seeing where I got it’s quite simple. Much better than exporting 1x and 2x images by far.

Understanding Sass default variables

Sass has a handy feature to create default variables using !default in the same way you would use !important. Why is this handy? Well you can use them to manipulate the default values of a mixin, remove or add certain bits of code based on levels of legacy or experimental support for certain bits of CSS, to name a few.

Using em’s for efficiency

There are a lot of CSS frameworks out there that are great, but their biggest flaw to me is their insistence to override styles and not use a relative measurement like em’s to adjust the styles when needed. I realise a lot of the way frameworks are made are to dummy proof them and to provide as much freedom as possible with their use. I still think there is an extent to which it can be done better.

Create a fluid browser with border-image

I have been curious to try find a solution to having a fluid browser around portfolio images. I have attempted to find a solution which is as simple as I have been able to find. The overall idea uses :before to apply the browser and border-image, this is purely to offset extra space caused by the widths of the border.

Compass mixins you should know about

Compass is a brilliant extension to Sass as we all know. We know the time saving CSS3 related mixins it offers, maybe you don’t know some of the lesser praised mixins/functions that offer a similar convenience. I’m going to run through a few of my favourites that I have come to rely on. Such as clearfix, image-height, image-width and a few text replacement options.

Using scale-color in Sass

I have been recently trying to get a consistent look across my element mixin no matter the colour, without being too inefficient. You could say simply take a base colour, and use darken and lighten on it, to get reasonable variations of the colour, for gradient colour stops. Then throw in some bevels, a border, and you have a nice button.

Create a Sass button/element mixin

This mixin is one I’ve been using for a few months now to create buttons/anything with a particular style. I call it an element mixin, as it’s not tied to anything. It started off as a plain button mixin, though I found sometimes I just want a button reset (some padding, no border, etc) or no hover/active states. This a very customisable mixin with simple parameters.

Sass hints & tips

Sass/Compass are all the rage lately, well, CSS preprocessors in general. I have been planning to share my knowledge for a while and now feels a good time. This could be a biased approach but I can’t really see a downside to using a preprocessor, when we’re in a world where getting things done quickly is key. So I’m not going to put my pros and cons, just some general thoughts, hints, and tips.

Start new designs quicker

It’s my aim to help you be a better designer. I’ve made you a simple Adobe Illustrator template to manage your colour, grid and guides. So you’ll get to executing your ideas around 20 minutes sooner, every time.

Join my monthlyish email list and I’ll send you the template and new tutorials to help you design & code beautiful websites. You can unsubscribe anytime.