compass-flex-box 0.3 → 1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (3) hide show
  1. data/templates/example/compass-flex-box.html +14 -9
  2. data/templates/example/compass-flex-box.scss +35 -148
  3. metadata +4 -4
data/templates/example/compass-flex-box.html CHANGED
@@ -9,15 +9,15 @@
9
9
  <link rel="stylesheet" href="stylesheets/compass-flex-box.css">
10
10
  </head>
11
11
  <body>
12
- <h1>FLEX BOX</h1>
13
- <h2>Common Layouts</h2>
14
- <h3>Horizontally &amp; Vertically Centered Box</h3>
15
- <p>Hover to change height & width</p>
12
+ <h1>Compass Flexbox</h1>
13
+ <p></p>
14
+ <h2>Horizontally &amp; Vertically Centered Box</h2>
15
+ <p>Justify-content, the CSS property that launched a thousand blog posts</p>
16
16
  <div class="centered-box-container">
17
17
  <div class="centered-box">HOLY SHIT</div>
18
18
  </div>
19
- <h3>Nav</h3>
20
- <p>One item fills all remaining space</p>
19
+ <h2>Nav</h2>
20
+ <p>One child item can be set up "fill" all remaining space in a container</p>
21
21
  <div class="flex-nav">
22
22
  <div class="flex-nav-item">Home</div>
23
23
  <div class="flex-nav-item">Shop</div>
@@ -27,8 +27,9 @@
27
27
  <div class="flex-nav-item">Cart</div>
28
28
  <div class="flex-nav-item">Join</div>
29
29
  </div>
30
- <h3>Holy Grail</h3>
31
- <h4>Desktop</h4>
30
+ <h2>Holy Grail Layout</h2>
31
+ <p>Flexbox finally gives use source-order independence</p>
32
+ <h3>Desktop</h3>
32
33
  <div class="holy-grail">
33
34
  <header>Header</header>
34
35
  <main class="holy-grail-body">
@@ -38,7 +39,7 @@
38
39
  </main>
39
40
  <footer>Footer</footer>
40
41
  </div>
41
- <h4>Mobile (Same Markup)</h4>
42
+ <h3>Mobile (Same Markup)</h3>
42
43
  <div class="holy-grail is-mobile">
43
44
  <header>Header</header>
44
45
  <main class="holy-grail-body">
@@ -48,5 +49,9 @@
48
49
  </main>
49
50
  <footer>Footer</footer>
50
51
  </div>
52
+ <aside>
53
+ <a href="https://github.com/timhettler/compass-flex-box"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png" alt="Fork me on GitHub"></a>
54
+ </aside>
55
+ <script src="javascripts/libs/prism.js"></script>
51
56
  </body>
52
57
  </html>
data/templates/example/compass-flex-box.scss CHANGED
@@ -2,6 +2,8 @@
2
2
  @import "compass/css3/box-sizing";
3
3
  @import "compass/css3/transition";
4
4
 
5
+ @import "libs/prism";
6
+
5
7
  body {
6
8
  font-family: Helvetica;
7
9
  }
@@ -13,151 +15,36 @@ body {
13
15
  width: 100%;
14
16
  }
15
17
 
16
- .flex {
17
- @extend %flex-container;
18
- }
19
-
20
- .flex--justify-content--flex-start {
21
- @extend %flex-container;
22
- @include justify-content(flex-start);
23
- }
18
+ $flex-item-dimension: 220px;
24
19
 
25
- .flex--justify-content--center {
26
- @extend %flex-container;
20
+ .flex-item {
21
+ @include display-flex();
27
22
  @include justify-content(center);
28
- }
29
-
30
- .flex--justify-content--flex-end {
31
- @extend %flex-container;
32
- @include justify-content(flex-end);
33
- }
34
-
35
- .flex--justify-content--space-between {
36
- @extend %flex-container;
37
- @include justify-content(space-between);
38
- }
39
-
40
- .flex--justify-content--space-around {
41
- @extend %flex-container;
42
- @include justify-content(space-around);
43
- }
44
-
45
- %flex-container--align-items {
46
- @extend %flex-container;
47
- @include justify-content(space-around);
48
- }
49
-
50
- .flex--align-items--flex-start {
51
- @extend %flex-container--align-items;
52
- @include align-items(flex-start);
53
- }
54
-
55
- .flex--align-items--center {
56
- @extend %flex-container--align-items;
57
23
  @include align-items(center);
24
+ background-color: hotpink;
25
+ color: white;
26
+ height: $flex-item-dimension;
27
+ text-align: center;
28
+ width: $flex-item-dimension;
58
29
  }
59
30
 
60
- .flex--align-items--flex-end {
61
- @extend %flex-container--align-items;
62
- @include align-items(flex-end);
63
- }
64
-
65
- .flex--align-items--baseline {
66
- @extend %flex-container--align-items;
67
- @include align-items(baseline);
68
-
69
- > .flex-item:first-child {
70
- height: 100px;
71
- line-height: 100px;
72
- }
73
- }
74
-
75
- .flex--align-items--stretch {
76
- @extend %flex-container--align-items;
77
- @include align-items(stretch);
78
- }
79
-
80
- .flex--align-self {
81
- @extend %flex-container;
82
- @include justify-content(space-around);
83
-
84
- > .flex-item--auto {
85
- @extend .flex-item;
86
- @include align-self(auto);
87
- }
88
-
89
- > .flex-item--flex-start {
90
- @extend .flex-item;
91
- @include align-self(flex-start);
92
- }
93
-
94
- > .flex-item--center {
95
- @extend .flex-item;
96
- @include align-self(center);
97
- }
98
-
99
- > .flex-item--flex-end {
100
- @extend .flex-item;
101
- @include align-self(flex-end);
102
- }
103
-
104
- > .flex-item--baseline {
105
- @extend .flex-item;
106
- @include align-self(baseline);
107
- }
108
-
109
- > .flex-item--stretch {
110
- @extend .flex-item;
111
- @include align-self(stretch);
112
- }
113
- }
114
-
115
- .flex--flex-direction--row {
116
- @extend %flex-container;
117
- @include flex-direction(row);
118
- }
119
-
120
- .flex--flex-direction--row-reverse {
121
- @extend %flex-container;
122
- @include flex-direction(row-reverse);
123
- }
124
-
125
- .flex--flex-direction--column {
126
- @extend %flex-container;
127
- @include flex-direction(column);
128
- }
129
-
130
- .flex--flex-direction--column-reverse {
131
- @extend %flex-container;
132
- @include flex-direction(column-reverse);
133
- }
134
-
135
- .flex--flex-wrap--nowrap {
136
- @extend %flex-container;
137
- @include flex-wrap(nowrap);
138
- }
139
-
140
- .flex--flex-wrap--wrap {
141
- @extend %flex-container;
142
- @include flex-wrap(wrap);
31
+ .code-comparison {
32
+ @include display-flex();
33
+ margin: 1.5em 0;
34
+ width: 100%;
143
35
  }
144
36
 
145
- .flex--flex-wrap--wrap-reverse {
146
- @extend %flex-container;
147
- @include flex-wrap(wrap-reverse);
148
- }
37
+ .code-comparison--child {
38
+ @include flex(1);
39
+ min-height: 100px;
149
40
 
150
- $flex-item-dimension: 220px;
41
+ &:nth-child(1) {
42
+ margin-right: 5px;
43
+ }
151
44
 
152
- .flex-item {
153
- @include display-flex();
154
- @include justify-content(center);
155
- @include align-items(center);
156
- background-color: hotpink;
157
- color: white;
158
- height: $flex-item-dimension;
159
- text-align: center;
160
- width: $flex-item-dimension;
45
+ &:nth-child(2) {
46
+ margin-left: 5px;
47
+ }
161
48
  }
162
49
 
163
50
  // Centered Box
@@ -196,8 +83,8 @@ $holy-grail-margin: 5px;
196
83
  @include display-flex();
197
84
  @include flex-direction(column);
198
85
  margin: 0 auto;
199
- width: 800px;
200
86
  text-align: center;
87
+ width: 100%;
201
88
 
202
89
  &.is-mobile {
203
90
  max-width: 320px;
@@ -250,22 +137,22 @@ $holy-grail-margin: 5px;
250
137
 
251
138
  // Nav
252
139
 
253
- %flex-nav-item {
254
- @include align-items(center);
255
- @include display-flex();
256
- @include justify-content(center);
257
- background-color: #ccc;
258
- border: {
259
- left: 1px solid #999;
260
- };
261
- padding: 5px 10px;
262
- }
263
-
264
140
  .flex-nav {
265
141
  @include display-flex();
266
142
  width: 100%;
267
143
  }
268
144
 
145
+ %flex-nav-item {
146
+ @include align-items(center);
147
+ @include display-flex();
148
+ @include justify-content(center);
149
+ background-color: #ccc;
150
+ border: {
151
+ left: 1px solid #999;
152
+ };
153
+ padding: 5px 10px;
154
+ }
155
+
269
156
  .flex-nav-item {
270
157
  @extend %flex-nav-item;
271
158
 
metadata CHANGED
@@ -1,12 +1,12 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: compass-flex-box
3
3
  version: !ruby/object:Gem::Version
4
- hash: 13
4
+ hash: 15
5
5
  prerelease:
6
6
  segments:
7
+ - 1
7
8
  - 0
8
- - 3
9
- version: "0.3"
9
+ version: "1.0"
10
10
  platform: ruby
11
11
  authors:
12
12
  - Tim Hettler
@@ -14,7 +14,7 @@ autorequire:
14
14
  bindir: bin
15
15
  cert_chain: []
16
16
 
17
- date: 2013-06-07 00:00:00 Z
17
+ date: 2013-06-10 00:00:00 Z
18
18
  dependencies:
19
19
  - !ruby/object:Gem::Dependency
20
20
  name: sass