-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path09-grids-and-responsive.scss
97 lines (71 loc) · 2.96 KB
/
09-grids-and-responsive.scss
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
// GRIDS, FRAMEWORKS AND RESPONSIVE LAYOUT
// Most existing grid frameworks have a few problems:
// - using non-semantic classes (i.e. span1, span2)
// - rigid in the width and number of columns
// - most still use 960px max-width (some exceptions: 1140css, Twitter Bootstrap...)
// My practices with sass:
// - grid functions or mixins
// - responsive layout using selector queries
// EXAMPLE 1: SIMPLEST GRID FUNCTION
// =================================================
// Formula: width = (column width × span) + (gutter width × (span – 1))
// Blueprint CSS framework: http://www.blueprintcss.org/
$columns: 24;
$grid-columns-width: 30px;
$grid-gutter-width: 10px;
@mixin span($columns, $margin-right: true) {
width: ($grid-columns-width * $columns) + ($grid-gutter-width * ($columns - 1));
float: left;
@if $margin_right {
margin-right: $grid-gutter-width; }
@else {
margin-right: 0;
}
}
.container { @include span(24, false); margin: 0 auto; }
.main { @include span(11); }
// EXAMPLE 2: RESPONSIVE GRID
// =================================================
// Sass’ support for basic math expressions help make it much easier to craft adaptive fluid-width layouts.
// Ref: Responsive Web Design by Ethan Marcotte, http://www.abookapart.com/products/responsive-web-design
// Ref: http://thesassway.com/advanced/pure-sass-functions
// target / context = result
@function calc-em($desired-size, $context) {
@return ($desired-size / $context) * 1em
}
// so for example if body font-size is 100%, which equates to 16px
// and we want our target font-size to be 24px
h1 { font-size: calc-em(24, 16); } // => 1.5em
// or for example to get a flexible grid layout
@function calc-percent($desired-size, $context) {
@return percentage($desired-size / $context)
}
.container { width: 90%; margin: 0 auto; } // => will center the .container in the browser window
.main { width: calc-percent(900, 960); } // => 93.75%
// EXAMPLE 3: Bourbon Neat
// =================================================
// Ref: http://thoughtbot.com/neat/
// includes mixins for pad, shift, media queries breakpoints...
// HTML Markup:
<body>
<section class="blog">
<aside></aside>
<article></article>
</section>
</body>
// SASS:
section.blog { @include outer-container;
aside { @include span-columns(4); }
article { @include span-columns(8); }
}
// EXAMPLE 4: 1140px CSS Grid System
// =================================================
// Ref: http://cssgrid.net/
// Credit: Max Wheeler [@makenosound], IceLab [http://icelab.com.au/]
// Flexi-grid addaption: https://gist.github.com/3889831
$eleven40-grid-width: 4.85% !default; // The width of a column
$eleven40-grid-margin: 3.8% !default; // The amount of margin between columns
// Function to calculate width in context
@function eleven40-span($columns, $parent: 12) {
@return ($eleven40-grid-width * $columns + $eleven40-grid-margin * ($columns - 1)) / ($eleven40-grid-width * $parent + $eleven40-grid-margin * ($parent - 1)) * 100%;
}