framous 0.2.2 → 0.2.3

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.
@@ -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
+ }
@@ -0,0 +1,213 @@
1
+ //
2
+ // Typography.scss
3
+ // Base Type Styles Using Modular Scale
4
+ // @credits http://thesassway.com/projects/modular-scale
5
+ // https://github.com/scottkellum/modular-scale
6
+ // Vertical Rhythm : http://drewish.com/tools/vertical-rhythm
7
+ //
8
+
9
+ @import "compass/typography/vertical_rhythm";
10
+ @import "compass/reset/utilities";
11
+
12
+ body,div,dl,dt,dd,ul,ol,li,
13
+ h1,h2,h3,h4,h5,h6,
14
+ pre,form,p,blockquote,th,td {
15
+ margin: 0;
16
+ padding: 0;
17
+ font-size: ms(0);
18
+ direction: $text-direction;
19
+ }
20
+
21
+ body {
22
+ position: relative;
23
+ background: $background-body-color;
24
+ color: $body-font-color;
25
+ font-size: ms(0);
26
+ font-family: $body-font-family;
27
+ line-height: $base-line-height;
28
+ -webkit-text-rendering: optimizeLegibility;
29
+ -moz-text-rendering: optimizeLegibility;
30
+ -ms-text-rendering: optimizeLegibility;
31
+ -o-text-rendering: optimizeLegibility;
32
+ text-rendering: optimizeLegibility;
33
+ -webkit-font-smoothing: antialiased;
34
+ -moz-font-smoothing: antialiased;
35
+ -ms-font-smoothing: antialiased;
36
+ -o-font-smoothing: antialiased;
37
+ font-smoothing: antialiased;
38
+ }
39
+
40
+ // Links : link, visited, hover, active
41
+ a {
42
+ color: $link-color;
43
+ text-decoration: none;
44
+ line-height: inherit;
45
+ word-wrap: break-word;
46
+
47
+ &:visited {
48
+ color: $link-color-hover;
49
+ }
50
+
51
+ &:hover {
52
+ color: $link-color-hover;
53
+ }
54
+
55
+ &:active {
56
+ color: $link-color-hover;
57
+ }
58
+
59
+ &:focus {
60
+ outline: none;
61
+ color: $link-color-hover;
62
+ }
63
+ }
64
+
65
+ p a,
66
+ p a:visited {
67
+ line-height: inherit;
68
+ }
69
+
70
+ p {
71
+ margin-bottom: ms(1);
72
+ font-weight: $body-font-weight;
73
+ font-family: $body-font-family;
74
+ @include adjust-font-size-to(ms(0));
75
+ }
76
+
77
+ aside p {
78
+ font-size: ms(0) - 1;
79
+ @include adjust-font-size-to(ms(0) - 1);
80
+ }
81
+
82
+ h1, h2, h3, h4, h5, h6 {
83
+ margin-top: ms(0);
84
+ margin-bottom: ms(0);
85
+ color: $header-font-color;
86
+ font-weight: $header-font-weight;
87
+ font-family: $header-font-family;
88
+ text-rendering: optimizeLegibility;
89
+
90
+ small {
91
+ color: lighten($header-font-color, 30%);
92
+ font-size: 75%;
93
+ line-height: 0;
94
+ }
95
+ }
96
+
97
+ h1 { @include adjust-font-size-to(ms(5)); }
98
+ h2 { @include adjust-font-size-to(ms(4)); }
99
+ h3 { @include adjust-font-size-to(ms(3)); }
100
+ h4 { @include adjust-font-size-to(ms(2)); }
101
+ h5 { @include adjust-font-size-to(ms(1)); }
102
+ h6 { @include adjust-font-size-to(ms(0)); }
103
+
104
+ hr {
105
+ clear: both;
106
+ margin: ms(1) 0 ms(1);
107
+ height: 0;
108
+ border: solid #ddd;
109
+ border-width: 1px 0 0;
110
+ }
111
+
112
+ em, i {
113
+ font-style: italic;
114
+ line-height: inherit;
115
+ }
116
+
117
+ strong, b {
118
+ font-weight: bold;
119
+ line-height: inherit;
120
+ }
121
+
122
+ small {
123
+ font-size: 75%;
124
+ line-height: inherit;
125
+ }
126
+
127
+ code {
128
+ background: $highlight-color;
129
+ font-weight: bold;
130
+ }
131
+
132
+ // Lists
133
+ ul, ol {
134
+ margin-bottom: ms(1);
135
+ margin-left: ms(1);
136
+ @include adjust-font-size-to(ms(0));
137
+ }
138
+
139
+ ul {
140
+ li {
141
+ ul, ol {
142
+ margin-#{$default-float}: ms(1);
143
+ }
144
+ }
145
+ }
146
+
147
+ ol {
148
+ li {
149
+ ul, ol {
150
+ margin-#{$default-float}: ms(1);
151
+ }
152
+ }
153
+ }
154
+
155
+ nav ul, nav ol,
156
+ .nav li, .nav ol {
157
+ @include reset-list-style;
158
+ margin: 0;
159
+ padding: 0;
160
+ }
161
+
162
+ // Text Marking
163
+ ins, mark {
164
+ background-color: $highlight-color;
165
+ color: invert($highlight-color);
166
+ }
167
+
168
+ ins {
169
+ text-decoration: none;
170
+ }
171
+
172
+ del {
173
+ text-decoration: line-through;
174
+ }
175
+
176
+ // Blockquote
177
+ blockquote, blockquote p {
178
+ color: lighten($header-font-color, 30%);
179
+ font-style: italic;
180
+ line-height: 1.5;
181
+ }
182
+
183
+ blockquote {
184
+ margin: 0 0 ms(1) ms(1);
185
+ padding: 0px ms(1) 0 ms(1);
186
+ border-#{$default-float}: 1px solid $grey-set;
187
+
188
+ cite {
189
+ display: block;
190
+ color: lighten($header-font-color, 20%);
191
+ font-size: ms(0) - 1;
192
+
193
+ &:before {
194
+ content: "\2014 \0020";
195
+ }
196
+
197
+ a, a:visited {
198
+ color: lighten($header-font-color, 20%);
199
+ }
200
+ }
201
+ }
202
+
203
+ abbr, acronym {
204
+ border-bottom: 1px solid $grey-set;
205
+ color: $header-font-color;
206
+ text-transform: uppercase !important;
207
+ font-size: 90%;
208
+ cursor: help;
209
+ }
210
+
211
+ abbr {
212
+ text-transform: none;
213
+ }
@@ -4,6 +4,6 @@
4
4
  // Based on http://neat.bourbon.io/ & http://susy.oddbird.net/
5
5
  //
6
6
 
7
- @import "framous/grid/settings";
8
- @import "framous/grid/functions";
9
- @import "framous/grid/grid";
7
+ @import "settings";
8
+ @import "functions";
9
+ @import "grid";
@@ -8,6 +8,7 @@
8
8
  //
9
9
 
10
10
  @import "compass/css3/box-sizing";
11
+ @import "compass/utilities/general";
11
12
 
12
13
  // $border-box-sizing: true !default;
13
14
  // Makes all elements have a border-box layout
@@ -24,19 +24,19 @@ $default-feature: min-width;
24
24
  // @see http://css-tricks.com/snippets/css/media-queries-for-standard-devices
25
25
  //
26
26
 
27
- // Smartphones (portrait and landscape)
28
- $phone: min-device-width 320px max-device-width 479px;
27
+ // Small screens
28
+ $small: min-width 320px max-width 479px !default;
29
29
  // Smartphones (portrait)
30
- $phone-portrait: max-width 319px;
30
+ $phone-portrait: max-device-width 320px !default;
31
31
  // Smartphones (landscape)
32
- $phone-landscape: min-width 320px max-width 479px;
32
+ $phone-landscape: max-device-width 480px !default;
33
33
  // iPads (portrait and landscape)
34
- $ipad: min-device-width 768px;
34
+ $medium: min-device-width 768px !default;
35
35
  // iPads (portrait)
36
- $ipad-portrait: min-device-width 768px max-device-width 1024px orientation portrait;
36
+ $ipad-portrait: max-device-width 768px orientation portrait !default;
37
37
  // iPads (landscape)
38
- $ipad-landscape: min-device-width 768px max-device-width 1024px orientation landscape;
38
+ $ipad-landscape: max-device-width 1024px orientation landscape !default;
39
39
  // Desktops and laptops
40
- $desktop: min-width 1024px;
40
+ $desktop: min-width 1024px !default;
41
41
  // iPhone 4
42
- $retina: -webkit-min-device-pixel-ratio 1.5 min-device-pixel-ratio 1.5;
42
+ $retina: -webkit-min-device-pixel-ratio 1.5 min-device-pixel-ratio 1.5 !default;
@@ -0,0 +1,8 @@
1
+ //
2
+ // Framous-mixins.scss
3
+ // Based on http://bourbon.io/
4
+ //
5
+
6
+ @import "hidpi-media-query";
7
+ @import "linear-gradient";
8
+ @import "position";
@@ -0,0 +1,14 @@
1
+ //
2
+ // HI DPI Media Query.scss
3
+ //
4
+
5
+ // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
6
+ @mixin hidpi($ratio: 1.3) {
7
+ @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
8
+ only screen and (min--moz-device-pixel-ratio: $ratio),
9
+ only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
10
+ only screen and (min-resolution: #{round($ratio*96)}dpi),
11
+ only screen and (min-resolution: #{$ratio}dppx) {
12
+ @content;
13
+ }
14
+ }
@@ -0,0 +1,47 @@
1
+ //
2
+ // Linear Gradient.scss
3
+ //
4
+
5
+ @mixin linear-gradient($pos, $G1, $G2: false,
6
+ $G3: false, $G4: false,
7
+ $G5: false, $G6: false,
8
+ $G7: false, $G8: false,
9
+ $G9: false, $G10: false,
10
+ $deprecated-pos1: left top,
11
+ $deprecated-pos2: left bottom,
12
+ $fallback: false) {
13
+ // Detect what type of value exists in $pos
14
+ $pos-type: type-of(nth($pos, 1));
15
+
16
+ // If $pos is missing from mixin, reassign vars and add default position
17
+ @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
18
+ $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
19
+ $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
20
+ $pos: top; // Default position
21
+ }
22
+
23
+ $full: compact($G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10);
24
+
25
+ // Set $G1 as the default fallback color
26
+ $fallback-color: nth($G1, 1);
27
+
28
+ // If $fallback is a color use that color as the fallback color
29
+ @if (type-of($fallback) == color) or ($fallback == "transparent") {
30
+ $fallback-color: $fallback;
31
+ }
32
+
33
+ background-color: $fallback-color;
34
+ background-image: deprecated-webkit-gradient(linear, $deprecated-pos1, $deprecated-pos2, $full); // Safari <= 5.0
35
+ background-image: -webkit-linear-gradient($pos, $full); // Safari 5.1+, Chrome
36
+ background-image: -moz-linear-gradient($pos, $full);
37
+ background-image: -ms-linear-gradient($pos, $full);
38
+ background-image: -o-linear-gradient($pos, $full);
39
+ background-image: unquote("linear-gradient(#{$pos}, #{$full})");
40
+ }
41
+
42
+
43
+ // Usage: Gradient position is optional, default is top. Position can be a degree. Color stops are optional as well.
44
+ // @include linear-gradient(#1e5799, #2989d8);
45
+ // @include linear-gradient(#1e5799, #2989d8, $fallback:#2989d8);
46
+ // @include linear-gradient(top, #1e5799 0%, #2989d8 50%);
47
+ // @include linear-gradient(50deg, rgba(10, 10, 10, 0.5) 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%);
@@ -0,0 +1,46 @@
1
+ //
2
+ // Postion.scss
3
+ //
4
+
5
+ @mixin position ($position: relative, $coordinates: 0 0 0 0) {
6
+
7
+ @if type-of($position) == list {
8
+ $coordinates: $position;
9
+ $position: relative;
10
+ }
11
+
12
+ $top: nth($coordinates, 1);
13
+ $right: nth($coordinates, 2);
14
+ $bottom: nth($coordinates, 3);
15
+ $left: nth($coordinates, 4);
16
+
17
+ position: $position;
18
+
19
+ @if $top == auto {
20
+ top: $top;
21
+ }
22
+ @else if not(unitless($top)) {
23
+ top: $top;
24
+ }
25
+
26
+ @if $right == auto {
27
+ right: $right;
28
+ }
29
+ @else if not(unitless($right)) {
30
+ right: $right;
31
+ }
32
+
33
+ @if $bottom == auto {
34
+ bottom: $bottom;
35
+ }
36
+ @else if not(unitless($bottom)) {
37
+ bottom: $bottom;
38
+ }
39
+
40
+ @if $left == auto {
41
+ left: $left;
42
+ }
43
+ @else if not(unitless($left)) {
44
+ left: $left;
45
+ }
46
+ }
@@ -2,41 +2,82 @@
2
2
  // Settings.scss
3
3
  //
4
4
 
5
- //
6
- // 1. Responsive Grid
7
- //
5
+ // Text Direction Settings
6
+
7
+ $text-direction: ltr;
8
+ $default-float: left;
9
+ $default-opposite: right;
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
+ // Responsive Grid
8
20
 
9
21
  // Column width
10
22
  $column: 145px;
11
23
  // Gutter between each two columns
12
- $gutter: 9px;
24
+ $gutter: 36px;
13
25
  // Total number of columns in the grid (Total Columns For Main Container)
14
26
  $grid-columns: 12;
15
27
  // Max-width of the outer container
16
28
  $max-width: 1024px;
17
29
  // Makes all elements have a border-box layout
18
30
  $border-box-sizing: true;
19
- // Default @media feature for the breakpoint() mixin
20
- $default-feature: min-width;
21
31
 
22
- //
23
- // 2. Responsive Breakpoints
24
- // @see http://css-tricks.com/snippets/css/media-queries-for-standard-devices
25
- //
32
+ // Colors Settings
33
+ // Branding Colors
34
+
35
+ $white-set: #fff;
36
+ $blue-set: #174374;
37
+ $grey-set: #808080;
38
+ $grey-dark-set: #333;
39
+ $black-set: #000;
40
+
41
+ $background-body-color: $white-set;
42
+ $main-color: $grey-dark-set;
43
+ $txt-color: $grey-dark-set;
44
+ $highlight-color: #ffff99;
45
+
46
+ $background-color: lighten($grey-set,45);
47
+
48
+ $link-color: $blue-set;
49
+ $link-color-hover: darken($blue-set,10);
50
+
51
+ $border-color: lighten($grey-set,35);
52
+ $border-color-hover: $grey-set;
53
+
54
+ // Font Settings
55
+
56
+ $georgia: Georgia, "Times New Roman", "DejaVu Serif", serif;
57
+ $helvetica: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
58
+ $open-sans: 'Open Sans', sans-serif;
59
+ $gentium-book: 'Gentium Book Basic', serif;
60
+ $droid-serif: 'Droid Serif', serif;
61
+
62
+ $header-font-family: $droid-serif;
63
+ $header-font-weight: bold;
64
+ $header-font-color: $black-set;
65
+ $body-font-family: $georgia;
66
+ $body-font-weight: normal;
67
+ $body-font-color: $txt-color;
68
+
69
+ // Modular Scale Settings
70
+ // Ratios
71
+
72
+ $golden: 1.618;
73
+ $ratio: $golden;
26
74
 
27
- // Smartphones (portrait and landscape)
28
- $phone: min-device-width 320px max-device-width 479px;
29
- // Smartphones (portrait)
30
- $phone-portrait: max-width 319px;
31
- // Smartphones (landscape)
32
- $phone-landscape: min-width 320px max-width 479px;
33
- // iPads (portrait and landscape)
34
- $ipad: min-device-width 768px;
35
- // iPads (portrait)
36
- $ipad-portrait: min-device-width 768px max-device-width 1024px orientation portrait;
37
- // iPads (landscape)
38
- $ipad-landscape: min-device-width 768px max-device-width 1024px orientation landscape;
39
- // Desktops and laptops
40
- $desktop: min-width 1024px;
41
- // iPhone 4
42
- $retina: -webkit-min-device-pixel-ratio 1.5 min-device-pixel-ratio 1.5;
75
+ // $ratio: $golden; // THIS IS DEFAULT IN MODULAR-SCALE
76
+ $base-font-size: 14px;
77
+ $important-mod-num: 44px;
78
+ $base-size: $base-font-size $important-mod-num;
79
+ $base-line-height: 20px;
80
+ // Produced the following list of values: 14, 17, 23, 27, 37, 44, 59, 71, 95, 115;
81
+ // http://www.modularscale.com by Tim Brown
82
+ // Results : http://modularscale.com/scale/?px1=14&px2=44&ra1=1.618&ra2=0
83
+ // https://github.com/scottkellum/modular-scale by scottkellum
@@ -0,0 +1,21 @@
1
+ //
2
+ // Print.scss
3
+ // @credits : HTML5 Boilerplate
4
+ //
5
+
6
+ @media print {
7
+
8
+ * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; } /* Black prints faster: h5bp.com/s */
9
+ a, a:visited { text-decoration: underline; }
10
+ a[href]:after { content: " (" attr(href) ")"; }
11
+ abbr[title]:after { content: " (" attr(title) ")"; }
12
+ .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
13
+ pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
14
+ thead { display: table-header-group; } /* h5bp.com/t */
15
+ tr, img { page-break-inside: avoid; }
16
+ img { max-width: 100% !important; }
17
+ @page { margin: 0.5cm; }
18
+ p, h2, h3 { orphans: 3; widows: 3; }
19
+ h2, h3 { page-break-after: avoid; }
20
+
21
+ }