Skip to content

Instantly share code, notes, and snippets.

@byrichardpowell
Created August 25, 2012 21:03
Show Gist options
  • Save byrichardpowell/3470972 to your computer and use it in GitHub Desktop.
Save byrichardpowell/3470972 to your computer and use it in GitHub Desktop.
Use a OOCSS approach
// INLINE LIST
// An inline list is an object at its most basic level, e.g
// A list where each item is displayed alongside each other
// The .list-inline class styles ONLY the style needed for this type of list
.list-inline { margin:0 0 @line 0; padding:0; display:inline-block;}
.list-inline {
> * { display:inline-block; margin:0; }
li { list-style-type:none;}
dt { padding:0; font-weight:bold; }
dd { padding:0 @grid*2 0 0; }
}
// TRAIL
// Here we are extending the inline-list object
// The indentation and the double dash indicate the extension
// list-inline is the object we are extending, trail is the extension
.list-inline--trail { margin:0; }
.list-inline--trail {
li { padding:0 12px 0 0; .font-size(1.4); line-height:1; }
a,
strong { display:inline-block; color:#a2a2a2; }
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment