-
Notifications
You must be signed in to change notification settings - Fork 10
Expand file tree
/
Copy pathindex.html
More file actions
23 lines (22 loc) · 13.5 KB
/
index.html
File metadata and controls
23 lines (22 loc) · 13.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html> <html lang=en> <head> <meta charset=utf-8> <meta content='IE=edge,chrome=1' http-equiv=X-UA-Compatible> <meta content='width=device-width, initial-scale=1.0' name=viewport> <title>Structures / MVCSS</title> <meta content='MVCSS - A Sass-based CSS architecture for creating predictable and maintainable application style.' name=description> <link href="../assets/stylesheets/application.css" rel=stylesheet /> <script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-32794837-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script> </head> <body class='structures structures_index' data-id=14> <a class=toggle href="#"><div class=toggle-icn> <div class=toggle-icn-stack> <b class=srt>Toggle</b> </div> </div> </a> <aside class=sidebar> <header class=header> <div class='bucket bucket--flag'> <div class=bucket-media> <img alt=MVCSS class=header-logo width=100 height=110 src="../assets/images/logo.svg"/> </div> <div class=bucket-content> <p class='h1 header-title'><a href="../">MVCSS</a></p> <p class=header-version>Version 4.1.1</p> </div> </div> </header> <a class=sidebar-btn href="http://github.com/mvcss/mvcss">View on GitHub</a> <nav class=sidebar-nav> <a class=sidebar-link href="../">Overview</a> <a class=sidebar-link href="../styleguide/">Styleguide</a> <div class=sidebar-nav-sub> <a class="sidebar-link sidebar-link--sub" href="../styleguide/basics/">Basics</a> <a class="sidebar-link sidebar-link--sub" href="../styleguide/numbers-game/">The Numbers Game</a> <a class="sidebar-link sidebar-link--sub" href="../styleguide/comments/">Comments</a> <a class="sidebar-link sidebar-link--sub" href="../styleguide/naming/">Naming Conventions</a> </div> <a class=sidebar-link href="../manifest/">Manifest</a> <a class=sidebar-link href="../foundation/">Foundation</a> <div class=sidebar-nav-sub> <a class="sidebar-link sidebar-link--sub" href="../foundation/reset/">Reset</a> <a class="sidebar-link sidebar-link--sub" href="../foundation/helpers/">Helpers</a> <a class="sidebar-link sidebar-link--sub" href="../foundation/config/">Config</a> <a class="sidebar-link sidebar-link--sub" href="../foundation/base/">Base</a> <a class="sidebar-link sidebar-link--sub" href="../foundation/tools/">Tools</a> </div> <a class=sidebar-link href="../components/">Components</a> <a class="sidebar-link is-active" href="./">Structures</a> <a class=sidebar-link href="../vendor/">Vendor</a> <div class=sidebar-nav-secondary> <h3 class='sidebar-label mtl'>Meta</h3> <a class=sidebar-link href="../about/">About</a> <a class=sidebar-link href="../resources/">Resources</a> </div> </nav> </aside> <div class=row> <div class='cell well'> <main class=content> <article> <h1>Structures</h1> <p>Structures are a project’s modules and user interface elements that are too specialized for use across multiple sites. In some cases, they might assume a certain context or content type, and in other cases, they might include thematic styles or responsive layout.</p> <p>When explaining what characterizes a Component versus a Structure, we outlined a few considerations that help us determine between the two:</p> <ul> <li>Size of scope</li> <li>Dependencies on other modules</li> <li>Portability between projects, or lack thereof</li> </ul> <h2>Size of Scope</h2> <p>When a module affects different aspects of an element or arrangement of elements simultaneously (i.e., it has a wide <em>scope</em>), that’s a very strong indicator that you’re dealing with a Structure.</p> <p>Let’s say, for example, you’re designing a fairly common site header: logo on the left, plus some horizontal navigation on the right. You could realistically build this pattern using a combination of Helpers, Components, and Tools.</p> <pre class="highlight html"><code><span class="nt"><header</span> <span class="na">class=</span><span class="s">"group"</span><span class="nt">></span>
 <span class="nt"><img</span> <span class="na">class=</span><span class="s">"fl"</span> <span class="na">src=</span><span class="s">"logo.svg"</span> <span class="na">alt=</span><span class="s">"Website"</span><span class="nt">></span>
 <span class="nt"><nav</span> <span class="na">class=</span><span class="s">"fr"</span><span class="nt">></span>
 <span class="nt"><ul</span> <span class="na">class=</span><span class="s">"list list--inline"</span><span class="nt">></span>
 <span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-item"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"/"</span><span class="nt">></span>Home<span class="nt"></a></li></span>
 <span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-item"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"/blog"</span><span class="nt">></span>Blog<span class="nt"></a></li></span>
 <span class="nt"><li</span> <span class="na">class=</span><span class="s">"list-item"</span><span class="nt">><a</span> <span class="na">href=</span><span class="s">"/contact"</span><span class="nt">></span>Contact<span class="nt"></a></li></span>
 <span class="nt"></ul></span>
 <span class="nt"></nav></span>
<span class="nt"></header></span>
</code></pre> <p>But what happens when we try to make our site responsive? On small-screen devices, we want our navigation to also:</p> <ul> <li>Fill the viewport width</li> <li>Stack links atop one another</li> <li>Apply an alternating background color to each list item</li> </ul> <p>See the problem? Our module definitely isn’t <code>list--inline</code> anymore. It now needs its own aesthetics and responsive behavior—both of which are tailored to their surrounding design. Although we might use this pattern in multiple places on the site, its broad scope makes copying it across different designs unlikely. In this case, our best bet is to create a new Structure, and define our new themed, responsive list module inside.</p> <h2>Dependencies</h2> <p>Unlike Components, Structures can depend on, or even extend, pre-existing Components. This is useful when you want to add theme or behavior to a Component, but keep any unique changes contained within their own module.</p> <p>In MVCSS, we use our <code>g</code> (grid) Component primarily for page layout. We try to keep it simple and assume as little as possible, but there are cases where we want to include similar functionality inside of a more specific module. Float-based grids don’t always behave predictably when their items have variable a height, so we’ve defined a <code>collection</code> Structure to add contextual clearfixing.</p> <pre class="highlight sass"><code><span class="nc">.collection</span>

<span class="c1">// -------------------------------------
// Modifiers
// -------------------------------------
</span>
<span class="nc">.collection--1of3</span>

 <span class="nc">.collection-item</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">3n</span> <span class="o">+</span> <span class="nt">1</span><span class="o">)</span>
 <span class="nl">clear</span><span class="p">:</span> <span class="nb">left</span>

<span class="c1">// -------------------------------------
// Scaffolding
// -------------------------------------
</span>
<span class="c1">// ----- Item ----- //
</span>
<span class="nc">.collection-item</span>
 <span class="nl">margin-bottom</span><span class="p">:</span> <span class="nv">$b-space-l</span>
</code></pre> <p>Using both the <code>g</code> (grid) Component and the <code>collection</code> Structure, we can apply both modules’ classes directly in the markup.</p> <p><strong>Note:</strong> applying multiple modifiers to <code>grid</code> and <code>grid-box</code> can make markup difficult to read quickly, so we’ve shortened the classes to <code>g</code> and <code>g-b</code>.</p> <pre class="highlight html"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"g collection collection--1of3"</span><span class="nt">></span>
 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"g-b g-b--1of3 collection-item"</span><span class="nt">></span>
 <span class="c"><!-- Content --></span>
 <span class="nt"></div></span>
 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"g-b g-b--1of3 collection-item"</span><span class="nt">></span>
 <span class="c"><!-- Content --></span>
 <span class="nt"></div></span>
 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"g-b g-b--1of3 collection-item"</span><span class="nt">></span>
 <span class="c"><!-- Content --></span>
 <span class="nt"></div></span>
 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"g-b g-b--1of3 collection-item"</span><span class="nt">></span>
 <span class="c"><!-- Content --></span>
 <span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre> <p>But that’s a lot of classes to keep track of! Luckily, Sass can help us simplify our markup thanks to its <code>@extend</code> directive.</p> <pre class="highlight sass"><code><span class="nc">.collection</span>
 <span class="k">@extend</span> <span class="nc">.g</span>

<span class="c1">// -------------------------------------
// Modifiers
// -------------------------------------
</span>
<span class="nc">.collection--1of3</span>
 <span class="k">@extend</span> <span class="nc">.g-b--1of3</span>

 <span class="nc">.collection-item</span><span class="nd">:nth-child</span><span class="o">(</span><span class="nt">3n</span> <span class="o">+</span> <span class="nt">1</span><span class="o">)</span>
 <span class="nl">clear</span><span class="p">:</span> <span class="nb">left</span>

<span class="c1">// -------------------------------------
// Scaffolding
// -------------------------------------
</span>
<span class="c1">// ----- Item ----- //
</span>
<span class="nc">.collection-item</span>
 <span class="k">@extend</span> <span class="nc">.g-b</span>
 <span class="nl">margin-bottom</span><span class="p">:</span> <span class="nv">$b-space-l</span>
</code></pre> <p>And now we apply only a <em>single set</em> of classes in the markup.</p> <pre class="highlight html"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"collection collection--1of3"</span><span class="nt">></span>
 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"collection-item"</span><span class="nt">></span>
 <span class="c"><!-- Content --></span>
 <span class="nt"></div></span>
 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"collection-item"</span><span class="nt">></span>
 <span class="c"><!-- Content --></span>
 <span class="nt"></div></span>
 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"collection-item"</span><span class="nt">></span>
 <span class="c"><!-- Content --></span>
 <span class="nt"></div></span>
 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"collection-item"</span><span class="nt">></span>
 <span class="c"><!-- Content --></span>
 <span class="nt"></div></span>
<span class="nt"></div></span>
</code></pre> <h2>Portability</h2> <p>In the end, limiting scope and minimizing dependencies both affect <em>portability</em>, which is usually our biggest concern when classifying modules. If you can easily tweak a few lines of CSS inside a module and use it between projects, that means it’s reasonably portable, and you have solid grounds for classifying it as a Component. On the other hand, if try to port a module and find yourself rewriting a significant amount of code, then the module is likely better classified as a Structure.</p> </article> <ul class=pager> <li class=pager-item> <a href="../components/">← Previous page </a> </li> <li class=pager-item> <a href="../vendor/">Next page → </a> </li> </ul> </main> </div> </div> <script>
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.type = 'text/javascript';
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4fe1bcaa613f5d1bfe000020');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="../assets/javascripts/application.js"></script> </body> </html>