-
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) · 7.32 KB
/
index.html
File metadata and controls
23 lines (22 loc) · 7.32 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>Foundation - Tools / 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='foundation foundation_tools foundation_tools_index' data-id=12> <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</a> <div class='is-active sidebar-nav-sub'> <a class="sidebar-link sidebar-link--sub" href="../reset/">Reset</a> <a class="sidebar-link sidebar-link--sub" href="../helpers/">Helpers</a> <a class="sidebar-link sidebar-link--sub" href="../config/">Config</a> <a class="sidebar-link sidebar-link--sub" href="../base/">Base</a> <a class="sidebar-link sidebar-link--sub is-active" href="./">Tools</a> </div> <a class=sidebar-link href="../../components/">Components</a> <a class=sidebar-link href="../../structures/">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>Foundation - Tools</h1> <p>Tools are presentational utility classes for usage directly in the markup itself. They’re helpful when you need a specific style in a unique context, but can’t justify creating (and naming) a new module or modifier to achieve the desired effect.</p> <p>For example, the paragraph element inside of the following <code>card</code> Component needs its <code>margin-bottom</code> made flush, so we can easily apply a Tool class of <code>mbf</code>.</p> <pre class="highlight html"><code><span class="nt"><div</span> <span class="na">class=</span><span class="s">"card"</span><span class="nt">></span>
 <span class="nt"><p</span> <span class="na">class=</span><span class="s">"mbf"</span><span class="nt">></span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam non dolor eligendi placeat.<span class="nt"></p></span>
<span class="nt"></div></span>
</code></pre> <p>Using a Tool in this situation helps us avoid declaring a <code>card</code> or <code>card</code> modifier that assumes too much about its use case, while also helping to keep CSS specificity flat and managable.</p> <h2>Single Responsibility</h2> <p>Tools are as limited in responsibility as possible, allowing you to mix and match various classes to quickly produce many different styles. Every Tool does one thing and one thing well, ensuring that the elements they affect stay both predictable and extensible.</p> <h2>Going Too Far</h2> <p>If you find yourself using multiple Tools to achieve a reusable group of styles, it may be a sign that you should define those properties in their own module or modifier.</p> <pre class="highlight html"><code><span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn pbm pll prl ptm tsl"</span> <span class="na">href=</span><span class="s">"v3.zip"</span> <span class="nt">></span>Download v3.0.0<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn pbm pll prl ptm tsl"</span> <span class="na">href=</span><span class="s">"v2.zip"</span> <span class="nt">></span>Download v2.4.1<span class="nt"></a></span>
</code></pre> <p>In the example above, we’re trying to create a large button by using only Tools. While our approach achieves the intended effect, we’re much better off defining those common styles in a <code>.btn--l</code> class, and then applying it in the markup.</p> <pre class="highlight sass"><code><span class="nc">.btn--l</span>
 <span class="nl">font-size</span><span class="p">:</span> <span class="nv">$b-fontSize-l</span>
 <span class="nl">padding</span><span class="p">:</span> <span class="nv">$b-space</span> <span class="nv">$b-space-l</span>
</code></pre> <pre class="highlight html"><code><span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn--l"</span> <span class="na">href=</span><span class="s">"v3.zip"</span> <span class="nt">></span>Download v3.0.0<span class="nt"></a></span>
<span class="nt"><a</span> <span class="na">class=</span><span class="s">"btn btn--l"</span> <span class="na">href=</span><span class="s">"v2.zip"</span> <span class="nt">></span>Download v2.4.1<span class="nt"></a></span>
</code></pre> <p>This second approach also gives us a styling hook for any future changes to <code>btn--l</code>. Tools provide a powerful set of classes for fine-tuning unique contextual styles, but they aren’t a replacement for modular CSS practices.</p> </article> <ul class=pager> <li class=pager-item> <a href="../base/">← Previous page </a> </li> <li class=pager-item> <a href="../../components/">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>