-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathobjects.media.html
22 lines (20 loc) · 7.44 KB
/
objects.media.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css"><link href="http://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet" type="text/css"><link href="http://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet" type="text/css"><title>inuit kitchen sink | _objects.media.scss</title><meta name="description" content="inuit kitchen sink lists you all modules of inuitcss and helps you getting started with the framework."><meta name="viewport" content="width=device-width,minimum-scale=1"><link rel="stylesheet" href="build/assets/css/style.css"><link rel="shortcut icon" href="src/assets/img/favicon.png" type="image/png"></head><body><header class="[ page-head ] [ pv- mb ]"><div class="[ page-wrap ] [ clearfix ]"><h6 class="[ float--left ] [ mb0 ]"><a class="site-logo" href="index.html">inuit kitchen sink</a></h6><a class="[ site-nav-trigger ] [ float--right ]" href="#site-nav"></a></div></header><div class="page-wrap"><div class="[ layout layout--rev ]"><div class="[ layout__item 8/12 portable-1/1 ] [ mb++ ]"><h1 class="mb0">_objects.media.scss</h1><div class="mb"><a class="zeta" href="https://github.com/inuitcss/objects.media/blob/master/_objects.media.scss">View source</a><br><a class="zeta" href="media.html">Demo</a></div><p>If you want an image with content right next to it, <code>.media</code> is what you're looking for.</p><h3 id="markup">Markup</h3><p>The basic markup will always be as follows:</p><pre><code class="language-html"><div class="media">
<img class="media__img" src="some-image.jpg">
<p class="media__body">Lorem ipsum dolor sit amet.</p>
</div></code></pre><p><code>.media__body</code> can be pretty much everything. You can even nest media objects into each other:</p><pre><code class="language-html">// Outer media object
<div class="media">
<img class="media__img" src="some-image.jpg">
<div class="media__body">
<p>Lorem ipsum dolor sit amet.</p>
// Inner media object
<div class="media">
<img class="media__img" src="another-image.jpg">
<p class="media__body">Lorem ipsum dolor sit.</p>
</div>
</div>
</div></code></pre><h3 id="settings">Settings</h3><p>You can alter the gap between <code>.media__img</code> and <code>.media__body</code> with the <code>$inuit-media-gutter</code> variable:</p><pre><code class="language-scss">$inuit-media-gutter<span class="value">: $inuit-base-spacing-unit*<span class="number">2</span>;</span></code></pre><h3 id="modifiers">Modifiers</h3><p>The media object provides the following modifiers:</p><ul><li><code>.media--tiny</code></li><li><code>.media--small</code></li><li><code>.media--large</code></li><li><code>.media--huge</code></li><li><code>.media--rev</code></li><li><code>.media--flush</code></li><li><code>.media--responsive</code></li></ul><p><code>.media--tiny</code>, <code>.media--small</code>, <code>.media--large</code>, <code>.media--huge</code> all vary the spacing between <code>.media__img</code> and <code>.media__body</code>. Each one has its own dedicated variable to control that spacing:</p><pre><code class="language-scss">$inuit-media-gutter--tiny<span class="value">: quarter($inuit-media-gutter) !default;</span>
$inuit-media-gutter--<span class="tag">small</span><span class="value">: halve($inuit-media-gutter) !default;</span>
$inuit-media-gutter--large<span class="value">: double($inuit-media-gutter) !default;</span>
$inuit-media-gutter--huge<span class="value">: quadruple($inuit-media-gutter) !default;</span></code></pre><p><code>.media--flush</code> will eliminate this spacing completely.</p><p>If you want the image to appear at the right side rather than on the left side, you don't need to touch the markup. Just assign the <code>.media--rev</code> modifier to <code>.media</code>.</p><p>If your project is responsive-based, you will likely run into the situation, where there isn't any horizontal space for <code>.media__img</code> and <code>.media__body</code> together anymore. You can assign the <code>.media--responsive</code> modifier to let the <code>.media__body</code> collapse beneath the image. You can also control, <strong>when</strong> it should collapse via:</p><pre><code class="language-scss">$inuit-media-<span class="value">collapse</span>-at<span class="value">: <span class="number">720</span>px !default;</span></code></pre><p>Of course you can combine several modifiers like:</p><pre><code class="language-html"><div class="media media--large media--rev media--responsive">
...
</div></code></pre><h3 id="-demo-media-html-"><a href="media.html">Demo</a></h3><ul class="[ tabs ] [ ui-tabs ] [ mt+ ]"><li class="tabs__item"><a class="tabs__link" href="base.paragraphs.html" title="base.paragraphs">prev</a></li><li class="tabs__item"><a class="tabs__link" href="objects.flag.html" title="objects.flag">next</a></li></ul></div><div class="[ layout__item 4/12 portable-1/1 ]"><nav role="navigation"><ul id="site-nav" class="[ site-nav ] [ list-bare ] [ portable-p- ]"><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">settings</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="settings.default.html">default</a></li><li><a href="settings.responsive.html">responsive</a></li></ul></li><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">tools</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="tools.functions.html">functions</a></li><li><a href="tools.mixins.html">mixins</a></li><li><a href="tools.responsive.html">responsive</a></li></ul></li><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">base</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="base.headings.html">headings</a></li><li><a href="base.paragraphs.html">paragraphs</a></li></ul></li><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">objects</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="objects.media.html">media</a></li><li><a href="objects.flag.html">flag</a></li><li><a href="objects.block.html">block</a></li><li><a href="objects.pack.html">pack</a></li><li><a href="objects.box.html">box</a></li><li><a href="objects.list-bare.html">list-bare</a></li><li><a href="objects.list-inline.html">list-inline</a></li><li><a href="objects.list-block.html">list-block</a></li><li><a href="objects.list-ui.html">list-ui</a></li><li><a href="objects.tabs.html">tabs</a></li><li><a href="objects.buttons.html">buttons</a></li><li><a href="objects.tables.html">tables</a></li><li><a href="objects.layout.html">layout</a></li></ul></li><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">trumps</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="trumps.headings.html">headings</a></li><li><a href="trumps.spacing.html">spacing</a></li><li><a href="trumps.spacing-responsive.html">spacing-responsive</a></li><li><a href="trumps.widths.html">widths</a></li><li><a href="trumps.widths-responsive.html">widths-responsive</a></li><li><a href="trumps.clearfix.html">clearfix</a></li></ul></li></ul></nav></div></div></div><footer class="[ page-foot ] [ pv+ ]"><ul class="[ list-inline ] [ page-wrap ]"><li><a href="https://github.com/csshugs/inuit-kitchen-sink">Contribute on GitHub</a></li></ul></footer></body></html>