How to lint your Sass (scss) in Sublime Text

Linting your Sass is a great way to ensure some degree of code quality. At the very least you will have greater stylistic consistency.

One thing before we get started: be careful not to blindly follow what a linter says, though: treat linter rules as guidelines, not absolutes .

In my text editor of choice, Sublime Text 3, the best way to get linting in any language is currently using the Sublime Linter package. Once that is installed, you can install extension packages for each language you want to lint.

In my case, the main ones are Sass (as .scss), JavaScript and JSON. We’re going to focus on Sass here.

Read MoreLeave a comment

Two level breadcrumbs with CSS :only-child

There was a situation where we had some breadcrumbs being produced by a CMS. The problem was that the breadcrumb appeared on the top-level page as well as it’s children pages. On the top level page it came across very redundant, and this single level breadcrumb would appear right above the page title. However, we wanted the breadcrumb trail to still appear on the second level pages.

Ideally, this kind of situation would be dealt with at the template level, and the markup would simply be absent. In this case, we couldn’t change the template, we could only change the CSS.

The solution was the CSS :only-child pseudo selector.

Read More1 Comment

How to structure your typography in Sass

I’ve always been focused on strong typography when it comes to design. As I’ve evolved into a front end developer, I still focus a lot on the typography of a project. As I’ve written about before, if the design is up to me, I even start with setting the paragraph.

However, what can you do to set yourself up for success when it comes to coding a design and it’s typography? I’ve done this – a lot – and I’ve come to some conclusions.

Read More8 Comments