framous 0.2.5 → 0.3
Sign up to get free protection for your applications and to get access to all the features.
- data/CHANGELOG.mkdn +4 -0
- data/README.md +2 -21
- data/lib/framous.rb +0 -1
- data/templates/project/_settings.scss +92 -0
- data/templates/project/index.html +18 -18
- data/templates/project/manifest.rb +7 -9
- data/templates/project/screen.scss +3 -63
- metadata +20 -41
- data/stylesheets/_framous.scss +0 -13
- data/stylesheets/framous/base/_forms.scss +0 -128
- data/stylesheets/framous/base/_framous-base.scss +0 -11
- data/stylesheets/framous/base/_icons.scss +0 -27
- data/stylesheets/framous/base/_modular-scale.scss +0 -220
- data/stylesheets/framous/base/_settings.scss +0 -70
- data/stylesheets/framous/base/_table.scss +0 -120
- data/stylesheets/framous/base/_tables.scss +0 -120
- data/stylesheets/framous/base/_typography.scss +0 -213
- data/stylesheets/framous/grid/_framous-grid.scss +0 -9
- data/stylesheets/framous/grid/_functions.scss +0 -39
- data/stylesheets/framous/grid/_grid.scss +0 -201
- data/stylesheets/framous/grid/_settings.scss +0 -42
- data/stylesheets/framous/mixins/_framous-mixins.scss +0 -9
- data/stylesheets/framous/mixins/_hidpi-media-query.scss +0 -22
- data/stylesheets/framous/mixins/_image-rendering.scss +0 -17
- data/stylesheets/framous/mixins/_linear-gradient.scss +0 -47
- data/stylesheets/framous/mixins/_position.scss +0 -46
- data/templates/project/_base.scss +0 -83
- data/templates/project/_print.scss +0 -21
- data/templates/project/_reset.scss +0 -410
- data/templates/project/sample.html +0 -421
@@ -1,27 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Icons.scss
|
3
|
-
// Ligature Symbols
|
4
|
-
//
|
5
|
-
|
6
|
-
@font-face {
|
7
|
-
font-family: 'LigatureSymbols';
|
8
|
-
src: url('http://resources.alechance.com/fonts/ligaturesymbols/LigatureSymbols-2.07.eot');
|
9
|
-
src: url('http://resources.alechance.com/fonts/ligaturesymbols/LigatureSymbols-2.07.eot?#iefix') format('embedded-opentype'),
|
10
|
-
url('http://resources.alechance.com/fonts/ligaturesymbols/LigatureSymbols-2.07.woff') format('woff'),
|
11
|
-
url('http://resources.alechance.com/fonts/ligaturesymbols/LigatureSymbols-2.07.ttf') format('truetype'),
|
12
|
-
url('http://resources.alechance.com/fonts/ligaturesymbols/LigatureSymbols-2.07.svg#LigatureSymbols') format('svg');
|
13
|
-
font-weight: normal;
|
14
|
-
font-style: normal;
|
15
|
-
}
|
16
|
-
|
17
|
-
.lsf {
|
18
|
-
font-size: 100%;
|
19
|
-
font-family: 'LigatureSymbols';
|
20
|
-
}
|
21
|
-
|
22
|
-
.lsf-icon:before {
|
23
|
-
content: attr(title);
|
24
|
-
margin-right: 0.3em;
|
25
|
-
font-size: 130%;
|
26
|
-
font-family: 'LigatureSymbols';
|
27
|
-
}
|
@@ -1,220 +0,0 @@
|
|
1
|
-
// SASSY MODULAR-SCALE
|
2
|
-
// https://github.com/scottkellum/modular-scale
|
3
|
-
|
4
|
-
// Defaults
|
5
|
-
$ratio: golden_ratio() !default
|
6
|
-
$base-size: 16px !default
|
7
|
-
$round_pixels: true !default
|
8
|
-
|
9
|
-
// Modular Scale function
|
10
|
-
@function modular-scale($multiple, $base-size: $base-size, $ratio: $ratio, $round_pixels: $round_pixels)
|
11
|
-
// return the $base-size if $multiple is zero
|
12
|
-
@if $multiple == 0
|
13
|
-
@if type-of($base-size) == 'list'
|
14
|
-
$base-size: sort_list($base-size)
|
15
|
-
@return nth($base-size, 1)
|
16
|
-
// return just the simple $base-size value if it's not a list
|
17
|
-
@return $base-size
|
18
|
-
|
19
|
-
// if multiple base-sizes are passed in as a list
|
20
|
-
// and multiple ratios are passed in as a list
|
21
|
-
// calculate values in using each base-size / ratio combination
|
22
|
-
@if type-of($base-size) == 'list' and type-of($ratio) == 'list'
|
23
|
-
@if unit(ms-multibase-multiratio($multiple, $base-size, $ratio)) == 'px' and $round_pixels == true
|
24
|
-
@return round(ms-multibase-multiratio($multiple, $base-size, $ratio))
|
25
|
-
@return ms-multibase-multiratio($multiple, $base-size, $ratio)
|
26
|
-
|
27
|
-
// if multiple base-sizes are passed in as a list
|
28
|
-
// calculate values in using each base-size
|
29
|
-
@if type-of($base-size) == 'list' and type-of($ratio) == 'number'
|
30
|
-
@if unit(ms-multibase($multiple, $base-size, $ratio)) == 'px' and $round_pixels == true
|
31
|
-
@return round(ms-multibase($multiple, $base-size, $ratio))
|
32
|
-
@return ms-multibase($multiple, $base-size, $ratio)
|
33
|
-
|
34
|
-
// if multiple ratios are passed in as a list
|
35
|
-
// calculate values in using each ratio
|
36
|
-
@if type-of($base-size) == 'number' and type-of($ratio) == 'list'
|
37
|
-
@if unit(ms-multiratio($multiple, $base-size, $ratio)) == 'px' and $round_pixels == true
|
38
|
-
@return round(ms-multiratio($multiple, $base-size, $ratio))
|
39
|
-
@return ms-multiratio($multiple, $base-size, $ratio)
|
40
|
-
|
41
|
-
// If there are no lists just run the simple function
|
42
|
-
@if unit(power($ratio, $multiple) * $base-size) == 'px' and $round_pixels == true
|
43
|
-
@return round(power($ratio, $multiple) * $base-size)
|
44
|
-
@return power($ratio, $multiple) * $base-size
|
45
|
-
|
46
|
-
|
47
|
-
// calculate values in using each base-size / ratio combination
|
48
|
-
@function ms-multibase-multiratio($multiple, $base-size, $ratio)
|
49
|
-
// start with an empty list to place all values in
|
50
|
-
$scale-values: ()
|
51
|
-
// make sure base sizes are in ascending order
|
52
|
-
$base-size: sort_list($base-size)
|
53
|
-
// take each base-size in turn
|
54
|
-
$k: 1
|
55
|
-
@while $k <= length($base-size)
|
56
|
-
// add each $base-size to the list except the first
|
57
|
-
@if $k > 1
|
58
|
-
$scale-values: append($scale-values, nth($base-size, $k))
|
59
|
-
// take each ratio in turn
|
60
|
-
$j: 1
|
61
|
-
@while $j <= length($ratio)
|
62
|
-
// reset $modular-scale for each set
|
63
|
-
$modular-scale: nth($base-size, $k)
|
64
|
-
// do the scale for each base-size using this ratio
|
65
|
-
@if $multiple > 0
|
66
|
-
// up $multiple times
|
67
|
-
// and add the result to $scale-values
|
68
|
-
@for $i from 1 through $multiple
|
69
|
-
$modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k)
|
70
|
-
$scale-values: append($scale-values, $modular-scale)
|
71
|
-
// and down until the value is lower than the lowest $base-size
|
72
|
-
// and add the result to $scale-values
|
73
|
-
$i: -1
|
74
|
-
$modular-scale: nth($base-size, $k)
|
75
|
-
@while $modular-scale >= nth($base-size, 1)
|
76
|
-
$modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k)
|
77
|
-
$scale-values: append($scale-values, $modular-scale)
|
78
|
-
$i: $i - 1
|
79
|
-
@if $multiple < 0
|
80
|
-
// do the scale down for each set to below 1px
|
81
|
-
$i: 0
|
82
|
-
$modular-scale: nth($base-size, $k)
|
83
|
-
@while $i >= $multiple
|
84
|
-
$modular-scale: power(nth($ratio, $j), $i) * nth($base-size, $k)
|
85
|
-
$scale-values: append($scale-values, $modular-scale)
|
86
|
-
$i: $i - 1
|
87
|
-
$j: $j + 1
|
88
|
-
$k: $k + 1
|
89
|
-
// return trimmed and sorted final list
|
90
|
-
@return trim-sort($multiple, $scale-values, $base-size)
|
91
|
-
|
92
|
-
|
93
|
-
// calculate values in using each base-size
|
94
|
-
@function ms-multibase($multiple, $base-size, $ratio)
|
95
|
-
// start with an empty list to place all values in
|
96
|
-
$scale-values: ()
|
97
|
-
// make sure base sizes are in ascending order
|
98
|
-
$base-size: sort_list($base-size)
|
99
|
-
// take each base-size in turn
|
100
|
-
$k: 1
|
101
|
-
@while $k <= length($base-size)
|
102
|
-
// add each $base-size to the list except the first
|
103
|
-
@if $k > 1
|
104
|
-
$scale-values: append($scale-values, nth($base-size, $k))
|
105
|
-
// reset $modular-scale for each set
|
106
|
-
$modular-scale: nth($base-size, $k)
|
107
|
-
// do the scale for each base-size using this ratio
|
108
|
-
@if $multiple > 0
|
109
|
-
// up $multiple times
|
110
|
-
// and add the result to $scale-values
|
111
|
-
@for $i from 1 through $multiple
|
112
|
-
$modular-scale: power($ratio, $i) * nth($base-size, $k)
|
113
|
-
$scale-values: append($scale-values, $modular-scale)
|
114
|
-
// and down until the value is lower than the lowest $base-size
|
115
|
-
// and add the result to $scale-values
|
116
|
-
$i: -1
|
117
|
-
$modular-scale: nth($base-size, $k)
|
118
|
-
@while $modular-scale >= nth($base-size, 1)
|
119
|
-
$modular-scale: power($ratio, $i) * nth($base-size, $k)
|
120
|
-
$scale-values: append($scale-values, $modular-scale)
|
121
|
-
$i: $i - 1
|
122
|
-
@if $multiple < 0
|
123
|
-
// do the scale down for each set to below 1px
|
124
|
-
$i: 0
|
125
|
-
$modular-scale: nth($base-size, $k)
|
126
|
-
@while $i >= $multiple
|
127
|
-
$modular-scale: power($ratio, $i) * nth($base-size, $k)
|
128
|
-
$scale-values: append($scale-values, $modular-scale)
|
129
|
-
$i: $i - 1
|
130
|
-
$k: $k + 1
|
131
|
-
// return trimmed and sorted final list
|
132
|
-
@return trim-sort($multiple, $scale-values, $base-size)
|
133
|
-
|
134
|
-
|
135
|
-
// calculate values in using each ratio
|
136
|
-
@function ms-multiratio($multiple, $base-size, $ratio)
|
137
|
-
// start with an empty list to place all values in
|
138
|
-
$scale-values: ()
|
139
|
-
// If $multiple is a positive integer (up the scale)
|
140
|
-
@if $multiple > 0
|
141
|
-
// take each ratio in turn
|
142
|
-
$j: 1
|
143
|
-
@while $j <= length($ratio)
|
144
|
-
// reset $modular-scale for each set
|
145
|
-
$modular-scale: $base-size
|
146
|
-
// do the scale using this ratio thru the multiple, and add the result to $scale-values
|
147
|
-
@for $i from 1 through $multiple
|
148
|
-
$modular-scale: power(nth($ratio, $j), $i) * $base-size
|
149
|
-
$scale-values: append($scale-values, $modular-scale)
|
150
|
-
$j: $j + 1
|
151
|
-
// sort acsending
|
152
|
-
$scale-values: sort_list($scale-values)
|
153
|
-
// return the final value using the laced list
|
154
|
-
@return nth($scale-values, $multiple)
|
155
|
-
// If $multiple is a negative integer (down the scale)
|
156
|
-
@if $multiple < 0
|
157
|
-
// take each ratio in turn
|
158
|
-
$j: 1
|
159
|
-
@while $j <= length($ratio)
|
160
|
-
// reset $modular-scale for each set
|
161
|
-
$modular-scale: $base-size
|
162
|
-
// do the scale using this ratio thru the multiple, and add the result to $scale-values
|
163
|
-
@for $i from 1 through ($multiple * -1)
|
164
|
-
$modular-scale: power(nth($ratio, $j), -$i) * $base-size
|
165
|
-
$scale-values: append($scale-values, $modular-scale)
|
166
|
-
$j: $j + 1
|
167
|
-
// sort decending
|
168
|
-
$scale-values: reverse_list(sort_list($scale-values))
|
169
|
-
// return the final value using the laced list
|
170
|
-
@return nth($scale-values, $multiple * -1)
|
171
|
-
|
172
|
-
|
173
|
-
// trim and sort the final list
|
174
|
-
@function trim-sort($multiple, $scale-values, $base-size)
|
175
|
-
@if $multiple > 0
|
176
|
-
// trim list so we can count from the lowest $base-size
|
177
|
-
$scale-values: trim_list($scale-values, nth($base-size, 1), true)
|
178
|
-
// sort acsending
|
179
|
-
$scale-values: sort_list($scale-values)
|
180
|
-
// return the final value using the laced list
|
181
|
-
@return nth($scale-values, $multiple)
|
182
|
-
@else
|
183
|
-
// trim list so we can count from the lowest $base-size
|
184
|
-
$scale-values: trim_list($scale-values, nth($base-size, 1), false)
|
185
|
-
// sort acsending
|
186
|
-
$scale-values: reverse_list(sort_list($scale-values))
|
187
|
-
// return the final value using the laced list
|
188
|
-
@return nth($scale-values, -$multiple)
|
189
|
-
|
190
|
-
|
191
|
-
/////////////////////////////////////////////////////////////////////////
|
192
|
-
|
193
|
-
// alias for golden_ratio()
|
194
|
-
@function golden()
|
195
|
-
@return golden_ratio()
|
196
|
-
|
197
|
-
// Shortcut
|
198
|
-
@function ms($args...)
|
199
|
-
// Return the value from the Modular Scale function
|
200
|
-
@return modular-scale($args...)
|
201
|
-
|
202
|
-
// Write Modular Scale List
|
203
|
-
@function modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
|
204
|
-
$ms-list: unquote("MS-LIST:")
|
205
|
-
@for $i from $start through $finish
|
206
|
-
$ms-list: append($ms-list, ms($i, $base-size, $ratio))
|
207
|
-
@return $ms-list
|
208
|
-
|
209
|
-
@function ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
|
210
|
-
@return modular-scale-list($start, $finish, $base-size, $ratio)
|
211
|
-
|
212
|
-
=modular-scale-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
|
213
|
-
@debug modular-scale-list($start, $finish, $base-size, $ratio)
|
214
|
-
|
215
|
-
=ms-list($start: 0, $finish: 20, $base-size: $base-size, $ratio: $ratio)
|
216
|
-
@debug modular-scale-list($start, $finish, $base-size, $ratio)
|
217
|
-
|
218
|
-
|
219
|
-
// Other libraries can easily query if this function is avalible
|
220
|
-
$modular-scale-loaded: true
|
@@ -1,70 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Settings.scss
|
3
|
-
//
|
4
|
-
|
5
|
-
// Text Direction Settings
|
6
|
-
|
7
|
-
$text-direction: ltr !default;
|
8
|
-
$default-float: left !default;
|
9
|
-
$default-opposite: right !default;
|
10
|
-
|
11
|
-
@if $text-direction == ltr {
|
12
|
-
$default-float: left;
|
13
|
-
$default-opposite: right;
|
14
|
-
} @else {
|
15
|
-
$default-float: right;
|
16
|
-
$default-opposite: left;
|
17
|
-
}
|
18
|
-
|
19
|
-
// Colors Settings
|
20
|
-
// Branding Colors
|
21
|
-
|
22
|
-
$white-set: #fff !default;
|
23
|
-
$blue-set: #174374 !default;
|
24
|
-
$grey-set: #808080 !default;
|
25
|
-
$grey-dark-set: #333 !default;
|
26
|
-
$black-set: #000 !default;
|
27
|
-
|
28
|
-
$background-body-color: $white-set !default;
|
29
|
-
$main-color: $grey-dark-set !default;
|
30
|
-
$txt-color: $grey-dark-set !default;
|
31
|
-
$highlight-color: #ffff99 !default;
|
32
|
-
|
33
|
-
$background-color: lighten($grey-set,45) !default;
|
34
|
-
|
35
|
-
$link-color: $blue-set !default;
|
36
|
-
$link-color-hover: darken($blue-set,10) !default;
|
37
|
-
|
38
|
-
$border-color: lighten($grey-set,35) !default;
|
39
|
-
$border-color-hover: $grey-set !default;
|
40
|
-
|
41
|
-
// Font Settings
|
42
|
-
|
43
|
-
$georgia: Georgia, "Times New Roman", "DejaVu Serif", serif !default;
|
44
|
-
$helvetica: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
|
45
|
-
$open-sans: 'Open Sans', sans-serif !default;
|
46
|
-
$gentium-book: 'Gentium Book Basic', serif !default;
|
47
|
-
$droid-serif: 'Droid Serif', serif !default;
|
48
|
-
|
49
|
-
$header-font-family: $droid-serif !default;
|
50
|
-
$header-font-weight: bold !default;
|
51
|
-
$header-font-color: $black-set !default;
|
52
|
-
$body-font-family: $georgia !default;
|
53
|
-
$body-font-weight: normal !default;
|
54
|
-
$body-font-color: $txt-color !default;
|
55
|
-
|
56
|
-
// Modular Scale Settings
|
57
|
-
// Ratios
|
58
|
-
|
59
|
-
$golden: 1.618 !default;
|
60
|
-
$ratio: $golden !default;
|
61
|
-
|
62
|
-
// $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
|
63
|
-
$base-font-size: 14px !default;
|
64
|
-
$important-mod-num: 44px !default;
|
65
|
-
$base-size: $base-font-size $important-mod-num;
|
66
|
-
$base-line-height: 20px !default;
|
67
|
-
// Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
|
68
|
-
// http://www.modularscale.com by Tim Brown
|
69
|
-
// Results : http://modularscale.com/scale/?px1=14&px2=44&ra1=1.618&ra2=0
|
70
|
-
// https://github.com/scottkellum/modular-scale by scottkellum
|
@@ -1,120 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Tables
|
3
|
-
//
|
4
|
-
|
5
|
-
table {
|
6
|
-
position: relative;
|
7
|
-
margin-bottom: ms(1);
|
8
|
-
width: 100%;
|
9
|
-
border: 1px solid $border-color;
|
10
|
-
}
|
11
|
-
|
12
|
-
* html table,
|
13
|
-
*:first-child+html table {
|
14
|
-
zoom: 1;
|
15
|
-
}
|
16
|
-
|
17
|
-
th,
|
18
|
-
td {
|
19
|
-
padding: ms(0)/2 ms(0) ms(0)/2 ms(0)/2;
|
20
|
-
border-right: solid 1px $border-color;
|
21
|
-
text-align: left; /* LTR */
|
22
|
-
&:last-child {
|
23
|
-
border-right: 0 none;
|
24
|
-
}
|
25
|
-
}
|
26
|
-
|
27
|
-
thead {
|
28
|
-
th,
|
29
|
-
td {
|
30
|
-
padding-top: ms(0)/2;
|
31
|
-
}
|
32
|
-
}
|
33
|
-
|
34
|
-
tfoot {
|
35
|
-
th,
|
36
|
-
td {
|
37
|
-
padding-bottom: ms(0)/2;
|
38
|
-
}
|
39
|
-
}
|
40
|
-
|
41
|
-
tbody,
|
42
|
-
tfoot {
|
43
|
-
th,
|
44
|
-
td {
|
45
|
-
border-top: solid 1px $border-color;
|
46
|
-
}
|
47
|
-
}
|
48
|
-
|
49
|
-
tr:nth-child(even) td { }
|
50
|
-
tbody tr:nth-child(odd) {
|
51
|
-
th,
|
52
|
-
td {
|
53
|
-
background: $background-color;
|
54
|
-
}
|
55
|
-
}
|
56
|
-
|
57
|
-
tbody {
|
58
|
-
border-top: none;
|
59
|
-
}
|
60
|
-
|
61
|
-
@include breakpoint($small) {
|
62
|
-
|
63
|
-
table {
|
64
|
-
position: relative;
|
65
|
-
display: block;
|
66
|
-
width: 100%;
|
67
|
-
}
|
68
|
-
|
69
|
-
table thead {
|
70
|
-
display: block;
|
71
|
-
float: left;
|
72
|
-
|
73
|
-
tr th {
|
74
|
-
border-right: 2px solid $border-color;
|
75
|
-
border-bottom: 1px solid $border-color;
|
76
|
-
|
77
|
-
&:last-child {
|
78
|
-
border-right: 2px solid $border-color;
|
79
|
-
border-bottom: 0 none;
|
80
|
-
}
|
81
|
-
}
|
82
|
-
}
|
83
|
-
|
84
|
-
table tbody {
|
85
|
-
display: -webkit-box;
|
86
|
-
overflow-x: auto;
|
87
|
-
}
|
88
|
-
|
89
|
-
table th,
|
90
|
-
table tr,
|
91
|
-
table td {
|
92
|
-
display: block;
|
93
|
-
}
|
94
|
-
|
95
|
-
tbody,
|
96
|
-
tfoot {
|
97
|
-
th,
|
98
|
-
td {
|
99
|
-
&:first-child {
|
100
|
-
border-top: 0 none;
|
101
|
-
}
|
102
|
-
}
|
103
|
-
}
|
104
|
-
|
105
|
-
// sort out borders
|
106
|
-
table th {
|
107
|
-
border-bottom: 0;
|
108
|
-
}
|
109
|
-
|
110
|
-
table td {
|
111
|
-
border-right: 0;
|
112
|
-
border-bottom: 0;
|
113
|
-
border-left: 0;
|
114
|
-
}
|
115
|
-
|
116
|
-
table tbody tr {
|
117
|
-
border-right: 1px solid $border-color;
|
118
|
-
}
|
119
|
-
|
120
|
-
}
|