style-tiles 0.1.1 → 0.1.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/lib/style-tiles.rb +2 -2
- data/stylesheets/style-tiles/core/_mixins.scss +72 -0
- data/stylesheets/style-tiles/core/_structure.scss +4 -1
- data/stylesheets/style-tiles/core/_variables.scss +129 -125
- data/templates/project/html/template.html +29 -0
- data/templates/project/manifest.rb +6 -5
- data/templates/project/sass/index.scss +10 -1
- data/templates/project/sass/partials/variations/_index.scss +16 -4
- data/templates/project/sass/partials/variations/_v1.scss +4 -0
- data/templates/project/sass/partials/variations/_v2.scss +4 -0
- data/templates/project/sass/partials/variations/_v3.scss +7 -2
- data/templates/project/sass/{screen-v1.scss → v1.scss} +0 -0
- data/templates/project/sass/{screen-v2.scss → v2.scss} +0 -0
- data/templates/project/sass/{screen-v3.scss → v3.scss} +0 -0
- metadata +5 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA512:
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
data.tar.gz: e1e5d38a8f6ed2e16940e6efca801bafa7ab650cee8becaf28662dc8722b730930336d9493c5e9fe02a63f1b87438752097a32bdde218324b019aa58f8bae33a
|
|
4
|
+
metadata.gz: c040eefa0ce7f3b1693287f2b31dfec6b6fcbe6e8bc00d88c98098a62b2734e375ccfc4424d835b0e42f32201c5a623d53cf0349ebaff2e593fa1e00c326a49f
|
|
5
5
|
SHA1:
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
data.tar.gz: 13166150a00c914331d1f9443b5bca086a580446
|
|
7
|
+
metadata.gz: 0ae10a9bc343007eb59f886d2714c1d4fed67e13
|
data/lib/style-tiles.rb
CHANGED
|
@@ -17,8 +17,8 @@ Compass::Frameworks.register('style-tiles', :path => extension_path)
|
|
|
17
17
|
# a prerelease version
|
|
18
18
|
# Date is in the form of YYYY-MM-DD
|
|
19
19
|
module Style_Tiles
|
|
20
|
-
VERSION = "0.1.
|
|
21
|
-
DATE = "2013-06-
|
|
20
|
+
VERSION = "0.1.2"
|
|
21
|
+
DATE = "2013-06-24"
|
|
22
22
|
end
|
|
23
23
|
|
|
24
24
|
# This is where any custom SassScript should be placed. The functions will be
|
|
@@ -104,6 +104,15 @@
|
|
|
104
104
|
$i: $i + 1;
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
|
+
@mixin versions($show-versions) {
|
|
108
|
+
$i : 1;
|
|
109
|
+
@each $show-version in $show-versions {
|
|
110
|
+
li:nth-of-type(#{$show-version}) {
|
|
111
|
+
display: block;
|
|
112
|
+
}
|
|
113
|
+
$i: $i + 1;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
107
116
|
|
|
108
117
|
@mixin button-style($button-background-color, $button-text-color, $button-corners: false, $button-border: false, $button-font-size: false, $button-gradient: false, $button-box-shadow: false) {
|
|
109
118
|
@if $button-corners { @include border-radius($button-corners) };
|
|
@@ -128,6 +137,69 @@
|
|
|
128
137
|
@include background-size($image-width $image-height);
|
|
129
138
|
}
|
|
130
139
|
|
|
140
|
+
@mixin index-page( $index: false ) {
|
|
141
|
+
@if not $index { section:nth-of-type(3) { display: none; } }
|
|
142
|
+
@else {
|
|
143
|
+
section:nth-of-type(2) { display: none; }
|
|
144
|
+
section:nth-of-type(3) {
|
|
145
|
+
// reformat section:nth-of-type(2) & :nth-of-type(2) as %extendable?
|
|
146
|
+
clear: both;
|
|
147
|
+
padding: $standard-spacing;
|
|
148
|
+
article {
|
|
149
|
+
padding: $standard-spacing * 2;
|
|
150
|
+
width: $article-width;
|
|
151
|
+
float: left;
|
|
152
|
+
}
|
|
153
|
+
header {
|
|
154
|
+
h1 {
|
|
155
|
+
margin: $standard-spacing 0;
|
|
156
|
+
@include st-text-shadow($heading-h1-text-shadow);
|
|
157
|
+
@include bold-italic-uppercase($heading-h1-font-style);
|
|
158
|
+
@if $heading-h1-font-size { font-size:$heading-h1-font-size; }
|
|
159
|
+
@include st-font-faced($heading-h1-font-name);
|
|
160
|
+
color: $heading-h1-font-color;
|
|
161
|
+
}
|
|
162
|
+
h2 {
|
|
163
|
+
@include st-text-shadow($heading-h2-text-shadow);
|
|
164
|
+
@include bold-italic-uppercase($heading-h2-font-style);
|
|
165
|
+
@if $heading-h2-font-size { font-size:$heading-h2-font-size; }
|
|
166
|
+
@include st-font-faced($heading-h2-font-name);
|
|
167
|
+
color: $heading-h2-font-color;
|
|
168
|
+
}
|
|
169
|
+
@if $heading-h1-font-name { @include content-before-after("font: "$heading-h1-font-name, false, true) };
|
|
170
|
+
}
|
|
171
|
+
p:nth-of-type(1) {
|
|
172
|
+
display: block;
|
|
173
|
+
@include content-before-after($para-1);
|
|
174
|
+
}
|
|
175
|
+
p:nth-of-type(2) {
|
|
176
|
+
display: block;
|
|
177
|
+
@include content-before-after($para-2);
|
|
178
|
+
}
|
|
179
|
+
p:nth-of-type(3) {
|
|
180
|
+
display: block;
|
|
181
|
+
@include content-before-after($para-3);
|
|
182
|
+
}
|
|
183
|
+
p:nth-of-type(5) a {
|
|
184
|
+
@include button-style($button-background-color, $button-text-color, $button-corners, $button-border, $button-font-size, $button-gradient);
|
|
185
|
+
text-transform: capitalize;
|
|
186
|
+
&:hover, &:focus, &:active {
|
|
187
|
+
color: $button-text-color-over !important;
|
|
188
|
+
text-decoration: none;
|
|
189
|
+
background: $button-background-color-over;
|
|
190
|
+
}
|
|
191
|
+
}
|
|
192
|
+
ul {
|
|
193
|
+
li {
|
|
194
|
+
display: none;
|
|
195
|
+
}
|
|
196
|
+
@include versions($show-versions);
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
aside { display: none !important; } // !dirty - but not prodution code
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
|
|
131
203
|
// Functions
|
|
132
204
|
@function calc-em($target-px, $context) {
|
|
133
205
|
@return ($target-px / $context) * 1em;
|
|
@@ -56,7 +56,7 @@ section:nth-of-type(1) {
|
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
|
-
section:nth-of-type(2){
|
|
59
|
+
section:nth-of-type(2) {
|
|
60
60
|
clear: both;
|
|
61
61
|
padding: $standard-spacing;
|
|
62
62
|
article {
|
|
@@ -105,6 +105,9 @@ section:nth-of-type(2){
|
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
107
|
|
|
108
|
+
// display section:nth-of-type(3)
|
|
109
|
+
@include index-page($index);
|
|
110
|
+
|
|
108
111
|
aside {
|
|
109
112
|
display: block;
|
|
110
113
|
margin: $aside-margin;
|
|
@@ -7,154 +7,158 @@ $legacy-support-for-ie: false;
|
|
|
7
7
|
$experimental-support-for-microsoft: false;
|
|
8
8
|
$experimental-support-for-opera: false;
|
|
9
9
|
|
|
10
|
+
// Only the _index.scss should be the index page.
|
|
11
|
+
$index: false !default;
|
|
12
|
+
|
|
10
13
|
// Project Name and Version Header
|
|
11
|
-
$project-name: "Super Awesome Project";// You'll want to override this!
|
|
12
|
-
$version-number: "1.0" default;
|
|
13
|
-
$footer-text: '\2606\20 Designed by Rock Stars \2606'; // You'll want to override this!
|
|
14
|
+
$project-name: "Super Awesome Project" !default;// You'll want to override this!
|
|
15
|
+
$version-number: "1.0" !default;
|
|
16
|
+
$footer-text: '\2606\20 Designed by Rock Stars \2606' !default; // You'll want to override this!
|
|
17
|
+
$show-versions: 1, 2, 3 !default;
|
|
14
18
|
|
|
15
19
|
/// Global Variables
|
|
16
|
-
$standard-spacing: calc-em(10px, $base-font-size)
|
|
17
|
-
$page-width: calc-em(960px, $base-font-size)
|
|
18
|
-
$article-width: calc-em(540px, $base-font-size)
|
|
19
|
-
$aside-width: calc-em(300px, $base-font-size)
|
|
20
|
-
$inline-images: true; // inline all images so you don't need to send them with the style sheet(s)
|
|
20
|
+
$standard-spacing: calc-em(10px, $base-font-size) !default;;
|
|
21
|
+
$page-width: calc-em(960px, $base-font-size) !default;;
|
|
22
|
+
$article-width: calc-em(540px, $base-font-size) !default;;
|
|
23
|
+
$aside-width: calc-em(300px, $base-font-size) !default;;
|
|
24
|
+
$inline-images: true !default; // inline all images so you don't need to send them with the style sheet(s)
|
|
21
25
|
|
|
22
26
|
|
|
23
27
|
// Typography
|
|
24
|
-
$primary-font: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif
|
|
25
|
-
$base-font-size: 16px
|
|
26
|
-
$base-line-height:1.5em
|
|
27
|
-
$body-font-size: calc-em(14px, $base-font-size);
|
|
28
|
+
$primary-font: 'Helvetica Neue', Arial, 'Liberation Sans', FreeSans, sans-serif !default;;
|
|
29
|
+
$base-font-size: 16px !default;;
|
|
30
|
+
$base-line-height:1.5em !default;;
|
|
31
|
+
$body-font-size: calc-em(14px, $base-font-size) !default;
|
|
28
32
|
|
|
29
33
|
// @font-face fonts
|
|
30
|
-
$font-name: false;
|
|
31
|
-
$font-ttf: false;
|
|
32
|
-
$font-woff: false;
|
|
33
|
-
$font-eot: false; // we don't need this as it's not production code
|
|
34
|
-
$font-svg: false; // we don't need this either
|
|
35
|
-
$inline-fonts: true;
|
|
36
|
-
$font-weight: normal;
|
|
37
|
-
$font-style: normal;
|
|
34
|
+
$font-name: false !default;
|
|
35
|
+
$font-ttf: false !default;
|
|
36
|
+
$font-woff: false !default;
|
|
37
|
+
$font-eot: false !default; // we don't need this as it's not production code
|
|
38
|
+
$font-svg: false !default; // we don't need this either
|
|
39
|
+
$inline-fonts: true !default;
|
|
40
|
+
$font-weight: normal !default;
|
|
41
|
+
$font-style: normal !default;
|
|
38
42
|
|
|
39
43
|
/// Design Variables
|
|
40
|
-
$link-color: #00f;
|
|
44
|
+
$link-color: #00f !default;
|
|
41
45
|
|
|
42
46
|
|
|
43
47
|
// sample 5 colors and 3 textures (add figures to html for more)
|
|
44
|
-
$colors: #929ca5, #a2af45, #405b6b, #dfe1d1, #e5e5e5;
|
|
45
|
-
$textures: "concrete.png", "dark-concrete.png", "asphalt.png";
|
|
46
|
-
$adjectives: current, conservative, whimiscal, contradictory; //
|
|
47
|
-
|
|
48
|
-
$body-background-color: #efefef; // for older browsers that don't support gradients
|
|
49
|
-
$body-background-image: false; // e.g "asphalt.png"
|
|
50
|
-
$body-background-gradient-position-1: false; // e.g. top OR 45deg
|
|
51
|
-
$body-background-gradient-1: false; // rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 10%, rgba(0,0,0,0) 15%
|
|
52
|
-
$body-background-gradient-position-2: false; // e.g. right OR 0deg
|
|
53
|
-
$body-background-gradient-2: false; // $body-background-gradient-1 Or another gradient
|
|
54
|
-
$body-background-size: false; // 40px 40px OR contain
|
|
55
|
-
$body-background-repeat: repeat; // no-repeat OR repeat-x etc
|
|
56
|
-
|
|
57
|
-
$page-background-color: #f2f2f2; // for older browsers that don't support gradients or just a solid color
|
|
58
|
-
$page-background-image: false; // e.g "asphalt.png"
|
|
59
|
-
$page-background-gradient-position-1: false; // e.g. top OR 45deg
|
|
60
|
-
$page-background-gradient-1: false; // rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 10%, rgba(0,0,0,0) 15%
|
|
61
|
-
$page-background-gradient-position-2: false; // e.g. right OR 0deg
|
|
62
|
-
$page-background-gradient-2: false;
|
|
63
|
-
$page-background-size: false;
|
|
64
|
-
$page-background-repeat: repeat;
|
|
65
|
-
$page-box-shadow: false; // e.g. 5px 5px 10px rgba(0,0,0,.75), -5px 5px 10px rgba(0,0,0,.75)
|
|
66
|
-
$page-corners: false; // 0 10px
|
|
67
|
-
$page-margin: 0 auto ($standard-spacing * 4) auto; //
|
|
68
|
-
$page-text-color: #333;
|
|
48
|
+
$colors: #929ca5, #a2af45, #405b6b, #dfe1d1, #e5e5e5 !default;
|
|
49
|
+
$textures: "concrete.png", "dark-concrete.png", "asphalt.png" !default;
|
|
50
|
+
$adjectives: current, conservative, whimiscal, contradictory !default; //
|
|
51
|
+
|
|
52
|
+
$body-background-color: #efefef !default; // for older browsers that don't support gradients
|
|
53
|
+
$body-background-image: false !default; // e.g "asphalt.png"
|
|
54
|
+
$body-background-gradient-position-1: false !default; // e.g. top OR 45deg
|
|
55
|
+
$body-background-gradient-1: false !default; // rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 10%, rgba(0,0,0,0) 15%
|
|
56
|
+
$body-background-gradient-position-2: false !default; // e.g. right OR 0deg
|
|
57
|
+
$body-background-gradient-2: false !default; // $body-background-gradient-1 Or another gradient
|
|
58
|
+
$body-background-size: false !default; // 40px 40px OR contain
|
|
59
|
+
$body-background-repeat: repeat !default; // no-repeat OR repeat-x etc
|
|
60
|
+
|
|
61
|
+
$page-background-color: #f2f2f2 !default; // for older browsers that don't support gradients or just a solid color
|
|
62
|
+
$page-background-image: false !default; // e.g "asphalt.png"
|
|
63
|
+
$page-background-gradient-position-1: false !default; // e.g. top OR 45deg
|
|
64
|
+
$page-background-gradient-1: false !default; // rgba(0,0,0,.5) 0%, rgba(0,0,0,.25) 10%, rgba(0,0,0,0) 15%
|
|
65
|
+
$page-background-gradient-position-2: false !default; // e.g. right OR 0deg
|
|
66
|
+
$page-background-gradient-2: false !default;
|
|
67
|
+
$page-background-size: false !default;
|
|
68
|
+
$page-background-repeat: repeat !default;
|
|
69
|
+
$page-box-shadow: false !default; // e.g. 5px 5px 10px rgba(0,0,0,.75), -5px 5px 10px rgba(0,0,0,.75)
|
|
70
|
+
$page-corners: false !default; // 0 10px
|
|
71
|
+
$page-margin: 0 auto ($standard-spacing * 4) auto !default; //
|
|
72
|
+
$page-text-color: #333 !default;
|
|
69
73
|
|
|
70
74
|
// Logo is added as a background to a transparent image. Adjust height and width and source
|
|
71
|
-
$logo-margin: 0 $standard-spacing $standard-spacing 0; // TRBL: Top Right Bottom Left
|
|
72
|
-
$logo-float: left; // right OR none
|
|
73
|
-
$logo-file: "logos/sample-logo.png"; // e.g. "sample-logo.png"
|
|
74
|
-
$logo-box-shadow: false; // e.g. 5px 5px 10px rgba(0,0,0,.75)
|
|
75
|
-
|
|
76
|
-
$header-height: calc-em(image-height($logo-file), $base-font-size) + ($standard-spacing * 2); // allow some breathing room around the logo
|
|
77
|
-
$header-padding: $standard-spacing;
|
|
78
|
-
$header-background-color: false;
|
|
79
|
-
$header-background-image: false;
|
|
80
|
-
$header-background-gradient-position-1: false;
|
|
81
|
-
$header-background-gradient-1: false;
|
|
82
|
-
$header-background-gradient-position-2: false;
|
|
83
|
-
$header-background-gradient-2: false;
|
|
84
|
-
$header-background-size: false;
|
|
85
|
-
$header-background-repeat: repeat;
|
|
86
|
-
$header-text-color: false;
|
|
87
|
-
$header-text-align: right; // align the Project Name and Version Number text
|
|
75
|
+
$logo-margin: 0 $standard-spacing $standard-spacing 0 !default; // TRBL: Top Right Bottom Left
|
|
76
|
+
$logo-float: left !default; // right OR none
|
|
77
|
+
$logo-file: "logos/sample-logo.png" !default; // e.g. "sample-logo.png"
|
|
78
|
+
$logo-box-shadow: false !default; // e.g. 5px 5px 10px rgba(0,0,0,.75)
|
|
79
|
+
|
|
80
|
+
$header-height: calc-em(image-height($logo-file), $base-font-size) + ($standard-spacing * 2) !default; // allow some breathing room around the logo
|
|
81
|
+
$header-padding: $standard-spacing !default;
|
|
82
|
+
$header-background-color: false !default;
|
|
83
|
+
$header-background-image: false !default;
|
|
84
|
+
$header-background-gradient-position-1: false !default;
|
|
85
|
+
$header-background-gradient-1: false !default;
|
|
86
|
+
$header-background-gradient-position-2: false !default;
|
|
87
|
+
$header-background-gradient-2: false !default;
|
|
88
|
+
$header-background-size: false !default;
|
|
89
|
+
$header-background-repeat: repeat !default;
|
|
90
|
+
$header-text-color: false !default;
|
|
91
|
+
$header-text-align: right !default; // align the Project Name and Version Number text
|
|
88
92
|
|
|
89
93
|
// Project name and version font size / line-height
|
|
90
|
-
$project-name-font-size: 1em; // Override the default H1 size
|
|
91
|
-
$project-name-line-height: 1.5em;
|
|
92
|
-
$version-font-size: .9em; // Override the default H2 size
|
|
93
|
-
$version-line-height: 1em;
|
|
94
|
-
|
|
95
|
-
$heading-h1-text-shadow: false;
|
|
96
|
-
$heading-h1-font-style: false;
|
|
97
|
-
$heading-h1-font-color: none;
|
|
98
|
-
$heading-h1-font-name: false;
|
|
99
|
-
$heading-h1-font-size: false;
|
|
100
|
-
|
|
101
|
-
$heading-h2-text-shadow: false;
|
|
102
|
-
$heading-h2-font-style: false;
|
|
103
|
-
$heading-h2-font-color: none;
|
|
104
|
-
$heading-h2-font-name: false;
|
|
105
|
-
$heading-h2-font-size: false;
|
|
106
|
-
|
|
107
|
-
$main-text-shadow: false; //
|
|
108
|
-
|
|
109
|
-
$aside-margin: 0 0 $standard-spacing 0;
|
|
110
|
-
$aside-padding: $standard-spacing;
|
|
111
|
-
$aside-background-color: rgba(255,255,255,.25);
|
|
112
|
-
$aside-background-image: false;
|
|
113
|
-
$aside-background-gradient-position-1: false;
|
|
114
|
-
$aside-background-gradient-1: false;
|
|
115
|
-
$aside-background-gradient-position-2: false;
|
|
116
|
-
$aside-background-gradient-2: false;
|
|
117
|
-
$aside-background-size: false;
|
|
118
|
-
$aside-background-repeat: repeat;
|
|
119
|
-
$aside-box-shadow: none;
|
|
120
|
-
$aside-border: $standard-spacing solid rgba(255,255,255,.35);
|
|
121
|
-
$aside-border-radius: false; // 3px
|
|
122
|
-
$aside-outline: calc-em(1px, $base-font-size) solid rgba(200,200,200,.25);
|
|
123
|
-
$aside-text-color: #333;
|
|
94
|
+
$project-name-font-size: 1em !default; // Override the default H1 size
|
|
95
|
+
$project-name-line-height: 1.5em !default;
|
|
96
|
+
$version-font-size: .9em !default; // Override the default H2 size
|
|
97
|
+
$version-line-height: 1em !default;
|
|
98
|
+
|
|
99
|
+
$heading-h1-text-shadow: false !default;
|
|
100
|
+
$heading-h1-font-style: false !default;
|
|
101
|
+
$heading-h1-font-color: none !default;
|
|
102
|
+
$heading-h1-font-name: false !default;
|
|
103
|
+
$heading-h1-font-size: false !default;
|
|
104
|
+
|
|
105
|
+
$heading-h2-text-shadow: false !default;
|
|
106
|
+
$heading-h2-font-style: false !default;
|
|
107
|
+
$heading-h2-font-color: none !default;
|
|
108
|
+
$heading-h2-font-name: false !default;
|
|
109
|
+
$heading-h2-font-size: false !default;
|
|
110
|
+
|
|
111
|
+
$main-text-shadow: false !default; //
|
|
112
|
+
|
|
113
|
+
$aside-margin: 0 0 $standard-spacing 0 !default;
|
|
114
|
+
$aside-padding: $standard-spacing !default;
|
|
115
|
+
$aside-background-color: rgba(255,255,255,.25) !default;
|
|
116
|
+
$aside-background-image: false !default;
|
|
117
|
+
$aside-background-gradient-position-1: false !default;
|
|
118
|
+
$aside-background-gradient-1: false !default;
|
|
119
|
+
$aside-background-gradient-position-2: false !default;
|
|
120
|
+
$aside-background-gradient-2: false !default;
|
|
121
|
+
$aside-background-size: false !default;
|
|
122
|
+
$aside-background-repeat: repeat !default;
|
|
123
|
+
$aside-box-shadow: none !default;
|
|
124
|
+
$aside-border: $standard-spacing solid rgba(255,255,255,.35) !default;
|
|
125
|
+
$aside-border-radius: false !default; // 3px
|
|
126
|
+
$aside-outline: calc-em(1px, $base-font-size) solid rgba(200,200,200,.25) !default;
|
|
127
|
+
$aside-text-color: #333 !default;
|
|
124
128
|
|
|
125
129
|
// Figure (colors and textures boxes)
|
|
126
|
-
$figure-width: calc-em(40px, $base-font-size);
|
|
127
|
-
$figure-height: calc-em(40px, $base-font-size);
|
|
128
|
-
$texture-width: $figure-width * 2; // double the color size to show the textures better
|
|
129
|
-
$texture-height: $figure-height * 2; // same
|
|
130
|
-
$figure-border: calc-em(1px, $base-font-size) #888 solid; // only if there's a color
|
|
130
|
+
$figure-width: calc-em(40px, $base-font-size) !default;
|
|
131
|
+
$figure-height: calc-em(40px, $base-font-size) !default;
|
|
132
|
+
$texture-width: $figure-width * 2 !default; // double the color size to show the textures better
|
|
133
|
+
$texture-height: $figure-height * 2 !default; // same
|
|
134
|
+
$figure-border: calc-em(1px, $base-font-size) #888 solid !default; // only if there's a color
|
|
131
135
|
|
|
132
|
-
$figure-caption-text-size: calc-em(12px, $base-font-size); // if you want to credit eternal texture sources or add notes
|
|
136
|
+
$figure-caption-text-size: calc-em(12px, $base-font-size) !default; // if you want to credit eternal texture sources or add notes
|
|
133
137
|
|
|
134
|
-
$button-corners: calc-em(10px, $base-font-size); //
|
|
135
|
-
$button-background-color: #57068c;
|
|
138
|
+
$button-corners: calc-em(10px, $base-font-size) !default; //
|
|
139
|
+
$button-background-color: #57068c !default;
|
|
136
140
|
$button-gradient: false; // automatic gradients
|
|
137
|
-
$button-text-color: #eee;
|
|
138
|
-
$button-font-size: 1.2em;
|
|
141
|
+
$button-text-color: #eee !default;
|
|
142
|
+
$button-font-size: 1.2em !default;
|
|
139
143
|
$button-text-shadow: false; // e.g 0px 1px 1px rgba(0,0,0,.5)
|
|
140
|
-
$button-border: calc-em(1px, $base-font-size) #eee solid;
|
|
144
|
+
$button-border: calc-em(1px, $base-font-size) #eee solid !default;
|
|
141
145
|
$button-box-shadow: none; // e.g. 1px 1px 2px rgba(0,0,0,.5)
|
|
142
|
-
$button-text-color-over: adjust-lightness($button-text-color, 10%);
|
|
143
|
-
$button-background-color-over: adjust-lightness($button-background-color, 10%);
|
|
146
|
+
$button-text-color-over: adjust-lightness($button-text-color, 10%) !default;
|
|
147
|
+
$button-background-color-over: adjust-lightness($button-background-color, 10%) !default;
|
|
144
148
|
|
|
145
149
|
$footer-background-color: false ; // e.g. rgba(0,0,0,.75)
|
|
146
|
-
$footer-background-image: false;
|
|
147
|
-
$footer-background-gradient-position-1: false;
|
|
148
|
-
$footer-background-gradient-1: false;
|
|
149
|
-
$footer-background-gradient-position-2: false;
|
|
150
|
-
$footer-background-gradient-2: false;
|
|
151
|
-
$footer-background-size: false;
|
|
152
|
-
$footer-background-repeat: repeat;
|
|
153
|
-
|
|
154
|
-
$footer-text-color: rgba(255,255,255,.75);
|
|
155
|
-
$footer-text-align: right;
|
|
156
|
-
$footer-text-shadow: calc-em(-1px, $base-font-size) 0 calc-em(1px, $base-font-size) rgba(0,0,0,.5), 0 calc-em(1px, $base-font-size) calc-em(1px, $base-font-size) rgba(255,255,255,.35);
|
|
157
|
-
|
|
158
|
-
$footer-logo-file: false;
|
|
159
|
-
$footer-logo-width: calc-em(66px, $base-font-size);
|
|
160
|
-
$footer-logo-height: calc-em(24px, $base-font-size);
|
|
150
|
+
$footer-background-image: false !default;
|
|
151
|
+
$footer-background-gradient-position-1: false !default;
|
|
152
|
+
$footer-background-gradient-1: false !default;
|
|
153
|
+
$footer-background-gradient-position-2: false !default;
|
|
154
|
+
$footer-background-gradient-2: false !default;
|
|
155
|
+
$footer-background-size: false !default;
|
|
156
|
+
$footer-background-repeat: repeat !default;
|
|
157
|
+
|
|
158
|
+
$footer-text-color: rgba(255,255,255,.75) !default;
|
|
159
|
+
$footer-text-align: right !default;
|
|
160
|
+
$footer-text-shadow: calc-em(-1px, $base-font-size) 0 calc-em(1px, $base-font-size) rgba(0,0,0,.5), 0 calc-em(1px, $base-font-size) calc-em(1px, $base-font-size) rgba(255,255,255,.35) !default;
|
|
161
|
+
|
|
162
|
+
$footer-logo-file: false !default;
|
|
163
|
+
$footer-logo-width: calc-em(66px, $base-font-size) !default;
|
|
164
|
+
$footer-logo-height: calc-em(24px, $base-font-size) !default;
|
|
@@ -43,6 +43,35 @@
|
|
|
43
43
|
</p>
|
|
44
44
|
</article>
|
|
45
45
|
</section>
|
|
46
|
+
<section>
|
|
47
|
+
<article>
|
|
48
|
+
<header>
|
|
49
|
+
<hgroup>
|
|
50
|
+
<h1>Style Tiles</h1>
|
|
51
|
+
<h2>About this Project</h2>
|
|
52
|
+
</hgroup>
|
|
53
|
+
</header>
|
|
54
|
+
<p>
|
|
55
|
+
</p>
|
|
56
|
+
<h2>What are Style Tiles?</h2>
|
|
57
|
+
<p>
|
|
58
|
+
</p>
|
|
59
|
+
<h2><a href="http://styletil.es/">Learn More about Style Tiles</a></h2>
|
|
60
|
+
<p>
|
|
61
|
+
</p>
|
|
62
|
+
<ul>
|
|
63
|
+
<li><a href="v1.html">Version 1</a></li>
|
|
64
|
+
<li><a href="v2.html">Version 2</a></li>
|
|
65
|
+
<li><a href="v3.html">Version 3</a></li>
|
|
66
|
+
<li><a href="v4.html">Version 4</a></li>
|
|
67
|
+
<li><a href="v5.html">Version 5</a></li>
|
|
68
|
+
<li><a href="v6.html">Version 6</a></li>
|
|
69
|
+
<li><a href="v7.html">Version 7</a></li>
|
|
70
|
+
<li><a href="v8.html">Version 8</a></li>
|
|
71
|
+
<li><a href="v9.html">Version 9</a></li>
|
|
72
|
+
</ul>
|
|
73
|
+
</article>
|
|
74
|
+
</section>
|
|
46
75
|
<aside>
|
|
47
76
|
<h3>Colors</h3>
|
|
48
77
|
<figure>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
# Description
|
|
2
|
-
description "This builds the basic scaffolding for your
|
|
2
|
+
description "This builds the basic scaffolding for your Style Tiles project"
|
|
3
3
|
|
|
4
4
|
no_configuration_file!
|
|
5
5
|
skip_compilation!
|
|
@@ -8,9 +8,9 @@ file 'config.rb', :like => :file, :to => "config.rb"
|
|
|
8
8
|
|
|
9
9
|
# Stylesheets Import
|
|
10
10
|
file 'sass/index.scss', :like => :stylesheet, :media => 'screen, projection', :to => 'index.scss'
|
|
11
|
-
file 'sass/
|
|
12
|
-
file 'sass/
|
|
13
|
-
file 'sass/
|
|
11
|
+
file 'sass/v1.scss', :like => :stylesheet, :media => 'screen, projection', :to => 'v1.scss'
|
|
12
|
+
file 'sass/v2.scss', :like => :stylesheet, :media => 'screen, projection', :to => 'v2.scss'
|
|
13
|
+
file 'sass/v3.scss', :like => :stylesheet, :media => 'screen, projection', :to => 'v3.scss'
|
|
14
14
|
|
|
15
15
|
# Partials
|
|
16
16
|
file 'sass/partials/variations/_index.scss', :like => :stylesheet, :to => 'partials/variations/_index.scss'
|
|
@@ -29,7 +29,8 @@ file 'images/textures/denim.jpg', :like => :image, :to => 'textures/denim.jpg'
|
|
|
29
29
|
file 'images/textures/scratched-metal.png', :like => :image, :to => 'textures/scratched-metal.png'
|
|
30
30
|
file 'images/textures/scratched-metal2.png', :like => :image, :to => 'textures/scratched-metal2.png'
|
|
31
31
|
|
|
32
|
-
# Font Import
|
|
32
|
+
# Font Import
|
|
33
|
+
# Note: Using :font put the files in stylesheets/fonts despite setting fonts_dir
|
|
33
34
|
file "fonts/DroidSerif/DroidSerif-Bold-webfont.eot", :like => :file, :to => "fonts/DroidSerif/DroidSerif-Bold-webfont.eot"
|
|
34
35
|
file "fonts/DroidSerif/DroidSerif-Bold-webfont.svg", :like => :file, :to => "fonts/DroidSerif/DroidSerif-Bold-webfont.svg"
|
|
35
36
|
file "fonts/DroidSerif/DroidSerif-Bold-webfont.ttf", :like => :file, :to => "fonts/DroidSerif/DroidSerif-Bold-webfont.ttf"
|
|
@@ -8,4 +8,13 @@
|
|
|
8
8
|
@import "partials/variations/_index";
|
|
9
9
|
|
|
10
10
|
// import the Style Tiles css structure
|
|
11
|
-
@import "style-tiles/core/_structure";
|
|
11
|
+
@import "style-tiles/core/_structure";
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
//section:nth-of-type(2) {
|
|
16
|
+
// display: none;
|
|
17
|
+
//}
|
|
18
|
+
//section:nth-of-type(3) {
|
|
19
|
+
// display: block;
|
|
20
|
+
//}
|
|
@@ -1,5 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
//////////////////////////////
|
|
2
|
+
// Full list of all available variables: https://github.com/alienresident/style-tiles/blob/master/stylesheets/style-tiles/core/_variables.scss
|
|
3
|
+
//////////////////////////////
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
// Display different Content and list of links to versions on Index page (hides section 2 and dispalys section 3)
|
|
7
|
+
$index: true;
|
|
8
|
+
|
|
9
|
+
// Control the display of versions links on the homepage
|
|
10
|
+
$show-versions: 1, 2, 3;
|
|
11
|
+
// Possible values as is (1 thru 9) change template.html for more
|
|
12
|
+
// $show-versions: 1, 2, 3, 4, 5, 6, 7, 8, 9;
|
|
2
13
|
|
|
14
|
+
// Project Name and Version Header
|
|
3
15
|
$project-name: "Sassy Style Tiles";
|
|
4
16
|
$version-number: "1.0, 2.0, 3.0";
|
|
5
17
|
|
|
@@ -7,7 +19,8 @@ $para-1: $project-name "! HTML & CSS style tiles powered by SASS and Compass.";
|
|
|
7
19
|
|
|
8
20
|
$para-2: "Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. Style tiles are for when a moodboard is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining layout.";
|
|
9
21
|
|
|
10
|
-
$para-3:"View the styles tiles:";
|
|
22
|
+
$para-3:"View the styles tiles:";
|
|
23
|
+
|
|
11
24
|
|
|
12
25
|
/// Global Variables
|
|
13
26
|
$standard-spacing: calc-em(20px, $base-font-size);
|
|
@@ -29,5 +42,4 @@ $main-text-shadow: 0 calc-em(1px, $base-font-size) calc-em(1px, $base-font-size)
|
|
|
29
42
|
|
|
30
43
|
$footer-background-color: rgba(#a2af45, 1);
|
|
31
44
|
$footer-text-color: rgba($link-color,.75);
|
|
32
|
-
$footer-background-image: false;
|
|
33
|
-
|
|
45
|
+
$footer-background-image: false;
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
//////////////////////////////
|
|
2
|
+
// Full list of all available variables: https://github.com/alienresident/style-tiles/blob/master/stylesheets/style-tiles/core/_variables.scss
|
|
3
|
+
//////////////////////////////
|
|
4
|
+
|
|
1
5
|
// Project Name and Version Header
|
|
2
6
|
$project-name: "Sassy Style Tiles";
|
|
3
7
|
$version-number: "1.0";
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
//////////////////////////////
|
|
2
|
+
// Full list of all available variables: https://github.com/alienresident/style-tiles/blob/master/stylesheets/style-tiles/core/_variables.scss
|
|
3
|
+
//////////////////////////////
|
|
4
|
+
|
|
1
5
|
// Project Name and Version Header
|
|
2
6
|
$version-number: "2.0";
|
|
3
7
|
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
//////////////////////////////
|
|
2
|
+
// Full list of all available variables: https://github.com/alienresident/style-tiles/blob/master/stylesheets/style-tiles/core/_variables.scss
|
|
3
|
+
//////////////////////////////
|
|
4
|
+
|
|
5
|
+
// Project Name and Version Header
|
|
6
|
+
$project-name: "Grey Boxes: 1996";
|
|
7
|
+
$version-number: "3.0.1";
|
|
3
8
|
|
|
4
9
|
$footer-text: '\2752\20 Designed by Grey Boxes \2751'; // ❒ Designed by Grey Boxes ❑
|
|
5
10
|
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: style-tiles
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.2
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Mark Reilly
|
|
@@ -9,7 +9,7 @@ autorequire:
|
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
11
|
|
|
12
|
-
date: 2013-06-
|
|
12
|
+
date: 2013-06-24 00:00:00 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: sass
|
|
@@ -92,9 +92,9 @@ files:
|
|
|
92
92
|
- templates/project/sass/partials/variations/_v1.scss
|
|
93
93
|
- templates/project/sass/partials/variations/_v2.scss
|
|
94
94
|
- templates/project/sass/partials/variations/_v3.scss
|
|
95
|
-
- templates/project/sass/
|
|
96
|
-
- templates/project/sass/
|
|
97
|
-
- templates/project/sass/
|
|
95
|
+
- templates/project/sass/v1.scss
|
|
96
|
+
- templates/project/sass/v2.scss
|
|
97
|
+
- templates/project/sass/v3.scss
|
|
98
98
|
homepage: http://alienresident.net
|
|
99
99
|
licenses: []
|
|
100
100
|
|