mvcss.github.com/foundation/base/index.html at master · mvcss/mvcss.github.com · GitHub

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 - Base / 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_base foundation_base_index' data-id=11> <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 is-active" href="./">Base</a> <a class="sidebar-link sidebar-link--sub" href="../tools/">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 - Base</h1> <p>Base contains all of the tag-level settings for default HTML elements. These are things like anchors, headings, paragraphs, lists, and everything else that doesn&rsquo;t have a class name attached. Because there are so many possible HTML elements to cover, we typically only style the ones relevant to a project as we need them.</p> <p>We define <code>html</code> and <code>body</code> styles at the top, and then divide the remaining content into Block and Inline sections.</p> <pre class="highlight sass"><code><span class="c1">// *************************************&#x000A;//&#x000A;//   Base&#x000A;//   -&gt; Tag-level settings&#x000A;//&#x000A;// *************************************&#x000A;</span>&#x000A;<span class="nt">html</span>&#x000A;  <span class="nl">background</span><span class="p">:</span> <span class="nv">$c-background</span>&#x000A;  <span class="nl">color</span><span class="p">:</span> <span class="nv">$c-base</span>&#x000A;  <span class="nl">font-family</span><span class="p">:</span> <span class="nv">$b-fontFamily</span>&#x000A;  <span class="nl">font-size</span><span class="p">:</span> <span class="nv">$b-fontSize</span>&#x000A;  <span class="nl">line-height</span><span class="p">:</span> <span class="nv">$b-lineHeight</span>&#x000A;&#x000A;<span class="nt">body</span>&#x000A;  <span class="nl">font-size</span><span class="p">:</span> <span class="m">100%</span>&#x000A;</code></pre> <h2>Block Content</h2> <p>Block content is made up of all the block-level elements needed in an MVCSS project. Typically, this section includes the aforementioned headings, paragraphs, lists, as well as figures, blockquotes, and more.</p> <p>Collapsing margins, while an intentional feature of CSS, only add complexity when authoring style sheets, so we limit vertical margins on block-level elements to a <a href="http://csswizardry.com/2012/06/single-direction-margin-declarations/">single-direction</a>.</p> <pre class="highlight sass"><code><span class="c1">// -------------------------------------&#x000A;//   Block Content&#x000A;// -------------------------------------&#x000A;</span>&#x000A;<span class="nt">ul</span><span class="o">,</span> <span class="nt">p</span>&#x000A;  <span class="nl">margin-bottom</span><span class="p">:</span> <span class="nv">$b-space</span>&#x000A;  <span class="nl">margin-top</span><span class="p">:</span> <span class="m">0</span>&#x000A;&#x000A;<span class="nt">li</span>&#x000A;  <span class="nl">margin-bottom</span><span class="p">:</span> <span class="nv">$b-space-s</span>&#x000A;  <span class="nl">margin-top</span><span class="p">:</span> <span class="m">0</span>&#x000A;&#x000A;<span class="c1">// ----- Headers ----- //&#x000A;</span>&#x000A;<span class="nt">h1</span><span class="o">,</span> <span class="nc">.h1</span><span class="o">,</span>&#x000A;<span class="nt">h2</span><span class="o">,</span> <span class="nc">.h2</span><span class="o">,</span>&#x000A;<span class="nt">h3</span><span class="o">,</span> <span class="nc">.h3</span><span class="o">,</span>&#x000A;<span class="nt">h4</span><span class="o">,</span> <span class="nc">.h4</span>&#x000A;  <span class="nl">font-family</span><span class="p">:</span> <span class="nv">$b-fontFamily-heading</span>&#x000A;  <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span>&#x000A;  <span class="nl">line-height</span><span class="p">:</span> <span class="m">1</span><span class="mi">.2</span>&#x000A;  <span class="nl">margin-bottom</span><span class="p">:</span> <span class="nv">$b-space-xs</span>&#x000A;  <span class="nl">margin-top</span><span class="p">:</span> <span class="m">0</span>&#x000A;</code></pre> <h2>Inline Content</h2> <p>Inline content is made up of&mdash;you guessed it&mdash;inline elements. These include tags like <code>a</code>, <code>strong</code>, <code>em</code>, <code>code</code>, and any others that don&rsquo;t force a line break before and after themselves by default.</p> <pre class="highlight sass"><code><span class="c1">// -------------------------------------&#x000A;//   Inline Content&#x000A;// -------------------------------------&#x000A;</span>&#x000A;<span class="nt">a</span>&#x000A;  <span class="nl">border-bottom</span><span class="p">:</span> <span class="nv">$b-border</span>&#x000A;  <span class="nl">color</span><span class="p">:</span> <span class="nv">$c-highlight</span>&#x000A;  <span class="nl">text-decoration</span><span class="p">:</span> <span class="nb">none</span>&#x000A;&#x000A;  <span class="k">&amp;</span><span class="nd">:hover</span><span class="o">,</span>&#x000A;  <span class="k">&amp;</span><span class="nd">:focus</span>&#x000A;    <span class="nl">border-bottom-color</span><span class="p">:</span> <span class="nv">$c-highlight</span>&#x000A;    <span class="nl">color</span><span class="p">:</span> <span class="nv">$c-subdue</span>&#x000A;</code></pre> </article> <ul class=pager> <li class=pager-item> <a href="../config/">&larr; Previous page </a> </li> <li class=pager-item> <a href="../tools/">Next page &rarr; </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>