framous 0.2.5 → 0.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.
- 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,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
|
-
}
|
@@ -1,213 +0,0 @@
|
|
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
|
-
}
|
@@ -1,39 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Functions & Mixins
|
3
|
-
//
|
4
|
-
|
5
|
-
//
|
6
|
-
// Flexible grid
|
7
|
-
//
|
8
|
-
|
9
|
-
@function flex-grid($columns, $container-columns: $fg-max-columns) {
|
10
|
-
$width: $columns * $fg-column + ($columns - 1) * $fg-gutter;
|
11
|
-
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
|
12
|
-
@return percentage($width / $container-width);
|
13
|
-
}
|
14
|
-
|
15
|
-
// Flexible gutter
|
16
|
-
@function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) {
|
17
|
-
$container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter;
|
18
|
-
@return percentage($gutter / $container-width);
|
19
|
-
}
|
20
|
-
|
21
|
-
//
|
22
|
-
// Container Span
|
23
|
-
//
|
24
|
-
|
25
|
-
@function container-span($span: $span) {
|
26
|
-
@if length($span) == 3 {
|
27
|
-
$container-columns: nth($span, 3);
|
28
|
-
@return $container-columns;
|
29
|
-
}
|
30
|
-
|
31
|
-
@else if length($span) == 2 {
|
32
|
-
$container-columns: nth($span, 2);
|
33
|
-
@return $container-columns;
|
34
|
-
}
|
35
|
-
|
36
|
-
@else {
|
37
|
-
@return $grid-columns;
|
38
|
-
}
|
39
|
-
}
|
@@ -1,201 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Grid.scss
|
3
|
-
// The default grid uses 12 columns.
|
4
|
-
//
|
5
|
-
|
6
|
-
//
|
7
|
-
// Imports
|
8
|
-
//
|
9
|
-
|
10
|
-
@import "compass/css3/box-sizing";
|
11
|
-
@import "compass/utilities/general";
|
12
|
-
|
13
|
-
// $border-box-sizing: true !default;
|
14
|
-
// Makes all elements have a border-box layout
|
15
|
-
|
16
|
-
@if $border-box-sizing == true {
|
17
|
-
* {
|
18
|
-
@include box-sizing(border-box);
|
19
|
-
}
|
20
|
-
}
|
21
|
-
|
22
|
-
$fg-column: $column;
|
23
|
-
$fg-gutter: $gutter;
|
24
|
-
$fg-max-columns: $grid-columns;
|
25
|
-
$fg-max-width: $max-width;
|
26
|
-
$parent-columns: $grid-columns !default;
|
27
|
-
|
28
|
-
// outer wrapper center container
|
29
|
-
@mixin outer-container() {
|
30
|
-
@include clearfix;
|
31
|
-
max-width: $fg-max-width;
|
32
|
-
text-align: left;
|
33
|
-
margin: {
|
34
|
-
left: auto;
|
35
|
-
right: auto;
|
36
|
-
}
|
37
|
-
}
|
38
|
-
|
39
|
-
// Grid span columns
|
40
|
-
// Use the span-columns mixin to specify the number of columns an element:
|
41
|
-
// @include span-columns($span: $columns of $container-columns, $display: block)
|
42
|
-
// eg. Element that spans across 6 columns (out of the default 12)
|
43
|
-
// div.element { @include span-columns(6 of 8); }
|
44
|
-
@mixin span-columns($span: $columns of $container-columns, $display: block) {
|
45
|
-
|
46
|
-
$columns: nth($span, 1);
|
47
|
-
$container-columns: container-span($span);
|
48
|
-
|
49
|
-
@if $container-columns != $grid-columns {
|
50
|
-
$parent-columns: $container-columns;
|
51
|
-
}
|
52
|
-
|
53
|
-
@if $display == table {
|
54
|
-
display: table-cell;
|
55
|
-
padding-right: flex-gutter($container-columns);
|
56
|
-
width: flex-grid($columns, $container-columns) + flex-gutter($container-columns);
|
57
|
-
|
58
|
-
&:last-child {
|
59
|
-
padding-right: 0;
|
60
|
-
}
|
61
|
-
}
|
62
|
-
|
63
|
-
@else if $display == inline-block {
|
64
|
-
@include inline-block;
|
65
|
-
margin-right: flex-gutter($container-columns);
|
66
|
-
width: flex-grid($columns, $container-columns);
|
67
|
-
|
68
|
-
&:last-child {
|
69
|
-
margin-right: 0;
|
70
|
-
}
|
71
|
-
}
|
72
|
-
|
73
|
-
@else {
|
74
|
-
display: block;
|
75
|
-
float: left;
|
76
|
-
margin-right: flex-gutter($container-columns);
|
77
|
-
width: flex-grid($columns, $container-columns);
|
78
|
-
|
79
|
-
&:last-child {
|
80
|
-
margin-right: 0;
|
81
|
-
}
|
82
|
-
}
|
83
|
-
}
|
84
|
-
|
85
|
-
// Clearfix / row container
|
86
|
-
// In order to clear floated or table-cell columns:
|
87
|
-
@mixin row($display: block) {
|
88
|
-
@include clearfix;
|
89
|
-
@if $display == table {
|
90
|
-
display: table;
|
91
|
-
}
|
92
|
-
|
93
|
-
@else {
|
94
|
-
display: block;
|
95
|
-
}
|
96
|
-
}
|
97
|
-
|
98
|
-
// Shift
|
99
|
-
// To move an element to the left or right by a number of columns:
|
100
|
-
@mixin shift($n-columns: 1) {
|
101
|
-
margin-left: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns);
|
102
|
-
}
|
103
|
-
|
104
|
-
// Pad
|
105
|
-
// To add padding around the entire column use pad().
|
106
|
-
// By default it adds the same value as the grid's gutter.
|
107
|
-
@mixin pad($padding: flex-gutter()) {
|
108
|
-
padding: $padding;
|
109
|
-
}
|
110
|
-
|
111
|
-
// Remove element gutter
|
112
|
-
@mixin omega($display: block, $direction: right) {
|
113
|
-
@if $display == table {
|
114
|
-
padding-#{$direction}: 0;
|
115
|
-
}
|
116
|
-
|
117
|
-
@else {
|
118
|
-
margin-#{$direction}: 0;
|
119
|
-
}
|
120
|
-
}
|
121
|
-
|
122
|
-
// You can also use nth-omega to remove the gutter of a specific column or set of columns
|
123
|
-
@mixin nth-omega($nth, $display: block, $direction: right) {
|
124
|
-
@if $display == table {
|
125
|
-
&:nth-child(#{$nth}) {
|
126
|
-
padding-#{$direction}: 0;
|
127
|
-
}
|
128
|
-
}
|
129
|
-
|
130
|
-
@else {
|
131
|
-
&:nth-child(#{$nth}) {
|
132
|
-
margin-#{$direction}: 0;
|
133
|
-
}
|
134
|
-
}
|
135
|
-
}
|
136
|
-
|
137
|
-
// Fill 100% of parent
|
138
|
-
// This makes sure that the child fills 100% of its parent
|
139
|
-
@mixin fill-parent() {
|
140
|
-
width: 100%;
|
141
|
-
|
142
|
-
@if $border-box-sizing == false {
|
143
|
-
@include box-sizing(border-box);
|
144
|
-
}
|
145
|
-
}
|
146
|
-
|
147
|
-
// Breakpoints
|
148
|
-
// The breakpoint() mixin allows you to use media-queries to modify both the grid and the layout.
|
149
|
-
// It takes two arguments:
|
150
|
-
@mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) {
|
151
|
-
|
152
|
-
@if length($query) == 1 {
|
153
|
-
@media screen and ($default-feature: nth($query, 1)) {
|
154
|
-
$default-grid-columns: $grid-columns;
|
155
|
-
$grid-columns: $total-columns;
|
156
|
-
@content;
|
157
|
-
$grid-columns: $default-grid-columns;
|
158
|
-
}
|
159
|
-
}
|
160
|
-
|
161
|
-
@else if length($query) == 2 {
|
162
|
-
@media screen and (nth($query, 1): nth($query, 2)) {
|
163
|
-
$default-grid-columns: $grid-columns;
|
164
|
-
$grid-columns: $total-columns;
|
165
|
-
@content;
|
166
|
-
$grid-columns: $default-grid-columns;
|
167
|
-
}
|
168
|
-
}
|
169
|
-
|
170
|
-
@else if length($query) == 3 {
|
171
|
-
@media screen and (nth($query, 1): nth($query, 2)) {
|
172
|
-
$default-grid-columns: $grid-columns;
|
173
|
-
$grid-columns: nth($query, 3);
|
174
|
-
@content;
|
175
|
-
$grid-columns: $default-grid-columns;
|
176
|
-
}
|
177
|
-
}
|
178
|
-
|
179
|
-
@else if length($query) == 4 {
|
180
|
-
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
181
|
-
$default-grid-columns: $grid-columns;
|
182
|
-
$grid-columns: $total-columns;
|
183
|
-
@content;
|
184
|
-
$grid-columns: $default-grid-columns;
|
185
|
-
}
|
186
|
-
}
|
187
|
-
|
188
|
-
@else if length($query) == 5 {
|
189
|
-
@media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) {
|
190
|
-
$default-grid-columns: $grid-columns;
|
191
|
-
$grid-columns: nth($query, 5);
|
192
|
-
@content;
|
193
|
-
$grid-columns: $default-grid-columns;
|
194
|
-
}
|
195
|
-
}
|
196
|
-
|
197
|
-
@else {
|
198
|
-
@warn "Wrong number of arguments for breakpoint(). Read the documentation for more details.";
|
199
|
-
}
|
200
|
-
}
|
201
|
-
|