style-tiles 0.1.1 → 0.1.2
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.
- 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
|
|