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.
- data/CHANGELOG.mkdn +5 -0
- data/lib/framous.rb +2 -0
- data/stylesheets/_framous.scss +13 -0
- data/stylesheets/framous/base/_forms.scss +128 -0
- data/stylesheets/framous/base/_framous-base.scss +11 -0
- data/stylesheets/framous/base/_icons.scss +27 -0
- data/stylesheets/framous/base/_modular-scale.scss +220 -0
- data/stylesheets/framous/base/_settings.scss +70 -0
- data/stylesheets/framous/base/_table.scss +120 -0
- data/stylesheets/framous/base/_tables.scss +120 -0
- data/stylesheets/framous/base/_typography.scss +213 -0
- data/stylesheets/{_framous-grid.scss → framous/grid/_framous-grid.scss} +3 -3
- data/stylesheets/framous/grid/_grid.scss +1 -0
- data/stylesheets/framous/grid/_settings.scss +9 -9
- data/stylesheets/framous/mixins/_framous-mixins.scss +8 -0
- data/stylesheets/framous/mixins/_hidpi-media-query.scss +14 -0
- data/stylesheets/framous/mixins/_linear-gradient.scss +47 -0
- data/stylesheets/framous/mixins/_position.scss +46 -0
- data/templates/project/_base.scss +67 -26
- data/templates/project/_print.scss +21 -0
- data/templates/project/_reset.scss +410 -0
- data/templates/project/index.html +421 -0
- data/templates/project/manifest.rb +5 -1
- data/templates/project/screen.scss +61 -5
- metadata +20 -8
- data/stylesheets/_framous-base.scss +0 -4
- data/stylesheets/framous/_functions.scss +0 -39
- data/stylesheets/framous/_grid.scss +0 -201
- data/stylesheets/framous/_settings.scss +0 -42
@@ -1,201 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Grid.scss
|
3
|
-
// The default grid uses 12 columns.
|
4
|
-
// A setting that can be easily overridden in /base/settings.scss
|
5
|
-
//
|
6
|
-
|
7
|
-
//
|
8
|
-
// Imports
|
9
|
-
//
|
10
|
-
|
11
|
-
@import "compass/css3/box-sizing";
|
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
|
-
|
@@ -1,42 +0,0 @@
|
|
1
|
-
//
|
2
|
-
// Settings.scss
|
3
|
-
//
|
4
|
-
|
5
|
-
//
|
6
|
-
// 1. Responsive Grid
|
7
|
-
//
|
8
|
-
|
9
|
-
// Column width
|
10
|
-
$column: 145px !default;
|
11
|
-
// Gutter between each two columns
|
12
|
-
$gutter: 9px !default;
|
13
|
-
// Total number of columns in the grid (Total Columns For Main Container)
|
14
|
-
$grid-columns: 12 !default;
|
15
|
-
// Max-width of the outer container
|
16
|
-
$max-width: 1024px !default;
|
17
|
-
// Makes all elements have a border-box layout
|
18
|
-
$border-box-sizing: true !default;
|
19
|
-
// Default @media feature for the breakpoint() mixin
|
20
|
-
$default-feature: min-width;
|
21
|
-
|
22
|
-
//
|
23
|
-
// 2. Responsive Breakpoints
|
24
|
-
// @see http://css-tricks.com/snippets/css/media-queries-for-standard-devices
|
25
|
-
//
|
26
|
-
|
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;
|