Chip Cullen

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.

Keep reading Two level breadcrumbs with CSS :only-child

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.

Keep reading How to structure your typography in Sass

Useful SASS mixin - "prop-query"

Just wanted to share a little mixin that I came up with that’s pretty darned useful. I call it “prop-query”: @mixinprop-query($min-size, $property, $value) { @media screen and (min-width: $min-size) { #{$property}: $value; } } It’s a pretty simple idea - it lets you specify a one-off rule that you want to change on a per-media query basis.…

Keep reading Useful SASS mixin - "prop-query"