Objects

Objects are design patterns that have no inherit visual design, like a grid or a media / flag object.


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.

Small Icon
Medium Icon
Large Icon
Small Icon
Medium Icon
Large Icon

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>
NameTypeGrade
GizmoRobotA+
Sherlock HolmesHumanB-
MerlinWizardC
Richard NixonCyborgB-

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.

  • One
  • Two
  • Three
  • Four
  • Five
  • One
  • Two
  • Three
  • Four
  • Five
  • One
  • Two
  • Three
  • Four
  • Five

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.

Xtra Small = 28.125rem / 450px
Small = 37.5rem / 600px
Medium = 46.875rem / 750px
Large = 56.25rem / 900px
Full = 75rem / 1200px

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).

One Flex Child
Second Flex Child
Space Around
One Flex Child
Second Flex Child
Space Between
One Flex Child
Second Flex Child
Centered
One Flex Child
Second Flex Child
Centered Horizontally
One Flex Child
Second Flex Child
Third Flex Child

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.

2/12
width = 16.667%
10/12
width = 83.333%
3/12
width = 25% at base, 33.333% at medium breakpoint
3/12
width = 25% at base, 33.333% at medium breakpoint
6/12
width = 50% at base, 33.333% at medium breakpoint

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

Impossible Triangle

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.

Impossible Triangle

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.

Impossible Triangle

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!

Impossible Triangle
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!

Impossible Triangle
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!

Impossible Triangle
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.


Install Obsidian.css

yarn add obsidian.css