Created
January 18, 2012 09:45
-
-
Save Victa/1632210 to your computer and use it in GitHub Desktop.
OOCSS media object - SCSS mixin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin media-object($margin:10px, $position: left, $formating-context: 'overflow', $media: '.media', $block: '.block') { | |
@include pie-clearfix; // or extend a .clearfix class | |
#{unquote($block)} { | |
@if $formating-context == 'overflow' { | |
overflow:hidden; | |
} @else { | |
display:table-cell; | |
width:10000px; | |
*width:auto; | |
*zoom:1; | |
} | |
} | |
#{unquote($media)} { | |
float:$position; | |
img{display:block;} | |
@if $margin > 0 { | |
margin-#{opposite-position($position)}:$margin; | |
} | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// SCSS | |
.box{ | |
@include media-object(10px, left, 'table-cell'); | |
} | |
// HTML | |
<div class="box"> | |
<img class="media" src="http://lorempixel.com/60/60/people" /> | |
<div class="block"> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque ut vulputate quam. Sed lobortis tempus dui, quis dapibus purus consequat eu. Morbi ut egestas mi. | |
<div class="box"> | |
<img class="media" src="http://lorempixel.com/30/30/people" /> | |
<div class="block"> | |
Lorem ipsum dolor sit amet, consectetur adipiscing elit | |
</div> | |
</div> | |
<div class="box"> | |
<img class="media" src="http://lorempixel.com/30/30/people" /> | |
<div class="block"> | |
Pellentesque ut vulputate quam. Sed lobortis tempus dui, quis dapibus purus consequat | |
</div> | |
</div> | |
</div> | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment