-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
23 lines (22 loc) · 6.98 KB
/
index.html
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>Overview / 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=index data-id=0> <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 is-active" 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 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>Overview</h1> <p><strong>MVCSS</strong> [Modular View CSS] is a Sass-based CSS architecture for creating predictable and maintainable application style.</p> <p>CSS, for all its simplicity, is a difficult language to manage in large-scale implementations. Naming, paths to abstraction, structure, and methodologies are all free-form; MVCSS seeks to provide order for these sorts of projects.</p> <p>Keeping with an architecture motif, applications are split into three major categories: <a href="/foundation"><em>Foundation</em></a>, <a href="/components"><em>Components</em></a>, and <a href="/structures"><em>Structures</em></a>. If Foundation represents tools, materials, and the ground level, Components are akin to creating a window, while Structures mirror a number of windows and doors creating a wall.</p> <p>For a very early taste, here’s what a simple Component might consist of:</p> <pre class="highlight sass"><code><span class="c1">// *************************************
//
// Card
// -> Individual style containers
//
// *************************************
</span>
<span class="nc">.card</span>
 <span class="nl">background</span><span class="p">:</span> <span class="nv">$c-invert</span>
 <span class="nl">border-radius</span><span class="p">:</span> <span class="nv">$b-borderRadius</span>
 <span class="nl">box-shadow</span><span class="p">:</span> <span class="nv">$b-boxShadow</span>
 <span class="nl">padding</span><span class="p">:</span> <span class="nv">$b-space</span>

<span class="c1">// -------------------------------------
// Modifiers
// -------------------------------------
</span>
<span class="c1">// ----- Sizes ----- //
</span>
<span class="nc">.card--s</span>
 <span class="nl">padding</span><span class="p">:</span> <span class="nv">$b-space-s</span>

<span class="c1">// ----- Theme ----- //
</span>
<span class="c1">// Hierarchy
</span>
<span class="nc">.card--b</span>
 <span class="nl">background</span><span class="p">:</span> <span class="nv">$c-highlight</span>

<span class="c1">// Error
</span>
<span class="nc">.card--error</span>
 <span class="nl">border</span><span class="p">:</span> <span class="m">2px</span> <span class="nv">$b-borderStyle</span> <span class="nv">$c-error</span>
 <span class="nl">box-shadow</span><span class="p">:</span> <span class="nb">none</span>

<span class="c1">// -------------------------------------
// Scaffolding
// -------------------------------------
</span>
<span class="c1">// ----- Label ----- //
</span>
<span class="nc">.card-label</span>
 <span class="nl">font-size</span><span class="p">:</span> <span class="nv">$b-fontSize-s</span>
 <span class="nl">font-weight</span><span class="p">:</span> <span class="nb">bold</span>
 <span class="nl">text-transform</span><span class="p">:</span> <span class="nb">uppercase</span>
</code></pre> <p>There’s no shortage of wonderful frameworks, ideas, and methods for tackling CSS across the web, and MVCSS wouldn’t exist without ideas set forth in few of these. Take a look at the <a href="/resources">Resources</a> section to find out more about our architectural roots.</p> </article> <ul class=pager> <li class=pager-item> <a href="styleguide/">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>