Josh Vogt

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.

I used the :focus pseudo-selector instead of :target because the buttons are being used to navigate to another section of the page (or another page for that matter) and if you're just using an anchor to trigger a state change then I don't really want to pollute the users history with a bunch of fragment identifiers that are essentially linking to the same page.

If you want user to be able to have an interaction with the filtered elements beyond just clicking a link you will need to the use the :target pseudo-class. You can see the same example using :target here: http://jsfiddle.net/joshvogt/AHcjs/. On this one, I've added add a :hover state that only applies to filtered elements.

One thing I couldn't figure out: if you wrap the <a> elements in another element the selector breaks and I couldn't figure out one that would work. Bonus points to anyone that can figure that out (Sorry, I don't actually have any bonus points to hand out).

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.

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.

Create a Custom Attribute

In the admin section of the site, click on Catalog>Attributes>Manage Attributes and create a new attribute. Due to my own laziness and lack of creativity I'll call it "Test". Assign the new attribute to default Attribute Set and populate with some dummy text.

Create the New Tab

To create a new tab open the catalog.xml file located in your theme's layout folder. Find the block with the type "catalog/product_view_tabs".

Copy the section for display the Additional Information tab. ‹action method="addTab" translate="title" module="catalog"›‹alias›additional‹/alias›‹title›Additional Information‹/title›‹block›catalog/product_view_attributes‹/block›‹template›catalog/product/view/attributes.phtml‹/template›‹/action›

Replace the contents of the Alias and Title tags with the name of your new tab.

In the Template tag, change the path of the template to a new template file. In this case change catalog/product/view/attributes.phtml to catalog/product/view/test.phtml.

Save and close catalog.xml.

Create the New Template

In order for Magento to display the contents of your custom Attribute in the your tab you have to create the template referenced in catalog.xml and add the necessary PHP to grab the information from the database.

Using your FTP client, navigate to folder referenced in catalog.xml. The path should be app/design/frontend/your_interface/your_theme/template/catalog/product/view.

In the view folder create a new file that matches the template referenced in catalog.xml. In this case the new file will be called test.phtml.

Open the new template and copy the following PHP code:

‹?php

$_helper = $this->helper('catalog/output');

$_product = $this->getProduct()

?›

‹?php

echo $_helper->productAttribute($_product, $_product->getTest(), 'test'

?›

getTest(), and 'test' are the sections that need to be changed to match the name of new custom Attribute

Change these sections to match the name of whatever custom attribute you created.

If you want to make your life easier when your styling the data with CSS, you should probably consider wrapping the echo statement in html tags.

This post was based on the old flexbox spec. It no longer applies. Ignore it.

This is a better starting point, but don't be lazy like me and be sure to include all the vendor prefixes: http://codepen.io/dumaurier/pen/dBxbm

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.

The HTML is dead simple. Instead of using an unordered list of links it just uses the nav element wrapping a series of links:

‹nav›

‹a href="#"›Home ‹/a›

‹a href="#"›About ‹/a›

‹a href="#"›Contact ‹/a›

‹a href="#"›Rock & Roll ‹/a›

‹a href="#"›Tiger Blood ‹/a›

‹/nav›

CSS for the ‹nav› element:

nav{

display: -webkit-box;

-webkit-box-orient:horizontal;}

CSS for the links:

nav a{

display:block;

padding:10px;

-webkit-box-flex:1;

text-align:center;}

On the ‹nav› element, display:box invokes the flexbox model box-orient:horizontal aligns the links along the horizontal axis. And on the links, specifying display:block and padding:10px changes the links to block-level elements and adds a bit of spacing. Usually at this point you have to manually figure out the width of each link to centre them properly but the box-flex selector always you to pass of the calculation to the browser. Setting it to box-flex:1 on the each ‹a› element makes the links flexible and spreads the available space equally among each link. Now you can just add new links to the ‹nav› element and the browser will automatically adjust the spacing.

If you don't want the nav bar centred you can easily adjust the CSS to pin it to either the left or right side of the page removing the box-flex from the ‹a› tags and adding box-pack:start (to align it left) or box-pack:end (to align it right) to the ‹nav› element.

Keep in mind that flexbox selectors still require browsers prefixes so if you're going to use this make sure you code block includes the prefix for Gecko and Webkit.