Posts tagged: “CSS”

Have a design where you want text to get cut off at 2 or 3 lines? You can do it with CSS alone.

Keep reading How to Truncate Type at More Than One Line with Just CSS

How I used vw, vh and ch units to achieve responsive spacing in my new design.

Keep reading Responsive spacing with viewport and ch units

For several years now, I’ve been loving a Sass authoring pattern that looks like this:

.class-name {
  ... &--modifier {
    // styles
  }
}

Which would compile to:

.class-name { ... }
.class-name--modifier { // styles }

This was great! I loved it because:

• It was terse
• It compiled to single class selectors, which kept specificity at bay

Keep reading Leading Ampersands for modifiers in Sass: An anti-pattern

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

I had occasion to finally get to one of my goals from last year - and that was to introduce some testing to my front end development.

My goal was to have a way to have a before/after visual regression test. The open source Wraith project, from the BBC, fits the bill wonderfully.

This post is merely meant to be a step-by-step procedure to get Wraith up and running. I’m not going to provide any context to what each step means.

First off, this post assumes that you’re running Mac OS X, and already have Ruby installed. This post also assumes that you want to use the “history” mode in Wraith - where you are taking two snapshots of the same URL. (The “standard” mode requires two different URLs).

Keep reading Front End Testing with Wraith: A Step by Step Recipe