compass-grid-plugin 0.0.3 → 0.0.4
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +45 -29
- data/compass-grid-plugin.gemspec +3 -3
- data/example/config.rb +26 -27
- data/example/example.html +39 -39
- data/example/fixed.html +215 -215
- data/example/fluid.html +453 -429
- data/example/media.html +66 -66
- data/example/scss/example-fluid.scss +2 -1
- data/example/scss/example.scss +54 -54
- data/example/scss/fluid.scss +23 -7
- data/example/scss/media.scss +329 -329
- data/lib/compass-grid.rb +14 -1
- data/lib/compass/grid.rb +6 -6
- data/lib/compass/grid/version.rb +1 -1
- data/stylesheets/_grid.scss +151 -126
- data/stylesheets/grid/_fluid.scss +49 -28
- data/stylesheets/grid/fluid/_helpers.scss +14 -0
- data/templates/project/manifest.rb +16 -16
- data/templates/project/partials/_base.scss +6 -6
- data/templates/project/screen.scss +9 -9
- metadata +8 -7
data/example/media.html
CHANGED
|
@@ -1,67 +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>
|
|
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
67
|
</html>
|
data/example/scss/example.scss
CHANGED
|
@@ -1,55 +1,55 @@
|
|
|
1
|
-
// import the grid
|
|
2
|
-
@import "grid";
|
|
3
|
-
$grid-clearfix-class: false;
|
|
4
|
-
|
|
5
|
-
// establishes page width and centers
|
|
6
|
-
#container {
|
|
7
|
-
@include grid-page;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
// main page sections
|
|
11
|
-
[role="main"] {
|
|
12
|
-
@include grid-row(true); //true indicates a row is directly inside a page
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
// header and footer don't have columns in this example
|
|
16
|
-
#container > header, #container > footer {
|
|
17
|
-
margin: 0 $grid-gutter-width/2; // margins, like full-width columns
|
|
18
|
-
border: 1px solid black;
|
|
19
|
-
margin-bottom: $grid-gutter-width;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
// side columns
|
|
23
|
-
#left-column, #right-column {
|
|
24
|
-
@include grid-column(3, -2px); //3 columns wide
|
|
25
|
-
border: 1px solid red;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
// main column
|
|
29
|
-
#main-column {
|
|
30
|
-
@include grid-column(9); //9 columns wide
|
|
31
|
-
|
|
32
|
-
// sections in the main column are rows
|
|
33
|
-
> section {
|
|
34
|
-
@include grid-row;
|
|
35
|
-
margin-bottom: $grid-gutter-width;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
// hero sections don't have columns in this example
|
|
39
|
-
> section.hero {
|
|
40
|
-
border: 1px solid black;
|
|
41
|
-
margin-left: 0;
|
|
42
|
-
margin-right: 0;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
// center column
|
|
47
|
-
#content {
|
|
48
|
-
@include grid-column(6, -2px); //6 columns wide
|
|
49
|
-
border: 1px solid blue;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
// add a clearfix rule, requires compass
|
|
53
|
-
// add a clearfix rule, requires compass
|
|
54
|
-
@import "compass/utilities/general/clearfix";
|
|
1
|
+
// import the grid
|
|
2
|
+
@import "../../stylesheets/grid";
|
|
3
|
+
$grid-clearfix-class: false;
|
|
4
|
+
|
|
5
|
+
// establishes page width and centers
|
|
6
|
+
#container {
|
|
7
|
+
@include grid-page;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// main page sections
|
|
11
|
+
[role="main"] {
|
|
12
|
+
@include grid-row(true); //true indicates a row is directly inside a page
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// header and footer don't have columns in this example
|
|
16
|
+
#container > header, #container > footer {
|
|
17
|
+
margin: 0 $grid-gutter-width/2; // margins, like full-width columns
|
|
18
|
+
border: 1px solid black;
|
|
19
|
+
margin-bottom: $grid-gutter-width;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// side columns
|
|
23
|
+
#left-column, #right-column {
|
|
24
|
+
@include grid-column(3, -2px); //3 columns wide
|
|
25
|
+
border: 1px solid red;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// main column
|
|
29
|
+
#main-column {
|
|
30
|
+
@include grid-column(9); //9 columns wide
|
|
31
|
+
|
|
32
|
+
// sections in the main column are rows
|
|
33
|
+
> section {
|
|
34
|
+
@include grid-row;
|
|
35
|
+
margin-bottom: $grid-gutter-width;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
// hero sections don't have columns in this example
|
|
39
|
+
> section.hero {
|
|
40
|
+
border: 1px solid black;
|
|
41
|
+
margin-left: 0;
|
|
42
|
+
margin-right: 0;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// center column
|
|
47
|
+
#content {
|
|
48
|
+
@include grid-column(6, -2px); //6 columns wide
|
|
49
|
+
border: 1px solid blue;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// add a clearfix rule, requires compass
|
|
53
|
+
// add a clearfix rule, requires compass
|
|
54
|
+
@import "compass/utilities/general/clearfix";
|
|
55
55
|
.clearfix { @include pie-clearfix; }
|
data/example/scss/fluid.scss
CHANGED
|
@@ -1,8 +1,13 @@
|
|
|
1
|
+
$fluid-support-for-ie7: true;
|
|
2
|
+
|
|
1
3
|
// import the grid
|
|
2
|
-
@import "grid
|
|
4
|
+
@import "../../stylesheets/grid";
|
|
5
|
+
@import "../../stylesheets/grid/fluid";
|
|
3
6
|
@include grid-css;
|
|
4
7
|
@include fluid-css;
|
|
5
8
|
|
|
9
|
+
//@debug precision();
|
|
10
|
+
|
|
6
11
|
.column {
|
|
7
12
|
background-color: #ccc;
|
|
8
13
|
margin-bottom: $grid-gutter-width;
|
|
@@ -32,20 +37,31 @@
|
|
|
32
37
|
}
|
|
33
38
|
}
|
|
34
39
|
|
|
40
|
+
.corrected {
|
|
41
|
+
$context: 11 $grid-columns;
|
|
42
|
+
/*.fluid-11 .fluid-1 { @include fluid(1, 0, $context, 0, true); }
|
|
43
|
+
.fluid-11 .fluid-10 { @include fluid(10, 0, $context, 0, true);
|
|
44
|
+
.fluid-1 { @include fluid(1, 0, join(10, $context), 0, true); }
|
|
45
|
+
.fluid-9 { @include fluid(9, 0, join(10, $context), 0, true);
|
|
46
|
+
|
|
47
|
+
.fluid-1 { @include fluid(1, 0, join(9 10, $context), 0, true); }
|
|
48
|
+
.fluid-8 { @include fluid(8, 0, join(9 10, $context), 0, true); }
|
|
49
|
+
.fluid-row { @include fluid-row-gutters(join(9 10, $context)); }
|
|
50
|
+
}
|
|
51
|
+
.fluid-row { @include fluid-row-gutters(join(10, $context)); }
|
|
52
|
+
}
|
|
53
|
+
.fluid-11 .fluid-row { @include fluid-row-gutters($context); }
|
|
54
|
+
*/
|
|
55
|
+
}
|
|
56
|
+
|
|
35
57
|
.borders {
|
|
36
58
|
.column, .fluid-column {
|
|
37
59
|
border: 2px solid black;
|
|
38
60
|
}
|
|
39
|
-
@for $i from 1 through $grid-columns {
|
|
40
|
-
.grid-#{$i} { width: grid-column-width($i, -4px); }
|
|
41
|
-
}
|
|
42
61
|
}
|
|
43
62
|
|
|
44
63
|
.padding {
|
|
45
64
|
.column, .fluid-column {
|
|
46
65
|
padding: 0 $grid-gutter-width/2;
|
|
47
66
|
}
|
|
48
|
-
@for $i from 1 through $grid-columns {
|
|
49
|
-
.grid-#{$i} { width: grid-column-width($i, -$grid-gutter-width); }
|
|
50
|
-
}
|
|
51
67
|
}
|
data/example/scss/media.scss
CHANGED
|
@@ -1,330 +1,330 @@
|
|
|
1
|
-
// import the grid
|
|
2
|
-
@import "grid";
|
|
3
|
-
@import "grid/fluid";
|
|
4
|
-
|
|
5
|
-
// generic styles
|
|
6
|
-
.float-left, .float-right { margin-bottom: ($grid-gutter-width / 2); }
|
|
7
|
-
.float-left { float: left; margin-right: ($grid-gutter-width / 2); }
|
|
8
|
-
.float-right { float: right; margin-left: ($grid-gutter-width / 2); }
|
|
9
|
-
|
|
10
|
-
// set up main layout
|
|
11
|
-
header, #main, footer {
|
|
12
|
-
@include grid-page();
|
|
13
|
-
}
|
|
14
|
-
header, footer {
|
|
15
|
-
width: grid-column-width(12);
|
|
16
|
-
}
|
|
17
|
-
header {
|
|
18
|
-
background-color: blue;
|
|
19
|
-
height: grid-column-width(1.5)
|
|
20
|
-
}
|
|
21
|
-
footer {
|
|
22
|
-
background-color: #ccc;
|
|
23
|
-
}
|
|
24
|
-
.left-column {
|
|
25
|
-
@include grid-column(3);
|
|
26
|
-
}
|
|
27
|
-
.main-column {
|
|
28
|
-
@include grid-column(9);
|
|
29
|
-
section {
|
|
30
|
-
@include grid-row();
|
|
31
|
-
}
|
|
32
|
-
section.intro {
|
|
33
|
-
margin: 0;
|
|
34
|
-
}
|
|
35
|
-
article {
|
|
36
|
-
@include grid-column(6);
|
|
37
|
-
}
|
|
38
|
-
aside {
|
|
39
|
-
@include grid-column(3);
|
|
40
|
-
.box img {
|
|
41
|
-
width: grid-column-width(3);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
//-----------------------------------
|
|
47
|
-
// Responsive
|
|
48
|
-
//-----------------------------------
|
|
49
|
-
// Old/Small Android
|
|
50
|
-
// smaller than 320px
|
|
51
|
-
// 3 columns
|
|
52
|
-
@media only screen and (min-width: 0px) {
|
|
53
|
-
.measure { background-color: red; }
|
|
54
|
-
header, #main, footer {
|
|
55
|
-
@include fluid-page();
|
|
56
|
-
}
|
|
57
|
-
header, footer {
|
|
58
|
-
max-width: none;
|
|
59
|
-
width: auto;
|
|
60
|
-
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(4, $grid-gutter-width));
|
|
61
|
-
}
|
|
62
|
-
.left-column {
|
|
63
|
-
@include fluid-column(4, $
|
|
64
|
-
}
|
|
65
|
-
.main-column {
|
|
66
|
-
@include fluid-column(4, $
|
|
67
|
-
section {
|
|
68
|
-
@include fluid-row();
|
|
69
|
-
}
|
|
70
|
-
section.intro {
|
|
71
|
-
margin: 0;
|
|
72
|
-
}
|
|
73
|
-
article {
|
|
74
|
-
@include fluid-column(4, $
|
|
75
|
-
|
|
76
|
-
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(4)); }
|
|
77
|
-
.float-left { float: none; margin-right: 0; }
|
|
78
|
-
.float-right { float: none; margin-left: 0; }
|
|
79
|
-
img.grid-3 { @include fluid(4, $
|
|
80
|
-
}
|
|
81
|
-
aside {
|
|
82
|
-
@include fluid-column(4, $
|
|
83
|
-
.box img {
|
|
84
|
-
width: fluid-column-width(4, $
|
|
85
|
-
}
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
// iPhone
|
|
91
|
-
// Old/Small Android (landscape)
|
|
92
|
-
// 320px to 480px
|
|
93
|
-
// 4 to 6 columns
|
|
94
|
-
@media only screen and (min-width: 320px) {
|
|
95
|
-
.measure { background-color: orange; }
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
// Most Android Phones
|
|
99
|
-
// iPhone (landscape)
|
|
100
|
-
// 480px to 540px
|
|
101
|
-
// 6 to 7 columns
|
|
102
|
-
@media only screen and (min-width: 480px) {
|
|
103
|
-
.measure { background-color: yellow; }
|
|
104
|
-
header, #main, footer {
|
|
105
|
-
@include fluid-page();
|
|
106
|
-
}
|
|
107
|
-
header, footer {
|
|
108
|
-
max-width: none;
|
|
109
|
-
width: auto;
|
|
110
|
-
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(6, $grid-gutter-width));
|
|
111
|
-
}
|
|
112
|
-
.left-column {
|
|
113
|
-
@include fluid-column(6, $
|
|
114
|
-
}
|
|
115
|
-
.main-column {
|
|
116
|
-
@include fluid-column(6, $
|
|
117
|
-
section {
|
|
118
|
-
@include fluid-row();
|
|
119
|
-
}
|
|
120
|
-
section.intro {
|
|
121
|
-
margin: 0;
|
|
122
|
-
}
|
|
123
|
-
article {
|
|
124
|
-
@include fluid-column(6, $
|
|
125
|
-
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
126
|
-
.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
127
|
-
.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
128
|
-
img.grid-3 { @include fluid(3, $
|
|
129
|
-
}
|
|
130
|
-
aside {
|
|
131
|
-
@include fluid-column(6, $
|
|
132
|
-
.box img {
|
|
133
|
-
width: fluid-column-width(6, $
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
}
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
// New Droids/HTC
|
|
140
|
-
// 540px to 600px
|
|
141
|
-
// 7 columns
|
|
142
|
-
@media only screen and (min-width: 540px) {
|
|
143
|
-
// skip
|
|
144
|
-
.measure { background-color: green; }
|
|
145
|
-
}
|
|
146
|
-
|
|
147
|
-
// Kindle Fire
|
|
148
|
-
// 600px to 768px
|
|
149
|
-
// 7 to 9 columns
|
|
150
|
-
@media only screen and (min-width: 600px) {
|
|
151
|
-
.measure { background-color: blue; color: white; }
|
|
152
|
-
header, #main, footer {
|
|
153
|
-
@include fluid-page();
|
|
154
|
-
}
|
|
155
|
-
header, footer {
|
|
156
|
-
max-width: none;
|
|
157
|
-
width: auto;
|
|
158
|
-
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(8, $grid-gutter-width));
|
|
159
|
-
}
|
|
160
|
-
.left-column {
|
|
161
|
-
@include fluid-column(3, $
|
|
162
|
-
}
|
|
163
|
-
.main-column {
|
|
164
|
-
@include fluid-column(5, $
|
|
165
|
-
section {
|
|
166
|
-
@include fluid-row();
|
|
167
|
-
}
|
|
168
|
-
section.intro {
|
|
169
|
-
margin: 0;
|
|
170
|
-
}
|
|
171
|
-
article {
|
|
172
|
-
@include fluid-column(5, $
|
|
173
|
-
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
174
|
-
.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
175
|
-
.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
176
|
-
img.grid-3 { @include fluid(3, $
|
|
177
|
-
}
|
|
178
|
-
aside {
|
|
179
|
-
@include fluid-column(5, $
|
|
180
|
-
.box img {
|
|
181
|
-
width: fluid-column-width(5, $
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
// iPad
|
|
188
|
-
// 768px to 800px
|
|
189
|
-
// 9 to 10 columns
|
|
190
|
-
@media only screen and (min-width: 768px) {
|
|
191
|
-
// skip
|
|
192
|
-
.measure { background-color: purple; color: white; }
|
|
193
|
-
header, #main, footer {
|
|
194
|
-
@include fluid-page();
|
|
195
|
-
}
|
|
196
|
-
header, footer {
|
|
197
|
-
max-width: none;
|
|
198
|
-
width: auto;
|
|
199
|
-
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(9, $grid-gutter-width));
|
|
200
|
-
}
|
|
201
|
-
.left-column {
|
|
202
|
-
@include fluid-column(3, $
|
|
203
|
-
}
|
|
204
|
-
.main-column {
|
|
205
|
-
@include fluid-column(6, $
|
|
206
|
-
section {
|
|
207
|
-
@include fluid-row();
|
|
208
|
-
}
|
|
209
|
-
section.intro {
|
|
210
|
-
margin: 0;
|
|
211
|
-
}
|
|
212
|
-
article {
|
|
213
|
-
@include fluid-column(6, $
|
|
214
|
-
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
215
|
-
.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
216
|
-
.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
217
|
-
img.grid-3 { @include fluid(3, $
|
|
218
|
-
}
|
|
219
|
-
aside {
|
|
220
|
-
@include fluid-column(6, $
|
|
221
|
-
.box img {
|
|
222
|
-
width: fluid-column-width(6, $
|
|
223
|
-
}
|
|
224
|
-
}
|
|
225
|
-
}
|
|
226
|
-
}
|
|
227
|
-
|
|
228
|
-
// Android Tablets
|
|
229
|
-
// 800px to 960px
|
|
230
|
-
// 10 to 12 columns
|
|
231
|
-
@media only screen and (min-width: 800px) {
|
|
232
|
-
// skip
|
|
233
|
-
.measure { background-color: blue; color: white; }
|
|
234
|
-
header, #main, footer {
|
|
235
|
-
@include fluid-page();
|
|
236
|
-
}
|
|
237
|
-
header, footer {
|
|
238
|
-
max-width: none;
|
|
239
|
-
width: auto;
|
|
240
|
-
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(11, $grid-gutter-width));
|
|
241
|
-
}
|
|
242
|
-
.left-column {
|
|
243
|
-
@include fluid-column(3, $
|
|
244
|
-
}
|
|
245
|
-
.main-column {
|
|
246
|
-
@include fluid-column(8, $
|
|
247
|
-
section {
|
|
248
|
-
@include fluid-row();
|
|
249
|
-
}
|
|
250
|
-
section.intro {
|
|
251
|
-
margin: 0;
|
|
252
|
-
}
|
|
253
|
-
article {
|
|
254
|
-
@include fluid-column(5, $
|
|
255
|
-
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
256
|
-
.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
257
|
-
.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
258
|
-
img.grid-3 { @include fluid(3, $
|
|
259
|
-
}
|
|
260
|
-
aside {
|
|
261
|
-
@include fluid-column(3, $
|
|
262
|
-
.box img {
|
|
263
|
-
width: fluid-column-width(3, $
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
|
|
269
|
-
// Desktop
|
|
270
|
-
// 960px to 992px
|
|
271
|
-
// 12 columns
|
|
272
|
-
@media only screen and (min-width: 960px) {
|
|
273
|
-
.measure { background-color: green; }
|
|
274
|
-
|
|
275
|
-
header, #main, footer {
|
|
276
|
-
@include grid-page();
|
|
277
|
-
}
|
|
278
|
-
header, footer {
|
|
279
|
-
width: grid-column-width(12);
|
|
280
|
-
}
|
|
281
|
-
.left-column {
|
|
282
|
-
@include grid-column(3);
|
|
283
|
-
}
|
|
284
|
-
.main-column {
|
|
285
|
-
@include grid-column(9);
|
|
286
|
-
section {
|
|
287
|
-
@include grid-row();
|
|
288
|
-
}
|
|
289
|
-
section.intro {
|
|
290
|
-
margin: 0;
|
|
291
|
-
}
|
|
292
|
-
article {
|
|
293
|
-
@include grid-column(6);
|
|
294
|
-
.float-left, .float-right { margin-bottom:($grid-gutter-width / 2); }
|
|
295
|
-
.float-left { float: left; margin-right: ($grid-gutter-width / 2); }
|
|
296
|
-
.float-right { float: right; margin-left: ($grid-gutter-width / 2); }
|
|
297
|
-
img.grid-3 { @include grid(3); }
|
|
298
|
-
}
|
|
299
|
-
aside {
|
|
300
|
-
@include grid-column(3);
|
|
301
|
-
.box img {
|
|
302
|
-
width: grid-column-width(3);
|
|
303
|
-
}
|
|
304
|
-
}
|
|
305
|
-
}
|
|
306
|
-
}
|
|
307
|
-
|
|
308
|
-
// Desktop (320 and Up)
|
|
309
|
-
// 992px to 1024px
|
|
310
|
-
@media only screen and (min-width: 992px) {
|
|
311
|
-
.measure { background-color: yellow; }
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
// iPad (landscape)
|
|
315
|
-
// Kindle Fire (landscape)
|
|
316
|
-
// 1024px to 1280px
|
|
317
|
-
@media only screen and (min-width: 1024px) {
|
|
318
|
-
.measure { background-color: orange; }
|
|
319
|
-
}
|
|
320
|
-
|
|
321
|
-
// Android tablets (landscape)
|
|
322
|
-
// 1280px to infinity
|
|
323
|
-
@media only screen and (min-width: 1280px) {
|
|
324
|
-
.measure { background-color: red; }
|
|
325
|
-
}
|
|
326
|
-
|
|
327
|
-
// retina display
|
|
328
|
-
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
|
|
329
|
-
|
|
1
|
+
// import the grid
|
|
2
|
+
@import "../../stylesheets/grid";
|
|
3
|
+
@import "../../stylesheets/grid/fluid";
|
|
4
|
+
|
|
5
|
+
// generic styles
|
|
6
|
+
.float-left, .float-right { margin-bottom: ($grid-gutter-width / 2); }
|
|
7
|
+
.float-left { float: left; margin-right: ($grid-gutter-width / 2); }
|
|
8
|
+
.float-right { float: right; margin-left: ($grid-gutter-width / 2); }
|
|
9
|
+
|
|
10
|
+
// set up main layout
|
|
11
|
+
header, #main, footer {
|
|
12
|
+
@include grid-page();
|
|
13
|
+
}
|
|
14
|
+
header, footer {
|
|
15
|
+
width: grid-column-width(12);
|
|
16
|
+
}
|
|
17
|
+
header {
|
|
18
|
+
background-color: blue;
|
|
19
|
+
height: grid-column-width(1.5)
|
|
20
|
+
}
|
|
21
|
+
footer {
|
|
22
|
+
background-color: #ccc;
|
|
23
|
+
}
|
|
24
|
+
.left-column {
|
|
25
|
+
@include grid-column(3);
|
|
26
|
+
}
|
|
27
|
+
.main-column {
|
|
28
|
+
@include grid-column(9);
|
|
29
|
+
section {
|
|
30
|
+
@include grid-row();
|
|
31
|
+
}
|
|
32
|
+
section.intro {
|
|
33
|
+
margin: 0;
|
|
34
|
+
}
|
|
35
|
+
article {
|
|
36
|
+
@include grid-column(6);
|
|
37
|
+
}
|
|
38
|
+
aside {
|
|
39
|
+
@include grid-column(3);
|
|
40
|
+
.box img {
|
|
41
|
+
width: grid-column-width(3);
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
//-----------------------------------
|
|
47
|
+
// Responsive
|
|
48
|
+
//-----------------------------------
|
|
49
|
+
// Old/Small Android
|
|
50
|
+
// smaller than 320px
|
|
51
|
+
// 3 columns
|
|
52
|
+
@media only screen and (min-width: 0px) {
|
|
53
|
+
.measure { background-color: red; }
|
|
54
|
+
header, #main, footer {
|
|
55
|
+
@include fluid-page();
|
|
56
|
+
}
|
|
57
|
+
header, footer {
|
|
58
|
+
max-width: none;
|
|
59
|
+
width: auto;
|
|
60
|
+
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(4, $grid-gutter-width));
|
|
61
|
+
}
|
|
62
|
+
.left-column {
|
|
63
|
+
@include fluid-column(4, $context: 4);
|
|
64
|
+
}
|
|
65
|
+
.main-column {
|
|
66
|
+
@include fluid-column(4, $context: 4);
|
|
67
|
+
section {
|
|
68
|
+
@include fluid-row();
|
|
69
|
+
}
|
|
70
|
+
section.intro {
|
|
71
|
+
margin: 0;
|
|
72
|
+
}
|
|
73
|
+
article {
|
|
74
|
+
@include fluid-column(4, $context: 4);
|
|
75
|
+
|
|
76
|
+
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(4)); }
|
|
77
|
+
.float-left { float: none; margin-right: 0; }
|
|
78
|
+
.float-right { float: none; margin-left: 0; }
|
|
79
|
+
img.grid-3 { @include fluid(4, $context: 4, $context-plus: -$grid-gutter-width); }
|
|
80
|
+
}
|
|
81
|
+
aside {
|
|
82
|
+
@include fluid-column(4, $context: 4);
|
|
83
|
+
.box img {
|
|
84
|
+
width: fluid-column-width(4, $context: 4, $context-plus: -$grid-gutter-width);
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// iPhone
|
|
91
|
+
// Old/Small Android (landscape)
|
|
92
|
+
// 320px to 480px
|
|
93
|
+
// 4 to 6 columns
|
|
94
|
+
@media only screen and (min-width: 320px) {
|
|
95
|
+
.measure { background-color: orange; }
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// Most Android Phones
|
|
99
|
+
// iPhone (landscape)
|
|
100
|
+
// 480px to 540px
|
|
101
|
+
// 6 to 7 columns
|
|
102
|
+
@media only screen and (min-width: 480px) {
|
|
103
|
+
.measure { background-color: yellow; }
|
|
104
|
+
header, #main, footer {
|
|
105
|
+
@include fluid-page();
|
|
106
|
+
}
|
|
107
|
+
header, footer {
|
|
108
|
+
max-width: none;
|
|
109
|
+
width: auto;
|
|
110
|
+
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(6, $grid-gutter-width));
|
|
111
|
+
}
|
|
112
|
+
.left-column {
|
|
113
|
+
@include fluid-column(6, $context: 6);
|
|
114
|
+
}
|
|
115
|
+
.main-column {
|
|
116
|
+
@include fluid-column(6, $context: 6);
|
|
117
|
+
section {
|
|
118
|
+
@include fluid-row();
|
|
119
|
+
}
|
|
120
|
+
section.intro {
|
|
121
|
+
margin: 0;
|
|
122
|
+
}
|
|
123
|
+
article {
|
|
124
|
+
@include fluid-column(6, $context: 6);
|
|
125
|
+
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
126
|
+
.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
127
|
+
.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
128
|
+
img.grid-3 { @include fluid(3, $context: 6, $context-plus: -$grid-gutter-width); }
|
|
129
|
+
}
|
|
130
|
+
aside {
|
|
131
|
+
@include fluid-column(6, $context: 6);
|
|
132
|
+
.box img {
|
|
133
|
+
width: fluid-column-width(6, $context: 6, $context-plus: -$grid-gutter-width);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
// New Droids/HTC
|
|
140
|
+
// 540px to 600px
|
|
141
|
+
// 7 columns
|
|
142
|
+
@media only screen and (min-width: 540px) {
|
|
143
|
+
// skip
|
|
144
|
+
.measure { background-color: green; }
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
// Kindle Fire
|
|
148
|
+
// 600px to 768px
|
|
149
|
+
// 7 to 9 columns
|
|
150
|
+
@media only screen and (min-width: 600px) {
|
|
151
|
+
.measure { background-color: blue; color: white; }
|
|
152
|
+
header, #main, footer {
|
|
153
|
+
@include fluid-page();
|
|
154
|
+
}
|
|
155
|
+
header, footer {
|
|
156
|
+
max-width: none;
|
|
157
|
+
width: auto;
|
|
158
|
+
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(8, $grid-gutter-width));
|
|
159
|
+
}
|
|
160
|
+
.left-column {
|
|
161
|
+
@include fluid-column(3, $context: 8);
|
|
162
|
+
}
|
|
163
|
+
.main-column {
|
|
164
|
+
@include fluid-column(5, $context: 8);
|
|
165
|
+
section {
|
|
166
|
+
@include fluid-row();
|
|
167
|
+
}
|
|
168
|
+
section.intro {
|
|
169
|
+
margin: 0;
|
|
170
|
+
}
|
|
171
|
+
article {
|
|
172
|
+
@include fluid-column(5, $context: 5);
|
|
173
|
+
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
174
|
+
.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
175
|
+
.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
176
|
+
img.grid-3 { @include fluid(3, $context: 5, $context-plus: -$grid-gutter-width); }
|
|
177
|
+
}
|
|
178
|
+
aside {
|
|
179
|
+
@include fluid-column(5, $context: 5);
|
|
180
|
+
.box img {
|
|
181
|
+
width: fluid-column-width(5, $context: 5, $context-plus: -$grid-gutter-width);
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
// iPad
|
|
188
|
+
// 768px to 800px
|
|
189
|
+
// 9 to 10 columns
|
|
190
|
+
@media only screen and (min-width: 768px) {
|
|
191
|
+
// skip
|
|
192
|
+
.measure { background-color: purple; color: white; }
|
|
193
|
+
header, #main, footer {
|
|
194
|
+
@include fluid-page();
|
|
195
|
+
}
|
|
196
|
+
header, footer {
|
|
197
|
+
max-width: none;
|
|
198
|
+
width: auto;
|
|
199
|
+
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(9, $grid-gutter-width));
|
|
200
|
+
}
|
|
201
|
+
.left-column {
|
|
202
|
+
@include fluid-column(3, $context: 9);
|
|
203
|
+
}
|
|
204
|
+
.main-column {
|
|
205
|
+
@include fluid-column(6, $context: 9);
|
|
206
|
+
section {
|
|
207
|
+
@include fluid-row();
|
|
208
|
+
}
|
|
209
|
+
section.intro {
|
|
210
|
+
margin: 0;
|
|
211
|
+
}
|
|
212
|
+
article {
|
|
213
|
+
@include fluid-column(6, $context: 6);
|
|
214
|
+
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
215
|
+
.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
216
|
+
.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(6)); }
|
|
217
|
+
img.grid-3 { @include fluid(3, $context: 6, $context-plus: -$grid-gutter-width); }
|
|
218
|
+
}
|
|
219
|
+
aside {
|
|
220
|
+
@include fluid-column(6, $context: 6);
|
|
221
|
+
.box img {
|
|
222
|
+
width: fluid-column-width(6, $context: 6, $context-plus: -$grid-gutter-width);
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
// Android Tablets
|
|
229
|
+
// 800px to 960px
|
|
230
|
+
// 10 to 12 columns
|
|
231
|
+
@media only screen and (min-width: 800px) {
|
|
232
|
+
// skip
|
|
233
|
+
.measure { background-color: blue; color: white; }
|
|
234
|
+
header, #main, footer {
|
|
235
|
+
@include fluid-page();
|
|
236
|
+
}
|
|
237
|
+
header, footer {
|
|
238
|
+
max-width: none;
|
|
239
|
+
width: auto;
|
|
240
|
+
margin: 0 fluid-width($grid-gutter-width/2, grid-column-width(11, $grid-gutter-width));
|
|
241
|
+
}
|
|
242
|
+
.left-column {
|
|
243
|
+
@include fluid-column(3, $context: 11);
|
|
244
|
+
}
|
|
245
|
+
.main-column {
|
|
246
|
+
@include fluid-column(8, $context: 11);
|
|
247
|
+
section {
|
|
248
|
+
@include fluid-row();
|
|
249
|
+
}
|
|
250
|
+
section.intro {
|
|
251
|
+
margin: 0;
|
|
252
|
+
}
|
|
253
|
+
article {
|
|
254
|
+
@include fluid-column(5, $context: 8);
|
|
255
|
+
.float-left, .float-right { margin-bottom: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
256
|
+
.float-left { float: left; margin-right: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
257
|
+
.float-right { float: right; margin-left: fluid-width($grid-gutter-width / 2, grid-column-width(5)); }
|
|
258
|
+
img.grid-3 { @include fluid(3, $context: 5, $context-plus: -$grid-gutter-width); }
|
|
259
|
+
}
|
|
260
|
+
aside {
|
|
261
|
+
@include fluid-column(3, $context: 8);
|
|
262
|
+
.box img {
|
|
263
|
+
width: fluid-column-width(3, $context: 3, $context-plus: -$grid-gutter-width);
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
// Desktop
|
|
270
|
+
// 960px to 992px
|
|
271
|
+
// 12 columns
|
|
272
|
+
@media only screen and (min-width: 960px) {
|
|
273
|
+
.measure { background-color: green; }
|
|
274
|
+
|
|
275
|
+
header, #main, footer {
|
|
276
|
+
@include grid-page();
|
|
277
|
+
}
|
|
278
|
+
header, footer {
|
|
279
|
+
width: grid-column-width(12);
|
|
280
|
+
}
|
|
281
|
+
.left-column {
|
|
282
|
+
@include grid-column(3);
|
|
283
|
+
}
|
|
284
|
+
.main-column {
|
|
285
|
+
@include grid-column(9);
|
|
286
|
+
section {
|
|
287
|
+
@include grid-row();
|
|
288
|
+
}
|
|
289
|
+
section.intro {
|
|
290
|
+
margin: 0;
|
|
291
|
+
}
|
|
292
|
+
article {
|
|
293
|
+
@include grid-column(6);
|
|
294
|
+
.float-left, .float-right { margin-bottom:($grid-gutter-width / 2); }
|
|
295
|
+
.float-left { float: left; margin-right: ($grid-gutter-width / 2); }
|
|
296
|
+
.float-right { float: right; margin-left: ($grid-gutter-width / 2); }
|
|
297
|
+
img.grid-3 { @include grid(3); }
|
|
298
|
+
}
|
|
299
|
+
aside {
|
|
300
|
+
@include grid-column(3);
|
|
301
|
+
.box img {
|
|
302
|
+
width: grid-column-width(3);
|
|
303
|
+
}
|
|
304
|
+
}
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
// Desktop (320 and Up)
|
|
309
|
+
// 992px to 1024px
|
|
310
|
+
@media only screen and (min-width: 992px) {
|
|
311
|
+
.measure { background-color: yellow; }
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
// iPad (landscape)
|
|
315
|
+
// Kindle Fire (landscape)
|
|
316
|
+
// 1024px to 1280px
|
|
317
|
+
@media only screen and (min-width: 1024px) {
|
|
318
|
+
.measure { background-color: orange; }
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
// Android tablets (landscape)
|
|
322
|
+
// 1280px to infinity
|
|
323
|
+
@media only screen and (min-width: 1280px) {
|
|
324
|
+
.measure { background-color: red; }
|
|
325
|
+
}
|
|
326
|
+
|
|
327
|
+
// retina display
|
|
328
|
+
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min-device-pixel-ratio: 1.5) {
|
|
329
|
+
|
|
330
330
|
}
|