framous 0.2.2 → 0.2.3

Sign up to get free protection for your applications and to get access to all the features.
data/CHANGELOG.mkdn CHANGED
@@ -1,6 +1,11 @@
1
1
  Framous Changelog
2
2
  =================
3
3
 
4
+ v0.2.3 [Dec 20, 2012]
5
+ ---------------------
6
+ * add some useful mixins to framous-mixins
7
+ * clean up v0.2.2
8
+
4
9
  v0.2.2 [Nov 16, 2012]
5
10
  ---------------------
6
11
  * split framous into framous-grid & framous-base
data/lib/framous.rb CHANGED
@@ -1,3 +1,5 @@
1
1
  require 'compass'
2
+ require 'modular-scale'
3
+
2
4
  extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
3
5
  Compass::Frameworks.register('framous', :path => extension_path)
@@ -0,0 +1,13 @@
1
+ //
2
+ // Framous.scss
3
+ // Framous features
4
+ //
5
+
6
+ @import "compass/css3";
7
+ @import "modular-scale";
8
+
9
+ @import "framous/grid/framous-grid";
10
+
11
+ @import "framous/base/framous-base";
12
+
13
+ @import "framous/mixins/framous-mixins";
@@ -0,0 +1,128 @@
1
+ //
2
+ // Forms.scss
3
+ //
4
+
5
+ form {
6
+ margin-bottom: ms(1);
7
+ }
8
+
9
+ form fieldset {
10
+ margin: 0 0 ms(0) 0;
11
+ padding: 0 0 ms(0) 0;
12
+ border: none;
13
+ border-bottom: 1px solid lighten($border-color,15);
14
+
15
+ &.form-actions {
16
+ margin: 0 0 0 20%;
17
+ padding: 0;
18
+ border: none;
19
+ }
20
+
21
+ &.check {
22
+ padding-left: 20%;
23
+
24
+ label {
25
+ display: inline;
26
+ float: none;
27
+ width: auto;
28
+ font-weight: normal;
29
+ }
30
+ }
31
+
32
+ label {
33
+ float: left;
34
+ margin: 4px 0 5px 0;
35
+ width: 20%;
36
+ font-weight: bold;
37
+ }
38
+
39
+ &.radio ul {
40
+ @include reset-list-style;
41
+ margin: 5px 0 0 20%;
42
+
43
+ li {
44
+ margin: 0 0 5px 0;
45
+
46
+ &:last-child {
47
+ margin: 0;
48
+ }
49
+
50
+ label {
51
+ display: inline;
52
+ float: none;
53
+ width: auto;
54
+ font-weight: normal;
55
+ }
56
+ }
57
+ }
58
+
59
+ input.form-text,
60
+ textarea {
61
+ display: block;
62
+ padding: 5px;
63
+ width: 50%;
64
+ border: 1px solid $border-color;
65
+ font-family: $open-sans;
66
+ }
67
+
68
+ input.form-text:focus,
69
+ textarea:focus {
70
+ border: 1px solid $border-color-hover;
71
+ }
72
+
73
+ textarea {
74
+ height: 150px;
75
+ }
76
+
77
+ select {
78
+ margin: 0;
79
+ min-width: 25%;
80
+ font-family: $open-sans;
81
+ }
82
+
83
+ p.form-help {
84
+ margin: 5px 0 0 20%;
85
+ color: $grey-set;
86
+ }
87
+ }
88
+
89
+ form input[type="submit"] {
90
+ margin: 0;
91
+ padding: 5px 10px;
92
+ border: 0 none;
93
+ background: $link-color;
94
+ color: $white-set;
95
+ font-weight: 700;
96
+ font-family: $open-sans;
97
+
98
+ &:hover,
99
+ &:focus {
100
+ background: $link-color-hover;
101
+ }
102
+
103
+ &:active {
104
+ background: $link-color-hover;
105
+ }
106
+ }
107
+
108
+ @include breakpoint($small) {
109
+ form fieldset label {
110
+ display: block;
111
+ float: none;
112
+ margin: 0 0 5px 0;
113
+ width: auto;
114
+ }
115
+
116
+ form fieldset.form-actions,
117
+ form fieldset.check,
118
+ form fieldset.radio ul,
119
+ form fieldset p.form-help {
120
+ margin-left: 0;
121
+ padding-left: 0;
122
+ }
123
+
124
+ form fieldset input.form-text,
125
+ form fieldset textarea {
126
+ width: 100%;
127
+ }
128
+ }
@@ -0,0 +1,11 @@
1
+ //
2
+ // Base.scss
3
+ // Fundamental HTML elements styled and enhanced with extensible classes.
4
+ // @import all base/*
5
+ //
6
+
7
+ @import "settings";
8
+ @import "typography";
9
+ @import "forms";
10
+ @import "tables";
11
+ @import "icons";
@@ -0,0 +1,27 @@
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
+ }
@@ -0,0 +1,220 @@
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
@@ -0,0 +1,70 @@
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
@@ -0,0 +1,120 @@
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
+ }