just-another-grid-system/index.html at master · lawlesscreation/just-another-grid-system · 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
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>Just Another Grid System (JAGS)</title>

    <meta charset="utf-8" />
    <meta name="description" content="A CSS grid system created for developing consistent, responsive and liquid grids" />
    <meta name="author" content="Matt Lawson" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" media="screen" href="gh-pages/css/normalize.css" />
    <link rel="stylesheet" media="screen" href="jags.css" />
    <link rel="stylesheet" media="screen" href="gh-pages/css/style.css" />

    <script src="gh-pages/js/respond/respond.min.js"></script>
  </head>

  <body>
    <div class="header" role="banner">
      <h1>Just Another Grid System (JAGS)</h1>
      <p class="tagline">A CSS grid system created for developing consistent, responsive and liquid grids.</p>
      <div class="nav" role="navigation">
        <ul>
          <li><span>Home</span></li>
          <li><a href="gh-pages/layouts.html">Layouts</a></li>
        </ul>
      </div><!-- .nav -->
    </div><!-- .header -->

    <div class="main" role="main">
      <a class="btn" href="https://github.com/lawlesscreation/just-another-grid-system">View on GitHub</a>
      <a class="btn" href="https://github.com/lawlesscreation/just-another-grid-system/archive/master.zip">Download ZIP</a>

      <div class="grid">
        <div class="grid_col--1">
          <div class="grid_box">
            <p>The idea of JAGS was to create a grid system that could be used to rapidly consruct responsive, liquid grids that were consistent and would easily adapt to various device sizes.</p>

            <h2>What makes this one different?</h2>
            <p>Well, maybe nothing! There are lots of <em>CSS grid systems</em> out there, but at the time most seemed overcomplicated or lacked particular features/support. JAGS was created to use:</p>
          </div>
        </div>
      </div><!-- .grid -->

      <div class="grid--4 grid--bdr">
        <div class="grid_col--1 grid_col--fl-25">
          <div class="grid_box">
            <h3>Liquid columns</h3>
            <p>Percentage widths make them liquid, so they will fill the space available. You can easily add fixed width to create a stepped layout if you wish.</p>
          </div>
        </div>
        <div class="grid_col--2 grid_col--fl-25">
          <div class="grid_box">
            <h3>Consistent HTML</h3>
            <p>Ever seen a large project with <code>.col</code>, <code>.column</code>, <code>.grid</code> all doing the same thing?! JAGS <abbr title="without the double underscore">loosely</abbr> follows the <abbr title="Block__Element--Modifier">BEM</abbr> syntax to ensure your grid system is consistent.</p>
          </div>
        </div>
        <div class="grid_col--3 grid_col--fl-25">
          <div class="grid_box">
            <h3>CSS media queries</h3>
            <p>The CSS breakpoints (as well as the column gutters) can be customized allowing the grid to be configured to suite the content.</p>
          </div>
        </div>
        <div class="grid_col--4 grid_col--oh">
          <div class="grid_box">
            <h3>Legacy browser support&hellip;</h3>
            <p>JAGS will work with <em>IE6+*</em>, with a little help from <a href="https://github.com/scottjehl/Respond">Respond</a>, and will gracefully degrade to a linear solution for browers that don't support media queries.</p>
          </div>
        </div>
      </div><!-- .grid -->

      <div class="grid">
        <div class="grid_col--1">
          <div class="grid_box">
            <h2>Usage</h2>
            <p>To get started you can either:</p>
            <ul>
              <li>Clone the repo: <code>git clone https://github.com/lawlesscreation/just-another-grid-system.git</code></li>
              <li>Or install with Bower: <code>bower install just-another-grid-system</code></li>
            </ul>
            <p>Then it's just a case of adding the CSS file to your HTML:</p>
            <pre>
    &lt;link rel="stylesheet" media="all" href="path/to/jags.css" /&gt;
            </pre>
            <p><b>Or</b> import the SCSS file into your main SCSS project:</p>
            <pre>
    @import "path/to/jags.scss";
            </pre>
            <p>Finally, take a look at the <a href="gh-pages/layouts.html">different layouts</a> to find the grid you require. You can nest the code to create even more <a href="gh-pages/extreme-testing.html">complex grids</a>!</p>
            <p>If you need Internet Explorer support for IE7-IE8 you will need a JavaScript polyfill for the CSS media queries, such as <a href="https://github.com/scottjehl/Respond">Respond</a>, which should be added to the <code>&lt;head&gt;</code>:</p>
            <pre>
    &lt;script src="js/respond/respond.min.js"&gt;&lt;/script&gt;
            </pre>

            <h2>Development</h2>

            <h3>SCSS</h3>
            <p>If you need to change some of the defaults like the media query breakpoints, margins or borders you can do using the <code>_vars.scss</code> and recompile the SCSS:</p>
            <pre>
    $ sass jags.scss:jags.css --style expanded
            </pre>
            <p>or compressed:</p>
            <pre>
    $ sass jags.scss:jags.min.css --style compressed
            </pre>
          </div>
        </div>
      </div><!-- .grid -->

      <div class="grid">
        <div class="grid_col--1">
          <div class="grid_box">
            <h2>Some notes</h2>
            <p>There are a few things you might like to know&hellip;</p>
          </div>
        </div>
      </div><!-- .grid -->

      <div class="grid--3">
        <div class="grid_col--1 grid_col--fl-33">
          <div class="grid_box">
            <h3>Mobile-first</h3>
            <p>The media queries have been structured with a "mobile-first" approach from 0px up, but feel free to customise them if you wish!</p>
          </div>
        </div>
        <div class="grid_col--2 grid_col--fl-33">
          <div class="grid_box">
            <h3>Equal height columns</h3>
            <p>By default JAGS doesn't come with the equal height columns script that I'm using here, but feel free to use the one in the demo.</p>
          </div>
        </div>
        <div class="grid_col--3 grid_col--oh">
          <div class="grid_box">
            <h3>* Works in IE6?!</h3>
            <p>Yes and no. The grids work fine with the exception of the border variations because IE6's support for adjoining classes is a little flakey.</p>
          </div>
        </div>
      </div><!-- .grid -->
    </div><!-- .main -->

    <div class="footer" role="contentinfo">
      <p>Copyright &copy; 2013 <a href="http://twitter.com/lawlesscreation">@lawlesscreation</a></p>
      <p>Licensed under <a href="http://opensource.org/licenses/mit-license.php">MIT</a></p>
    </div><!-- .footer -->

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="gh-pages/js/jquery/1.10.2/jquery.min.js">\x3C/script>')</script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script>window.jQuery.ui || document.write('<script src="gh-pages/js/jqueryui/1.10.3/jquery-ui.min.js">\x3C/script>')</script>
    <script>
      // for the demo pages only. Not required for functionality.

      $(document).ready(function(){
      // document.ready used for anything that we need to load as soon as the DOM is loaded

        $('.grid--2 .grid_box').equalCols();
        $('.grid--3 .grid_box').equalCols();
        $('.grid--4 .grid_box').equalCols();

      }); // end document.ready

      $(window).load(function(){
      // window.load used for everything else that can wait to avoid stalling during page load

        $(window).resize(function() {
          $('.grid--2 .grid_box').equalCols();
          $('.grid--3 .grid_box').equalCols();
          $('.grid--4 .grid_box').equalCols();
        });

      }); // end window.load


      /**
       * Equal height Columns
       * (requires jQuery)
       *
       */
      jQuery.fn.equalCols = function(){

        $(this).removeAttr('style');

        var sortNumber = function(a,b){return b - a;},
            heights = [];

        $(this).each(function(){
          heights.push($(this).height());
        });
        heights.sort(sortNumber),
            maxHeight = heights[0];

        return this.each(function(){
          $(this).css({'min-height': maxHeight});
        });
      };
    </script>
  </body>
</html>