- </script> </head> <body class='components components_index'> <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.0.0</p> </div> </div> </header> <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 is-active" href="./">Components</a> <a class=sidebar-link href="../structures/">Structures</a> <a class=sidebar-link href="../vendor/">Vendor</a> <a class=sidebar-link href="../usage/">Usage</a> <a class=sidebar-link href="../about/">About</a> <a class=sidebar-link href="../inspiration/">Inspiration</a> </nav> </aside> <div class=row> <div class='cell well'> <main class=content> <article> <h1>Components</h1> <p>The Components folder is where we start building the recognizable pieces of a user interface. These are abstract, reasonably portable modules that can be swapped in and out of different projects with relative ease.</p> <p>Some Components, like <code>grid</code> and <code>card</code>, are used for layout and containers, and can encompass many other modules.</p> <pre class="highlight html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"grid"</span><span class="nt">></span>
 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"grid-box grid-box--1of2"</span><span class="nt">></span>
 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
 <span class="c"><!-- Content --></span>
 <span class="nt"></div></span>
 <span class="nt"></div></span>
 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"grid-box grid-box--1of2"</span><span class="nt">></span>
 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
 <span class="c"><!-- Content --></span>
 <span class="nt"></div></span>
 <span class="nt"></div></span>
<span class="nt"></div></span></pre> <p>Other Components, like <code>thumb</code>, affect only a single element, and can resemble Tools at first glance. In these situations, both the Component and Tool have a single responsibility. The <em>Component</em>, however, may be declared alongside its modifier classes, while the Tool applies more definitive styles.</p> <pre class="highlight html"><span class="nt"><div</span> <span class="na">class=</span><span class="s">"bucket"</span><span class="nt">></span>
 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"bucket-media"</span><span class="nt">></span>
 <span class="nt"><img</span> <span class="na">class=</span><span class="s">"thumb thumb--m"</span> <span class="na">src=</span><span class="s">"avatar-nick.jpg"</span> <span class="na">alt=</span><span class="s">"Nick Walsh"</span><span class="nt">></span>
 <span class="nt"></div></span>
 <span class="nt"><div</span> <span class="na">class=</span><span class="s">"bucket-content"</span><span class="nt">></span>
 <span class="nt"><p></span>Nick Walsh<span class="nt"></p></span>
 <span class="nt"></div></span>
<span class="nt"></div></span></pre> <h2>Characteristics</h2> <p>When determing whether a module is a Component or Structure, we find it helpful to ask ourselves the following questions:</p> <ul> <li>Does this module have a single responsibility?</li> <li>Does this module depend on or extend other Components?</li> <li>Is this module abstract enough to use in other projects without making significant changes?</li> </ul> <p>If you answer “no” to any of these questions, the module in question is more than likely a Structure.</p> </article> <ul class=pager> <li class=pager-item> <a href="../foundation/tools/">← Previous page </a> </li> <li class=pager-item> <a href="../structures/">Next page → </a> </li> </ul> </main> </div> </div> <script>
0 commit comments