compass-grid-plugin 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +8 -0
- data/README.md +88 -0
- data/compass-grid-plugin.gemspec +21 -0
- data/example/config.rb +27 -0
- data/example/css/example.css +97 -0
- data/example/css/media.css +618 -0
- data/example/css/percentage.css +544 -0
- data/example/css/test.css +113 -0
- data/example/example.html +40 -0
- data/example/i/dino-1.jpg +0 -0
- data/example/i/dino-2.png +0 -0
- data/example/media.html +67 -0
- data/example/percentage.html +430 -0
- data/example/scss/example.scss +55 -0
- data/example/scss/media.scss +347 -0
- data/example/scss/percentage.scss +68 -0
- data/example/scss/test.scss +30 -0
- data/example/test.html +216 -0
- data/lib/compass-grid.rb +5 -0
- data/lib/compass/grid.rb +7 -0
- data/lib/compass/grid/version.rb +5 -0
- data/stylesheets/_grid.scss +127 -0
- data/stylesheets/grid/_fluid.scss +131 -0
- data/templates/project/manifest.rb +17 -0
- data/templates/project/partials/_base.scss +7 -0
- data/templates/project/screen.scss +9 -0
- metadata +89 -0
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
.clearfix, .page, .row, .page > .row { *zoom: 1; }
|
|
2
|
+
.clearfix:after, .page:after, .row:after, .page > .row:after { content: ""; display: table; clear: both; }
|
|
3
|
+
|
|
4
|
+
.page { width: 960px; margin: 0 auto; }
|
|
5
|
+
|
|
6
|
+
.row { width: auto; margin: 0 -10px; }
|
|
7
|
+
|
|
8
|
+
.page > .row { width: auto; margin: 0 0; }
|
|
9
|
+
|
|
10
|
+
.column { margin: 0 10px; float: left; }
|
|
11
|
+
|
|
12
|
+
.grid-1 { width: 60px; }
|
|
13
|
+
|
|
14
|
+
.before-1 { margin-left: 90px; }
|
|
15
|
+
|
|
16
|
+
.after-1 { margin-right: 90px; }
|
|
17
|
+
|
|
18
|
+
.grid-2 { width: 140px; }
|
|
19
|
+
|
|
20
|
+
.before-2 { margin-left: 170px; }
|
|
21
|
+
|
|
22
|
+
.after-2 { margin-right: 170px; }
|
|
23
|
+
|
|
24
|
+
.grid-3 { width: 220px; }
|
|
25
|
+
|
|
26
|
+
.before-3 { margin-left: 250px; }
|
|
27
|
+
|
|
28
|
+
.after-3 { margin-right: 250px; }
|
|
29
|
+
|
|
30
|
+
.grid-4 { width: 300px; }
|
|
31
|
+
|
|
32
|
+
.before-4 { margin-left: 330px; }
|
|
33
|
+
|
|
34
|
+
.after-4 { margin-right: 330px; }
|
|
35
|
+
|
|
36
|
+
.grid-5 { width: 380px; }
|
|
37
|
+
|
|
38
|
+
.before-5 { margin-left: 410px; }
|
|
39
|
+
|
|
40
|
+
.after-5 { margin-right: 410px; }
|
|
41
|
+
|
|
42
|
+
.grid-6 { width: 460px; }
|
|
43
|
+
|
|
44
|
+
.before-6 { margin-left: 490px; }
|
|
45
|
+
|
|
46
|
+
.after-6 { margin-right: 490px; }
|
|
47
|
+
|
|
48
|
+
.grid-7 { width: 540px; }
|
|
49
|
+
|
|
50
|
+
.before-7 { margin-left: 570px; }
|
|
51
|
+
|
|
52
|
+
.after-7 { margin-right: 570px; }
|
|
53
|
+
|
|
54
|
+
.grid-8 { width: 620px; }
|
|
55
|
+
|
|
56
|
+
.before-8 { margin-left: 650px; }
|
|
57
|
+
|
|
58
|
+
.after-8 { margin-right: 650px; }
|
|
59
|
+
|
|
60
|
+
.grid-9 { width: 700px; }
|
|
61
|
+
|
|
62
|
+
.before-9 { margin-left: 730px; }
|
|
63
|
+
|
|
64
|
+
.after-9 { margin-right: 730px; }
|
|
65
|
+
|
|
66
|
+
.grid-10 { width: 780px; }
|
|
67
|
+
|
|
68
|
+
.before-10 { margin-left: 810px; }
|
|
69
|
+
|
|
70
|
+
.after-10 { margin-right: 810px; }
|
|
71
|
+
|
|
72
|
+
.grid-11 { width: 860px; }
|
|
73
|
+
|
|
74
|
+
.before-11 { margin-left: 890px; }
|
|
75
|
+
|
|
76
|
+
.after-11 { margin-right: 890px; }
|
|
77
|
+
|
|
78
|
+
.grid-12 { width: 940px; }
|
|
79
|
+
|
|
80
|
+
.box { margin-bottom: 20px; }
|
|
81
|
+
|
|
82
|
+
.column { background-color: #ccc; margin-bottom: 20px; }
|
|
83
|
+
|
|
84
|
+
.borders .column { border: 2px solid black; }
|
|
85
|
+
.borders .grid-1 { width: grid-width(1, -4px); }
|
|
86
|
+
.borders .grid-2 { width: grid-width(2, -4px); }
|
|
87
|
+
.borders .grid-3 { width: grid-width(3, -4px); }
|
|
88
|
+
.borders .grid-4 { width: grid-width(4, -4px); }
|
|
89
|
+
.borders .grid-5 { width: grid-width(5, -4px); }
|
|
90
|
+
.borders .grid-6 { width: grid-width(6, -4px); }
|
|
91
|
+
.borders .grid-7 { width: grid-width(7, -4px); }
|
|
92
|
+
.borders .grid-8 { width: grid-width(8, -4px); }
|
|
93
|
+
.borders .grid-9 { width: grid-width(9, -4px); }
|
|
94
|
+
.borders .grid-10 { width: grid-width(10, -4px); }
|
|
95
|
+
.borders .grid-11 { width: grid-width(11, -4px); }
|
|
96
|
+
.borders .grid-12 { width: grid-width(12, -4px); }
|
|
97
|
+
|
|
98
|
+
.padding .column { padding: 0 10px; }
|
|
99
|
+
.padding .grid-1 { width: grid-width(1, -20px); }
|
|
100
|
+
.padding .grid-2 { width: grid-width(2, -20px); }
|
|
101
|
+
.padding .grid-3 { width: grid-width(3, -20px); }
|
|
102
|
+
.padding .grid-4 { width: grid-width(4, -20px); }
|
|
103
|
+
.padding .grid-5 { width: grid-width(5, -20px); }
|
|
104
|
+
.padding .grid-6 { width: grid-width(6, -20px); }
|
|
105
|
+
.padding .grid-7 { width: grid-width(7, -20px); }
|
|
106
|
+
.padding .grid-8 { width: grid-width(8, -20px); }
|
|
107
|
+
.padding .grid-9 { width: grid-width(9, -20px); }
|
|
108
|
+
.padding .grid-10 { width: grid-width(10, -20px); }
|
|
109
|
+
.padding .grid-11 { width: grid-width(11, -20px); }
|
|
110
|
+
.padding .grid-12 { width: grid-width(12, -20px); }
|
|
111
|
+
|
|
112
|
+
.clearfix, .page, .row, .page > .row { *zoom: 1; }
|
|
113
|
+
.clearfix:after, .page:after, .row:after, .page > .row:after { content: ""; display: table; clear: both; }
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
|
3
|
+
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
|
4
|
+
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
|
|
5
|
+
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
|
|
6
|
+
<head>
|
|
7
|
+
<meta charset="utf-8">
|
|
8
|
+
|
|
9
|
+
<title>1KB SCSS Grid Test Page</title>
|
|
10
|
+
<meta name="description" content="">
|
|
11
|
+
<meta name="author" content="">
|
|
12
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
13
|
+
|
|
14
|
+
<link rel="stylesheet" href="css/test.css">
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<body>
|
|
18
|
+
<div id="container">
|
|
19
|
+
<header>
|
|
20
|
+
<h1>Header</h1>
|
|
21
|
+
<nav><a href="#">Nav Link</a></nav>
|
|
22
|
+
</header>
|
|
23
|
+
<div role="main">
|
|
24
|
+
<div id="left-column">Left Column</div>
|
|
25
|
+
<div id="main-column">
|
|
26
|
+
<section class="hero">
|
|
27
|
+
Hero Space, I take the full width
|
|
28
|
+
</section>
|
|
29
|
+
<section>
|
|
30
|
+
<article id="content">Actual Content</article>
|
|
31
|
+
<aside id="right-column">Right Column</aside>
|
|
32
|
+
</section>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
35
|
+
<footer>
|
|
36
|
+
<p>© Copyright 2011</p>
|
|
37
|
+
</footer>
|
|
38
|
+
</div>
|
|
39
|
+
</body>
|
|
40
|
+
</html>
|
|
Binary file
|
|
Binary file
|
data/example/media.html
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!--[if lt IE 7]> <html class="fluid-no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
|
3
|
+
<!--[if IE 7]> <html class="fluid-no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
|
4
|
+
<!--[if IE 8]> <html class="fluid-no-js lt-ie9" lang="en"> <![endif]-->
|
|
5
|
+
<!--[if gt IE 8]><!--> <html class="fluid-no-js" lang="en"> <!--<![endif]-->
|
|
6
|
+
<head>
|
|
7
|
+
<meta charset="utf-8">
|
|
8
|
+
|
|
9
|
+
<title>1KB SCSS Grid Test Page</title>
|
|
10
|
+
<meta name="description" content="">
|
|
11
|
+
<meta name="author" content="">
|
|
12
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
13
|
+
|
|
14
|
+
<link rel="stylesheet" href="css/media.css">
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<body>
|
|
18
|
+
<header>
|
|
19
|
+
header
|
|
20
|
+
</header>
|
|
21
|
+
<div id="main">
|
|
22
|
+
<div class="left-column">
|
|
23
|
+
<nav>
|
|
24
|
+
<ul>
|
|
25
|
+
<li><a href="#">Vestibulum dapibus</a></li>
|
|
26
|
+
<li><a href="#">Maecenas rhoncus</a></li>
|
|
27
|
+
<li><a href="#">Nulla tortor mauris</a></li>
|
|
28
|
+
<li><a href="#">Vivamus ac odio</a></li>
|
|
29
|
+
<li><a href="#">Nunc vel interdum</a></li>
|
|
30
|
+
</ul>
|
|
31
|
+
</nav>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="main-column">
|
|
34
|
+
<section class="intro">
|
|
35
|
+
<h1>Nulla tortor mauris</h1>
|
|
36
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec tortor a ante gravida imperdiet ut nec erat. Sed tellus est, adipiscing ac feugiat in, gravida et leo. Cras et felis at eros adipiscing bibendum ac eget lacus. Nulla tortor mauris, vulputate bibendum aliquet eu, pharetra a ipsum.</p>
|
|
37
|
+
</section>
|
|
38
|
+
<section>
|
|
39
|
+
<article>
|
|
40
|
+
<h2>Nulla tortor mauris, vulputate bibendum</h2>
|
|
41
|
+
<p>
|
|
42
|
+
<img class="float-left grid-3" src="i/dino-1.jpg" alt="">Nullam neque justo, porttitor at mattis nec, molestie quis nisi. Sed quis sem enim. Ut sodales massa quis eros tempor tincidunt. In hac habitasse platea dictumst. Maecenas rhoncus interdum neque, ac faucibus mauris semper a. Vestibulum dapibus feugiat sapien id consequat. Pellentesque ut augue in dolor euismod dignissim eu sed purus. Nulla posuere, dolor a molestie laoreet, purus nisi eleifend tellus, eu tincidunt orci felis eget tellus. Mauris vel leo nulla. Nam vulputate sem iaculis tellus varius eget congue turpis adipiscing. Donec ac orci vel elit viverra convallis eu eu arcu. Aliquam et mi eros. Maecenas porta vehicula neque eu ultrices.</p>
|
|
43
|
+
<p>Nulla vel nunc risus, nec euismod tortor. Maecenas eget tempus nibh. Cras in ante lacus. Morbi quam dui, volutpat convallis ornare id, auctor vel elit. Suspendisse pharetra erat magna. Vivamus ac odio porta purus rhoncus porta nec nec nibh. Integer non erat purus. Phasellus convallis nibh vitae est pulvinar ut mattis lorem tincidunt. Nunc vel interdum magna. Cras ultricies, dui sit amet gravida mollis, augue diam sodales metus, eget vehicula leo ligula eget est.</p>
|
|
44
|
+
</article>
|
|
45
|
+
<aside>
|
|
46
|
+
<div class="box">
|
|
47
|
+
<img src="i/dino-2.png" alt="">
|
|
48
|
+
<p>Quisque facilisis lacus sit amet turpis porttitor vitae accumsan sem consectetur. Nam sem dolor, scelerisque ut convallis a, rhoncus eget mi. Vivamus urna odio, vehicula tristique dignissim vel, pharetra id diam.</p>
|
|
49
|
+
</div>
|
|
50
|
+
</aside>
|
|
51
|
+
</section>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
<footer>
|
|
55
|
+
footer
|
|
56
|
+
</footer>
|
|
57
|
+
<div class="measure"></div>
|
|
58
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
59
|
+
<script>
|
|
60
|
+
var $measure = $('.measure');
|
|
61
|
+
$measure.text($measure.width());
|
|
62
|
+
$(window).resize(function() {
|
|
63
|
+
$measure.text($measure.width());
|
|
64
|
+
});
|
|
65
|
+
</script>
|
|
66
|
+
</body>
|
|
67
|
+
</html>
|
|
@@ -0,0 +1,430 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<!--[if lt IE 7]> <html class="fluid-no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
|
|
3
|
+
<!--[if IE 7]> <html class="fluid-no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
|
|
4
|
+
<!--[if IE 8]> <html class="fluid-no-js lt-ie9" lang="en"> <![endif]-->
|
|
5
|
+
<!--[if gt IE 8]><!--> <html class="fluid-no-js" lang="en"> <!--<![endif]-->
|
|
6
|
+
<head>
|
|
7
|
+
<meta charset="utf-8">
|
|
8
|
+
|
|
9
|
+
<title>1KB SCSS Grid Test Page</title>
|
|
10
|
+
<meta name="description" content="">
|
|
11
|
+
<meta name="author" content="">
|
|
12
|
+
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
13
|
+
|
|
14
|
+
<link rel="stylesheet" href="css/percentage.css">
|
|
15
|
+
</head>
|
|
16
|
+
|
|
17
|
+
<body>
|
|
18
|
+
<!-- normal -->
|
|
19
|
+
<div class="page">
|
|
20
|
+
<h2>Fixed</h2>
|
|
21
|
+
<div class="row">
|
|
22
|
+
<div class="column grid-1">1</div>
|
|
23
|
+
<div class="column grid-11">11</div>
|
|
24
|
+
</div>
|
|
25
|
+
<div class="row">
|
|
26
|
+
<div class="column grid-2">2</div>
|
|
27
|
+
<div class="column grid-10">10</div>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="row">
|
|
30
|
+
<div class="column grid-3">3</div>
|
|
31
|
+
<div class="column grid-9">9</div>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="row">
|
|
34
|
+
<div class="column grid-4">4</div>
|
|
35
|
+
<div class="column grid-8">8</div>
|
|
36
|
+
</div>
|
|
37
|
+
<div class="row">
|
|
38
|
+
<div class="column grid-5">5</div>
|
|
39
|
+
<div class="column grid-7">7</div>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="row">
|
|
42
|
+
<div class="column grid-6">6</div>
|
|
43
|
+
<div class="column grid-6">6</div>
|
|
44
|
+
</div>
|
|
45
|
+
<div class="row">
|
|
46
|
+
<div class="column grid-12">12</div>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<!-- fluid -->
|
|
51
|
+
<div class="fluid-page">
|
|
52
|
+
<h2>Fluid</h2>
|
|
53
|
+
<div class="fluid-row">
|
|
54
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
55
|
+
<div class="fluid-column fluid-grid-11">11</div>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="fluid-row">
|
|
58
|
+
<div class="fluid-column fluid-grid-2">2</div>
|
|
59
|
+
<div class="fluid-column fluid-grid-10">10</div>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="fluid-row">
|
|
62
|
+
<div class="fluid-column fluid-grid-3">3</div>
|
|
63
|
+
<div class="fluid-column fluid-grid-9">9</div>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="fluid-row">
|
|
66
|
+
<div class="fluid-column fluid-grid-4">4</div>
|
|
67
|
+
<div class="fluid-column fluid-grid-8">8</div>
|
|
68
|
+
</div>
|
|
69
|
+
<div class="fluid-row">
|
|
70
|
+
<div class="fluid-column fluid-grid-5">5</div>
|
|
71
|
+
<div class="fluid-column fluid-grid-7">7</div>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="fluid-row">
|
|
74
|
+
<div class="fluid-column fluid-grid-6">6</div>
|
|
75
|
+
<div class="fluid-column fluid-grid-6">6</div>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="fluid-row">
|
|
78
|
+
<div class="fluid-column fluid-grid-12">12</div>
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<!-- fluid nested -->
|
|
83
|
+
<div class="fluid-page">
|
|
84
|
+
<h2>Fluid Nested</h2>
|
|
85
|
+
<div class="fluid-row">
|
|
86
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
87
|
+
<div class="fluid-column fluid-grid-11">11
|
|
88
|
+
<div class="fluid-row">
|
|
89
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
90
|
+
<div class="fluid-column fluid-grid-10">10
|
|
91
|
+
<div class="fluid-row">
|
|
92
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
93
|
+
<div class="fluid-column fluid-grid-9">9
|
|
94
|
+
<div class="fluid-row">
|
|
95
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
96
|
+
<div class="fluid-column fluid-grid-8">8</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="fluid-row">
|
|
105
|
+
<div class="fluid-column fluid-grid-2">2
|
|
106
|
+
<div class="fluid-row">
|
|
107
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
108
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
109
|
+
</div>
|
|
110
|
+
</div>
|
|
111
|
+
<div class="fluid-column fluid-grid-10">10
|
|
112
|
+
<div class="fluid-row">
|
|
113
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
114
|
+
<div class="fluid-column fluid-grid-9">9
|
|
115
|
+
<div class="fluid-row">
|
|
116
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
117
|
+
<div class="fluid-column fluid-grid-8">8
|
|
118
|
+
<div class="fluid-row">
|
|
119
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
120
|
+
<div class="fluid-column fluid-grid-7">7</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
<div class="fluid-row">
|
|
129
|
+
<div class="fluid-column fluid-grid-3">3
|
|
130
|
+
<div class="fluid-row">
|
|
131
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
132
|
+
<div class="fluid-column fluid-grid-2">2
|
|
133
|
+
<div class="fluid-row">
|
|
134
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
135
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
<div class="fluid-column fluid-grid-9">9
|
|
141
|
+
<div class="fluid-row">
|
|
142
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
143
|
+
<div class="fluid-column fluid-grid-8">8
|
|
144
|
+
<div class="fluid-row">
|
|
145
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
146
|
+
<div class="fluid-column fluid-grid-7">7
|
|
147
|
+
<div class="fluid-row">
|
|
148
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
149
|
+
<div class="fluid-column fluid-grid-6">6</div>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</div>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="fluid-row">
|
|
158
|
+
<div class="fluid-column fluid-grid-4">4
|
|
159
|
+
<div class="fluid-row">
|
|
160
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
161
|
+
<div class="fluid-column fluid-grid-3">3
|
|
162
|
+
<div class="fluid-row">
|
|
163
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
164
|
+
<div class="fluid-column fluid-grid-2">2
|
|
165
|
+
<div class="fluid-row">
|
|
166
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
167
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="fluid-column fluid-grid-8">8
|
|
175
|
+
<div class="fluid-row">
|
|
176
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
177
|
+
<div class="fluid-column fluid-grid-7">7
|
|
178
|
+
<div class="fluid-row">
|
|
179
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
180
|
+
<div class="fluid-column fluid-grid-6">6
|
|
181
|
+
<div class="fluid-row">
|
|
182
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
183
|
+
<div class="fluid-column fluid-grid-5">5</div>
|
|
184
|
+
</div>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
<div class="fluid-row">
|
|
192
|
+
<div class="fluid-column fluid-grid-5">5
|
|
193
|
+
<div class="fluid-row">
|
|
194
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
195
|
+
<div class="fluid-column fluid-grid-4">4
|
|
196
|
+
<div class="fluid-row">
|
|
197
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
198
|
+
<div class="fluid-column fluid-grid-3">3
|
|
199
|
+
<div class="fluid-row">
|
|
200
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
201
|
+
<div class="fluid-column fluid-grid-2">2</div>
|
|
202
|
+
</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
</div>
|
|
208
|
+
<div class="fluid-column fluid-grid-7">7
|
|
209
|
+
<div class="fluid-row">
|
|
210
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
211
|
+
<div class="fluid-column fluid-grid-6">6
|
|
212
|
+
<div class="fluid-row">
|
|
213
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
214
|
+
<div class="fluid-column fluid-grid-5">5
|
|
215
|
+
<div class="fluid-row">
|
|
216
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
217
|
+
<div class="fluid-column fluid-grid-4">4</div>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
</div>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
<div class="fluid-row">
|
|
226
|
+
<div class="fluid-column fluid-grid-6">6
|
|
227
|
+
<div class="fluid-row">
|
|
228
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
229
|
+
<div class="fluid-column fluid-grid-5">5
|
|
230
|
+
<div class="fluid-row">
|
|
231
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
232
|
+
<div class="fluid-column fluid-grid-4">4
|
|
233
|
+
<div class="fluid-row">
|
|
234
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
235
|
+
<div class="fluid-column fluid-grid-3">3</div>
|
|
236
|
+
</div>
|
|
237
|
+
</div>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
</div>
|
|
242
|
+
<div class="fluid-column fluid-grid-6">6
|
|
243
|
+
<div class="fluid-row">
|
|
244
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
245
|
+
<div class="fluid-column fluid-grid-5">5
|
|
246
|
+
<div class="fluid-row">
|
|
247
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
248
|
+
<div class="fluid-column fluid-grid-4">4
|
|
249
|
+
<div class="fluid-row">
|
|
250
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
251
|
+
<div class="fluid-column fluid-grid-3">3</div>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
</div>
|
|
258
|
+
</div>
|
|
259
|
+
<div class="fluid-row">
|
|
260
|
+
<div class="fluid-column fluid-grid-12">12</div>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
<!-- borders -->
|
|
265
|
+
<div class="fluid-page borders">
|
|
266
|
+
<h2>Borders</h2>
|
|
267
|
+
<div class="fluid-row">
|
|
268
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
269
|
+
<div class="fluid-column fluid-grid-11">11</div>
|
|
270
|
+
</div>
|
|
271
|
+
<div class="fluid-row">
|
|
272
|
+
<div class="fluid-column fluid-grid-2">2</div>
|
|
273
|
+
<div class="fluid-column fluid-grid-10">10</div>
|
|
274
|
+
</div>
|
|
275
|
+
<div class="fluid-row">
|
|
276
|
+
<div class="fluid-column fluid-grid-3">3</div>
|
|
277
|
+
<div class="fluid-column fluid-grid-9">9</div>
|
|
278
|
+
</div>
|
|
279
|
+
<div class="fluid-row">
|
|
280
|
+
<div class="fluid-column fluid-grid-4">4</div>
|
|
281
|
+
<div class="fluid-column fluid-grid-8">8</div>
|
|
282
|
+
</div>
|
|
283
|
+
<div class="fluid-row">
|
|
284
|
+
<div class="fluid-column fluid-grid-5">5</div>
|
|
285
|
+
<div class="fluid-column fluid-grid-7">7</div>
|
|
286
|
+
</div>
|
|
287
|
+
<div class="fluid-row">
|
|
288
|
+
<div class="fluid-column fluid-grid-6">6</div>
|
|
289
|
+
<div class="fluid-column fluid-grid-6">6</div>
|
|
290
|
+
</div>
|
|
291
|
+
<div class="fluid-row">
|
|
292
|
+
<div class="fluid-column fluid-grid-12">12</div>
|
|
293
|
+
</div>
|
|
294
|
+
</div>
|
|
295
|
+
|
|
296
|
+
<!-- padding -->
|
|
297
|
+
<div class="fluid-page padding">
|
|
298
|
+
<h2>Padding</h2>
|
|
299
|
+
<div class="fluid-row">
|
|
300
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
301
|
+
<div class="fluid-column fluid-grid-11">11</div>
|
|
302
|
+
</div>
|
|
303
|
+
<div class="fluid-row">
|
|
304
|
+
<div class="fluid-column fluid-grid-2">2</div>
|
|
305
|
+
<div class="fluid-column fluid-grid-10">10</div>
|
|
306
|
+
</div>
|
|
307
|
+
<div class="fluid-row">
|
|
308
|
+
<div class="fluid-column fluid-grid-3">3</div>
|
|
309
|
+
<div class="fluid-column fluid-grid-9">9</div>
|
|
310
|
+
</div>
|
|
311
|
+
<div class="fluid-row">
|
|
312
|
+
<div class="fluid-column fluid-grid-4">4</div>
|
|
313
|
+
<div class="fluid-column fluid-grid-8">8</div>
|
|
314
|
+
</div>
|
|
315
|
+
<div class="fluid-row">
|
|
316
|
+
<div class="fluid-column fluid-grid-5">5</div>
|
|
317
|
+
<div class="fluid-column fluid-grid-7">7</div>
|
|
318
|
+
</div>
|
|
319
|
+
<div class="fluid-row">
|
|
320
|
+
<div class="fluid-column fluid-grid-6">6</div>
|
|
321
|
+
<div class="fluid-column fluid-grid-6">6</div>
|
|
322
|
+
</div>
|
|
323
|
+
<div class="fluid-row">
|
|
324
|
+
<div class="fluid-column fluid-grid-12">12</div>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
|
|
328
|
+
<!-- fluid-before -->
|
|
329
|
+
<div class="fluid-page">
|
|
330
|
+
<h2>Offset Before</h2>
|
|
331
|
+
<div class="fluid-row">
|
|
332
|
+
<div class="fluid-column fluid-grid-10">10</div>
|
|
333
|
+
<div class="fluid-column fluid-grid-1 fluid-before-1">1 before</div>
|
|
334
|
+
</div>
|
|
335
|
+
<div class="fluid-row">
|
|
336
|
+
<div class="fluid-column fluid-grid-9">9</div>
|
|
337
|
+
<div class="fluid-column fluid-grid-1 fluid-before-2">2 before</div>
|
|
338
|
+
</div>
|
|
339
|
+
<div class="fluid-row">
|
|
340
|
+
<div class="fluid-column fluid-grid-8">8</div>
|
|
341
|
+
<div class="fluid-column fluid-grid-1 fluid-before-3">3 before</div>
|
|
342
|
+
</div>
|
|
343
|
+
<div class="fluid-row">
|
|
344
|
+
<div class="fluid-column fluid-grid-7">7</div>
|
|
345
|
+
<div class="fluid-column fluid-grid-1 fluid-before-4">4 before</div>
|
|
346
|
+
</div>
|
|
347
|
+
<div class="fluid-row">
|
|
348
|
+
<div class="fluid-column fluid-grid-6">6</div>
|
|
349
|
+
<div class="fluid-column fluid-grid-1 fluid-before-5">5 before</div>
|
|
350
|
+
</div>
|
|
351
|
+
<div class="fluid-row">
|
|
352
|
+
<div class="fluid-column fluid-grid-5">5</div>
|
|
353
|
+
<div class="fluid-column fluid-grid-1 fluid-before-6">6 before</div>
|
|
354
|
+
</div>
|
|
355
|
+
<div class="fluid-row">
|
|
356
|
+
<div class="fluid-column fluid-grid-4">4</div>
|
|
357
|
+
<div class="fluid-column fluid-grid-1 fluid-before-7">7 before</div>
|
|
358
|
+
</div>
|
|
359
|
+
<div class="fluid-row">
|
|
360
|
+
<div class="fluid-column fluid-grid-3">3</div>
|
|
361
|
+
<div class="fluid-column fluid-grid-1 fluid-before-8">8 before</div>
|
|
362
|
+
</div>
|
|
363
|
+
<div class="fluid-row">
|
|
364
|
+
<div class="fluid-column fluid-grid-2">2</div>
|
|
365
|
+
<div class="fluid-column fluid-grid-1 fluid-before-9">9 before</div>
|
|
366
|
+
</div>
|
|
367
|
+
<div class="fluid-row">
|
|
368
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
369
|
+
<div class="fluid-column fluid-grid-1 fluid-before-10">10 before</div>
|
|
370
|
+
</div>
|
|
371
|
+
<div class="fluid-row">
|
|
372
|
+
<div class="fluid-column fluid-grid-1 fluid-before-11">11 before</div>
|
|
373
|
+
</div>
|
|
374
|
+
<div class="fluid-row">
|
|
375
|
+
<div class="fluid-column fluid-grid-12">12</div>
|
|
376
|
+
</div>
|
|
377
|
+
</div>
|
|
378
|
+
|
|
379
|
+
<!-- fluid-after -->
|
|
380
|
+
<div class="fluid-page">
|
|
381
|
+
<h2>Offset After</h2>
|
|
382
|
+
<div class="fluid-row">
|
|
383
|
+
<div class="fluid-column fluid-grid-1 fluid-after-1">1 after</div>
|
|
384
|
+
<div class="fluid-column fluid-grid-10">10</div>
|
|
385
|
+
</div>
|
|
386
|
+
<div class="fluid-row">
|
|
387
|
+
<div class="fluid-column fluid-grid-1 fluid-after-2">2 after</div>
|
|
388
|
+
<div class="fluid-column fluid-grid-9">9</div>
|
|
389
|
+
</div>
|
|
390
|
+
<div class="fluid-row">
|
|
391
|
+
<div class="fluid-column fluid-grid-1 fluid-after-3">3 after</div>
|
|
392
|
+
<div class="fluid-column fluid-grid-8">8</div>
|
|
393
|
+
</div>
|
|
394
|
+
<div class="fluid-row">
|
|
395
|
+
<div class="fluid-column fluid-grid-1 fluid-after-4">4 after</div>
|
|
396
|
+
<div class="fluid-column fluid-grid-7">7</div>
|
|
397
|
+
</div>
|
|
398
|
+
<div class="fluid-row">
|
|
399
|
+
<div class="fluid-column fluid-grid-1 fluid-after-5">5 after</div>
|
|
400
|
+
<div class="fluid-column fluid-grid-6">6</div>
|
|
401
|
+
</div>
|
|
402
|
+
<div class="fluid-row">
|
|
403
|
+
<div class="fluid-column fluid-grid-1 fluid-after-6">6 after</div>
|
|
404
|
+
<div class="fluid-column fluid-grid-5">5</div>
|
|
405
|
+
</div>
|
|
406
|
+
<div class="fluid-row">
|
|
407
|
+
<div class="fluid-column fluid-grid-1 fluid-after-7">7 after</div>
|
|
408
|
+
<div class="fluid-column fluid-grid-4">4</div>
|
|
409
|
+
</div>
|
|
410
|
+
<div class="fluid-row">
|
|
411
|
+
<div class="fluid-column fluid-grid-1 fluid-after-8">8 after</div>
|
|
412
|
+
<div class="fluid-column fluid-grid-3">3</div>
|
|
413
|
+
</div>
|
|
414
|
+
<div class="fluid-row">
|
|
415
|
+
<div class="fluid-column fluid-grid-1 fluid-after-9">9 after</div>
|
|
416
|
+
<div class="fluid-column fluid-grid-2">2</div>
|
|
417
|
+
</div>
|
|
418
|
+
<div class="fluid-row">
|
|
419
|
+
<div class="fluid-column fluid-grid-1 fluid-after-10">10 after</div>
|
|
420
|
+
<div class="fluid-column fluid-grid-1">1</div>
|
|
421
|
+
</div>
|
|
422
|
+
<div class="fluid-row">
|
|
423
|
+
<div class="fluid-column fluid-grid-1 fluid-after-11">11 after</div>
|
|
424
|
+
</div>
|
|
425
|
+
<div class="fluid-row">
|
|
426
|
+
<div class="fluid-column fluid-grid-12">12</div>
|
|
427
|
+
</div>
|
|
428
|
+
</div>
|
|
429
|
+
</body>
|
|
430
|
+
</html>
|