Sparkbox Foundry – &  

Easily my favorite feature of Sass is the ability to self-reference a selector by using &. My latest Sparkbox Foundry post digs into the different ways I like using this feature, complete with examples.

Sparkbox Foundry – A Bit About SVG  

SVGs are gaining more and more attention and attraction. In my latest post on the Sparkbox Foundry, I try to address some of the basics of working with SVG.

Sparkbox Foundry – Confessions of a Designer Developer  

I wrote my first article for the Sparkbox Foundry. In the article I write about my failures and misconceptions as a self-taught developer, and how I learned from these mistakes. I’ve found stories like these empowering and encouraging. Hopefully my confessions will do the same for others.

Sparkbox Bound

I’m quite excited to announce that I will be joining Sparkbox this July. Additionally, I’m sad to announce that I will no longer be a part of the Web Team at the University of Notre Dame.

Two humbling, amazing, life-changing years

It’s been over two years since I started as a web designer at Notre Dame. I still have moments of disbelief that I even got the job. At the time I interviewed I knew no one at Notre Dame, I had no connections to the South Bend area, and I hadn’t done any recognizable work. Two years later and all that has changed.

I am very pleased with the work I’ve done while at Notre Dame. We built an all-new, ground-breaking homepage for the University in just two months. We saw the necessity of Responsive Web Design and made it a foundation of our approach to website creation. We abandoned the age-old waterfall approach to design and development, and created a process with deliverables that educated our clients and made our team more efficient website makers.

It has been an absolute privilege to work with such a talented team. I leave Notre Dame humbled by the kindness of all these great people I have been honored to work with and know.

Back to Dayton

I’m very impressed with what I have seen come out of Sparkbox the last few years. The role they have taken in educating others on RWD is inspiring. I have known Ben Callahan and the folks at Sparkbox for a few years or so. Before and after starting at Notre Dame, Ben and I would get together for lunch or coffee and chat about our current projects and industry trends. Earlier this year, one of those chats lead to a conversation about working together.

On July 15, I will return to my native Dayton, Ohio to begin work as a web developer at Sparkbox. I’m very excited about this change, to say the least, and I look forward to join this team that is contributing so much to the web community.

Until then, there’s much to be done. Dayton, I’ll see you soon.

CSS Multiple Adjacent Siblings

Ever need to style an element, but only if another sibling element was present?

I hit just that scenario this morning. I’m working on a site that has a landing page for four different sections of the website. For the most part the layout of the landing pages are the same, except one or two that does not contain an area for bugs1. At the large screen views, I want the .bugs container to be the first of three columns, followed by .col1 which usually contains events, and then .col2 which usually contains news.

At the default, small screen view these containers all stack.

Mobile stacked containers

By the time we hit a portrait tablet screen size, .col1 and .col2 are side by side with the .bugs container above them at full width.

Tablet stacked containers with two columns

To achieve this I am simply adding the following to my CSS at this media query

.col1, .col2 { width:50%; }

Please note, I’m not getting into detail on how I have these containers oriented horizontally. The easiest is to add a float parameter to each container. However, I tend to use a display:inline-block approach, which I feel has more versatility.

By the time we are hitting our larger screens and landscape tablet sizes, all three containers are side by side as three columns.

Large screen view with three columns

Currently my CSS looks like this for these three containers:

.bugs { width:20%; }
.col2 { width:40%; }

This works out quite well as a good reorientation of the layout for these containers. As I said though, I have a couple pages that don’t have the .bugs containers and otherwise have the same skeletal markup. In those cases, I want to keep the widths on .col1 and .col2 at 50%. At the same time I don’t want to modify my markup on these pages if I can accomplish this with just CSS, which I can.

This is where CSS’s adjacent sibling selector come in. Essentially, this is a way to style an element, but only if it is immediately after another element. CSS-Tricks has a great rundown explaining the different child and sibling selectors available. A good way to think about the adjacent sibling selector is with an if statement. So, if .element-a is followed by .element-b then style .element-b like this.

In the situation I’m working with here is how I approached styling .col1 and .col2 if the .bugs container was present:

.bugs { width:20%; }
.bugs + .col1,
.bugs + .col1 + .col2 { width:40%; }

This is in my media query targeting screens larger than 1000px wide. This changes the widths for .col1 and .col2, but only if the .bugs container is present and proceeding them. Otherwise .col1 and .col2 retain the width:50%; from the previous media query. Also, notice in line three that we have multiple adjacent sibling selectors for one element. Without this then .col2 would still have the width:50%. Nor could we use .bugs + .col2 because those elements have .col1 between them in the markup, which negates the adjacent sibling selector.

I was pleasantly surprised to find that it was possible to have multiple adjacent sibling selectors. What makes it more useful is after a quick jump in BrowserStack, I found that the multiple adjacent sibling selectors work as far back as IE7.

  1. That is miscellaneous links and call to action buttons.