Josh Vogt

Element Filtering Using CSS3 Negation Pseudo-Class

I was going to title this post, “I was bored at work today so here’s some CSS” but that didn’t seem very descriptive. And for those that don’t want to scroll down to find the link to the demo: Here you go.

Essentially, I was trying to filter content based on data attribute and the negation pseudo-class. And it works well using a combination of :not(s) pseudo-class and the general sibling combinator.

a[data-filter="red"]:focus ~ div:not([data-filter="red"]) works by selecting all divs that do not have a data-filter attribute equal to exactly “red”. These divs must also be a sibling of an in focus <a> element that has a data-filter attribute equal to “red”. If these requirements are met then all other divs have their values zeroed out.

Read More

CSS Selectors Level 3 Reference

Just over a month ago the CSS WG Blog announced the recommendation of the Selectors Level 3 spec so I made this page as my personal reference for the spec. The page is a repsonsive/fluid design and uses the isotope.js jQuery plugin for layout and filtering. Each selector includes:

• The short description from W3C spec
• Code with a link to live examples on jsFiddle
• A link to the full description on the W3C site
• Visual reference for each selectors browser support

This is the first time I’ve tried creating a responsive/fluid site using isotope.js. By and large there weren’t too many problems but the layout was a bit janky until a fluid/responsive hack was included in plugin. Before that, the layout would go a bit nuts sometimes when I  re-sized the browser window. If you find any errors, feel free to send them to me on Twitter. You can find me on Twitter @dumaurier.

View the CSS Selectors Reference.

Magento - Creating Custom Tabs with Attribute Data

Magento’s Modern theme has a nice Product Info tab on Product View pages for additional information on the selected product. It’s fairly common to want to add additional custom tabs that display data from custom attributes fields. It took me a while to figure out how to accomplish this so I’m writing it down so I don’t have to waste much time next time I need to do this.

Read More

Create a Horizontal Navigation with HTML5 & CSS3 Flexbox

Creating a horizontal navigation bar using floats isn’t particularly difficult but there’s usually a few hiccups if you want it to be 100% width of the viewport with each link taking an equal amount of the width. The CSS3 Flexbox model makes creating the nav a lot easier and also gives you a lot more flexibility in changing the layout of the navigation bar.

Read More