Icons

An icon object is designed for the Just a Few Icons project. It forces a width and height to the object and gives the <svg> a value of currentColor so that the fill of the icon can be changed with a color utility class.

Responsive Table UI

This is a responsive table implementation. This is based off of this demo and makes heavy use of the data-heading attribute on the <td> elements.

<td class="table__content" data-heading="Name">Gizmo</td>

UI List

Typically, in a project, you may want to reset a list like this for navigation or displayed options but you might not want to override the default <ul> element. This pattern gives you that flexibility.

Containers

This is a standard page wrapper object. It providers a max-width to wrap content in with the option of centering it within the parent container. This object is based on this classic pattern.

Flex Object

Flexbox is a really powerful layout primitive and this object helps build a parent / child system for applying flexbox to your layout. It exposes a o-Flex parent with a lot of modifiers and a o-Flex__child (recommend applying o-Column with the child element).

Grid

This is a simple 12 column grid system that has responsive suffixes. .o-Column--[1-12]/12[@sm, @md, @lg]. These are floated columns, so they need to be cleared unless they have a flex parent and occupy a max-width: 100% so they can't exceed the width of the parent.

Intrinsic Object

The purpose of the intrinsic object is that inner media maintains its proportions when resized. Based off of 'Intrinsic Placeholders with the Picture Element' from Dave Rupert.

Media Block

The media object is a really great foundational part of CSS from Nicole Sullivan.

A couple of caveats

1. The media object doesn't wrap content onto two lines
2. This implementation uses flexbox

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Flag

The flag object is a UI pattern that's very similar to the media object. There are two key differences, for one it doesn't assume left aligned figure. And then the flag object is flexible in regards to vertical alignment. Like the above media object implementation, it doesn't wrap content onto two lines.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et porro provident ipsa nam, quod molestias doloribus dolore sequi quaerat, facilis repellendus est corporis dolorum sed. Culpa ipsam pariatur cumque maxime!

Top

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et porro provident ipsa nam, quod molestias doloribus dolore sequi quaerat, facilis repellendus est corporis dolorum sed. Culpa ipsam pariatur cumque maxime!

Bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et porro provident ipsa nam, quod molestias doloribus dolore sequi quaerat, facilis repellendus est corporis dolorum sed. Culpa ipsam pariatur cumque maxime!

Reversed

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et porro provident ipsa nam, quod molestias doloribus dolore sequi quaerat, facilis repellendus est corporis dolorum sed.