compass-flex-box 0.3 → 1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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