mvcss.github.com/manifest/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>Manifest / 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='manifest manifest_index' data-id=6> <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 is-active" href="./">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 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>Manifest</h1> <p>Now that we’ve touched on naming and piecemeal ideas, lets put it all together. MVCSS expects the following setup wherever your styles are found:</p> <pre class="highlight plaintext"><code>application.sass&#x000A;foundation/&#x000A;  _reset.sass&#x000A;  _helpers.sass&#x000A;  _config.sass&#x000A;  _base.sass&#x000A;  _tools.sass&#x000A;components/&#x000A;structures/&#x000A;vendor/&#x000A;</code></pre> <p><code>application.sass</code> is used as the manifest and inbox (more on that later). Application as a name is derived from the Rails asset pipeline, and all other files are Sass partials imported in.</p> <p>Post compile, <code>application.css</code> is included on each site page and various settings can be employed for compression.</p> <h2>Imports</h2> <p>Files found in Foundation are imported into the manifest in a particular order, while Components and Structures are typically included alphabetically:</p> <pre class="highlight sass"><code><span class="c1">// *************************************&#x000A;//&#x000A;//   Project Name&#x000A;//   -&gt; Manifest&#x000A;//&#x000A;// *************************************&#x000A;</span>&#x000A;<span class="c1">// -------------------------------------&#x000A;//   Foundation&#x000A;// -------------------------------------&#x000A;</span>&#x000A;<span class="k">@import</span> <span class="s">'foundation/reset'</span>&#x000A;<span class="k">@import</span> <span class="s">'foundation/helpers'</span>&#x000A;<span class="k">@import</span> <span class="s">'foundation/config'</span>&#x000A;<span class="k">@import</span> <span class="s">'foundation/base'</span>&#x000A;&#x000A;<span class="c1">// -------------------------------------&#x000A;//   Components&#x000A;// -------------------------------------&#x000A;</span>&#x000A;<span class="c1">// Component imports&#x000A;</span>&#x000A;<span class="c1">// -------------------------------------&#x000A;//   Structures&#x000A;// -------------------------------------&#x000A;</span>&#x000A;<span class="c1">// Structure imports&#x000A;</span>&#x000A;<span class="c1">// -------------------------------------&#x000A;//   Vendor&#x000A;// -------------------------------------&#x000A;</span>&#x000A;<span class="c1">// Third-party style imports, if needed&#x000A;</span>&#x000A;<span class="c1">// -------------------------------------&#x000A;//   Foundation - Tools&#x000A;// -------------------------------------&#x000A;</span>&#x000A;<span class="k">@import</span> <span class="s">'foundation/tools'</span>&#x000A;&#x000A;<span class="c1">// -------------------------------------&#x000A;//   Inbox&#x000A;// -------------------------------------&#x000A;</span></code></pre> <h3>Splitting up large files</h3> <p>If any of the Foundation files become larger than desired, split the file into smaller, individual files. For example, if the Foundation - Config file grows too large:</p> <ol> <li>Create a <code>foundation/config</code> directory.</li> <li>Create partials for the <code>foundation/_config.sass</code> sections.</li> <li>Import the partial files in <code>foundation/_config.sass</code>.</li> </ol> <pre class="highlight sass"><code><span class="c1">// *************************************&#x000A;//&#x000A;//   Config&#x000A;//   -&gt; Fonts, Variables&#x000A;//&#x000A;// *************************************&#x000A;</span>&#x000A;<span class="k">@import</span> <span class="s">'foundation/config/fonts'</span>&#x000A;<span class="k">@import</span> <span class="s">'foundation/config/colors'</span>&#x000A;<span class="k">@import</span> <span class="s">'foundation/config/base'</span>&#x000A;<span class="k">@import</span> <span class="s">'foundation/config/components'</span>&#x000A;<span class="k">@import</span> <span class="s">'foundation/config/structures'</span>&#x000A;<span class="c1">// ...&#x000A;</span></code></pre> <h2>Inbox</h2> <p>Collaboration with developers can sometimes be difficult, but we&rsquo;ve found a way to help mitigate that (at least as it relates to CSS). At the bottom of the <code>application.sass</code> file, there&rsquo;s a comment block that looks like this:</p> <pre class="highlight sass"><code><span class="c1">// -------------------------------------&#x000A;//   Inbox&#x000A;// -------------------------------------&#x000A;</span></code></pre> <p>You can add any temporary styles to this section, which will allow the maintainer of the CSS to rewrite or sort the styles appropriately. We&rsquo;ve found that developers respect (and even enjoy) this system, since they&rsquo;re free from stressing over the proper placement or structure of a style rule.</p> </article> <ul class=pager> <li class=pager-item> <a href="../styleguide/naming/">&larr; Previous page </a> </li> <li class=pager-item> <a href="../foundation/">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>