mvcss.github.com/index.html at master · thomazot/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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta content='IE=edge,chrome=1' http-equiv='X-UA-Compatible'>
    <meta charset='utf-8'>
    <meta content='width=device-width, initial-scale=1.0' name='viewport'>
    <title>MVCSS</title>
    <meta content='MVCSS - A Sass-based CSS architecture for creating predictable and maintainable application style.' name='description'>
    <link href="http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300" media="screen" rel="stylesheet" type="text/css" />
    <link href="assets/stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
    <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'>
    <div class='l-controls'>
      <a class='btn--a' href='https://github.com/mvcss/mvcss'>View Code &rarr;</a>
      <p><a href="/changelog/">Changelog (v3.0.1)</a></p>
    </div>
    <a class='l-sidebar-toggle' href='#'>Navigation</a>
    <aside class='l-sidebar'>
      <header class='l-header'>
        <div class='c-logo'>
          <a href='/'><img width="100" height="110" alt="MVCSS" src="assets/images/logo.svg" /></a>
          <b>MVCSS <span>Version 3.0.1</span></b>
        </div>
        <p class='c-tagline'>A Sass-based CSS Architecture</p>
      </header>
      <nav class='l-nav'>
        <ul>
          <li><a class="is-active" href="/">About</a></li>
          <li><a href="/application/">Application</a></li>
          <li>
            <a href="/core/">Core</a>
            <ul>
              <li><a href="/core/reset/">Reset</a></li>
              <li><a href="/core/settings/">Settings</a></li>
              <li><a href="/core/helpers/">Helpers</a></li>
              <li><a href="/core/base/">Base</a></li>
              <li><a href="/core/content/">Content</a></li>
              <li><a href="/core/layout/">Layout</a></li>
            </ul>
          </li>
          <li><a href="/modules/">Modules</a></li>
          <li>
            <a href="/styleguide/">Styleguide</a>
            <ul>
              <li><a href="/styleguide/basics/">Basics</a></li>
              <li><a href="/styleguide/sass-specific/">Sass-specific</a></li>
              <li><a href="/styleguide/naming/">Naming Conventions</a></li>
            </ul>
          </li>
          <li><a href="/library/">Library</a></li>
        </ul>
      </nav>
      <footer class='l-about'>
        <b>Crafted with care by</b>
        <a href="http://twitter.com/nickawalsh">Nick Walsh</a>
        &amp;
        <a href="http://twitter.com/drewbarontini">Drew Barontini</a>
      </footer>
    </aside>
    <main class='l-cell'>
      <h1>About</h1>

      <p class="c-lead"><strong>MVCSS</strong> is a Sass-based CSS architecture for creating predictable and maintainable application style.</p>

      <p>As front-end devs at <a href="http://envylabs.com">Envy Labs</a>, we work primarily in medium-to-large-sized Rails applications. Each of these projects has a sizable amount of CSS undergoing normal maintenance and iteration. Depending on complexity and setup, changes to existing style can be difficult or done poorly if the right way is too convoluted.</p>

      <h2>What? Another Way to Write CSS?</h2>

      <p>We&#39;re big fans (and often employ tenets of) well-documented methods like <a href="https://github.com/stubbornella/oocss/wiki">OOCSS</a>, <a href="http://bem.info/method/">BEM</a>, and <a href="http://smacss.com/">SMACSS</a>. This bit of architecture and accompanying <a href="http://mvcss.github.io/styleguide/">Styleguide</a>/<a href="http://mvcss.github.io/library/">Library</a> meshes all of our preferred practices into one place.</p>

      <h2>All This for CSS?</h2>

      <p>CSS in and of itself is simple to pick up, but difficult to apply maintainably to large applications - hence the popularity of the methods listed above. <strong>MVCSS</strong> is one such manner to organize styles, and the one that we&#39;ve had the most success in employing.</p>

      <h2>Do I Have to Use Sass?</h2>

      <p>Sass is not required to employ this paradigm, but all the project files are written in it, so it&#39;s definitely recommended.</p>

      <h2>Organizational Overview</h2>

      <p><strong>MVCSS</strong> is broken down into three primary sections:</p>

      <ol>
      <li><a href="/application/"><strong>Application</strong></a></li>
      <li><a href="/core/"><strong>Core</strong></a></li>
      <li><a href="/modules/"><strong>Modules</strong></a></li>
      </ol>
    </main>
    <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.9.1.min.js" type="text/javascript"></script>
    <script>
      (function() {

        $(function() {
          return $('.l-sidebar-toggle').on('click', function(e) {
            e.preventDefault();
            $(this).toggleClass('is-active');
            return $('body').toggleClass('is-sidebar-toggled');
          });
        });

      }).call(this);
    </script>
  </body>
</html>