edge_framework 0.1.0 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +8 -8
- data/.gitignore +6 -3
- data/assets/sass/edge/_base.scss +78 -28
- data/assets/sass/edge/_components.scss +8 -5
- data/assets/sass/edge/_helpers.scss +18 -1
- data/assets/sass/edge/components/{_block_grid.scss → _block-grid-margin.scss} +25 -12
- data/assets/sass/edge/components/_block-grid.scss +110 -0
- data/assets/sass/edge/components/_button.scss +50 -0
- data/assets/sass/edge/components/_form.scss +3 -1
- data/assets/sass/edge/components/_grid-margin.scss +309 -0
- data/assets/sass/edge/components/_grid.scss +147 -205
- data/assets/sass/edge/components/_main.scss +26 -16
- data/assets/sass/edge/components/_normalize.scss +5 -1
- data/assets/sass/edge/components/_print.scss +6 -1
- data/assets/sass/edge/components/_typography.scss +29 -0
- data/assets/sass/edge/components/_visibility.scss +43 -51
- data/assets/sass/edge.scss +9 -6
- data/assets/sass/for-test.scss +75 -0
- data/bin/edge +5 -1
- data/lib/edge/message.rb +38 -0
- data/lib/edge/version.rb +2 -1
- data/lib/edge_framework.rb +36 -21
- data/site/assets/css/app.css +44 -8
- data/site/assets/css/edge.css +83 -40
- data/site/assets/img/favicon-big.png +0 -0
- data/site/assets/img/favicon.png +0 -0
- data/site/assets/img/logo/edge-full.svg +19 -0
- data/site/assets/img/logo/edge-logo-transparent.svg +10 -0
- data/site/assets/img/logo/edge-logo.svg +19 -0
- data/site/assets/sass/_setting.scss +44 -15
- data/site/assets/sass/app.scss +203 -18
- data/site/assets/sass/edge.scss +2 -2
- data/site/config.rb +1 -1
- data/site/views/docs/grid.erb +44 -69
- data/site/views/index.erb +54 -6
- data/site/views/layout.erb +42 -10
- data/site/views/partials/_logo.erb +5 -0
- data/site/views/partials/_logo_full.erb +14 -0
- data/template/base/.gitignore +243 -0
- data/template/base/assets/css/.keep +0 -0
- data/template/base/assets/files/.keep +0 -0
- data/template/base/assets/img/favicon-big.png +0 -0
- data/template/base/assets/sass/_setting.scss +82 -26
- data/template/base/assets/sass/edge-framework.scss +7 -0
- data/template/base/robots.txt +7 -0
- data/template/html/index.html +4 -3
- data/template/php/index.php +8 -2
- data/template/php/partials/_footer.php +2 -2
- data/template/php/partials/_header.php +20 -4
- data/template/php/sample-page/index.php +11 -0
- metadata +20 -9
- data/assets/js/edge.min.js +0 -1
- data/assets/sass/edge/components/_palette.scss +0 -24
- data/lib/edge/engine.rb +0 -16
- data/site/assets/css/normalize.min.css +0 -51
- data/site/assets/js/vendor/handlebars.min.js +0 -2
- data/template/base/assets/sass/edge.scss +0 -3
checksums.yaml
CHANGED
@@ -1,15 +1,15 @@
|
|
1
1
|
---
|
2
2
|
!binary "U0hBMQ==":
|
3
3
|
metadata.gz: !binary |-
|
4
|
-
|
4
|
+
MDVhNzhhZWFkM2FlMTVjYWQzNTlhMDlkYTE0YjEzNjIzODVhYTcyYQ==
|
5
5
|
data.tar.gz: !binary |-
|
6
|
-
|
6
|
+
ZDcyZDBhMWJlZGI5N2M0YTAyNDU5MTMxMzZiZDI3MmQ4MjEyOGZiOQ==
|
7
7
|
!binary "U0hBNTEy":
|
8
8
|
metadata.gz: !binary |-
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
ODc0OGYyZDAzYThlMDkwNmNhN2MyYmU0NDhlOGQ3ZjMyOWIzZjJhNTA0OWMz
|
10
|
+
NGZkNTQ0OWEyYzA5ZjQzZjk1ZjIzMWY2ZWQ4MzUwNmUyMTE4MTA5MDFlYzE1
|
11
|
+
YjhjOGFiNTFlMzI5NmEzZmJhMzE1YWJlOTdlNzBjOTM0NTM2YzI=
|
12
12
|
data.tar.gz: !binary |-
|
13
|
-
|
14
|
-
|
15
|
-
|
13
|
+
MjVlYjFiNjEzY2Q3OGQzMDliZGNhZWNiYWYzZTE1MzY5ZGQwZjJiZWZlN2E4
|
14
|
+
OTAzMzA4NzE0YWE5YzFhNmQ3OTQ3YWQzZmE4ZmY0ZTNiMjVlNDY4Mjc2Y2Jj
|
15
|
+
OGIwODlmNjk5YTE5ZGMyYzdmM2JmZTc0ODllMGFmZDE3Mzg3OTE=
|
data/.gitignore
CHANGED
data/assets/sass/edge/_base.scss
CHANGED
@@ -1,14 +1,52 @@
|
|
1
|
-
// This module
|
2
|
-
|
1
|
+
// This module MUST be imported first before any other EDGE module
|
2
|
+
@charset "UTF-8";
|
3
3
|
@import "compass";
|
4
4
|
|
5
|
+
// -------------------------------------------------------
|
6
|
+
// OUTPUT CONFIG
|
7
|
+
// FULL:
|
8
|
+
// Set to true to keep full styling
|
9
|
+
// Set to false to use barebone style
|
10
|
+
// DEBUG:
|
11
|
+
// Set to true for various useful functionality during
|
12
|
+
// development
|
13
|
+
// EXTERNAL CALL:
|
14
|
+
// Add extra feature if calling Component's mixin exter-
|
15
|
+
// -nally
|
16
|
+
// INCLUDE:
|
17
|
+
// Set to false if you want to import the mixins only
|
18
|
+
// -------------------------------------------------------
|
19
|
+
$full : true !default;
|
20
|
+
$debug : false !default;
|
21
|
+
|
22
|
+
$external-call : false !default; // user shouldn't modify this
|
23
|
+
|
24
|
+
$include-main : true !default;
|
25
|
+
$include-grid : true !default;
|
26
|
+
$include-block-grid : true !default;
|
27
|
+
$include-visibility : true !default;
|
28
|
+
|
29
|
+
$include-button : true !default;
|
30
|
+
$include-form : true !default;
|
31
|
+
$include-typography : true !default;
|
32
|
+
|
33
|
+
$include-normalize : true !default;
|
34
|
+
$include-print : true !default;
|
35
|
+
|
5
36
|
// ----------
|
6
37
|
// COLOR
|
7
38
|
// ----------
|
8
|
-
|
9
|
-
$
|
10
|
-
$
|
11
|
-
|
39
|
+
// Two main colors of your site
|
40
|
+
$main-color : #0173BC !default;
|
41
|
+
$sub-color : #E9E9E9 !default;
|
42
|
+
|
43
|
+
// These 5 colors below should NEVER be used directly
|
44
|
+
// Put it to other variable like $header-color: $blue-color;
|
45
|
+
$passive-color : #E9E9E9 !default;
|
46
|
+
$blue-color : #0173BC !default;
|
47
|
+
$yellow-color : #DBA924 !default;
|
48
|
+
$red-color : #DA2E18 !default;
|
49
|
+
$green-color : #2CAE34 !default;
|
12
50
|
|
13
51
|
// ---------------
|
14
52
|
// BODY
|
@@ -18,20 +56,24 @@ $body-font-color : #222 !default;
|
|
18
56
|
$body-font-weight : normal !default;
|
19
57
|
$body-font-style : normal !default;
|
20
58
|
|
21
|
-
$header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif !default;
|
22
|
-
$body-font-family : "Helvetica", Helvetica, Arial, sans-serif !default;
|
59
|
+
$header-font-family : "Helvetica Neue", "Helvetica", Helvetica, Arial, "sans-serif" !default;
|
60
|
+
$body-font-family : "Helvetica", Helvetica, Arial, "sans-serif" !default;
|
61
|
+
$code-font-family : "Consolas", Courier, "monospace" !default;
|
23
62
|
|
24
63
|
// The default font-size is set to 100% of the browser style sheet (usually 16px)
|
25
64
|
// for compatibility with brower-based text zoom or user-set defaults.
|
26
65
|
$base-font-size : 100% !default;
|
66
|
+
// Maximum width of the grid
|
67
|
+
$content-width : 1140px !default;
|
27
68
|
|
28
69
|
// ---------------
|
29
70
|
// GLOBAL VALUE
|
30
71
|
// ---------------
|
31
72
|
$g-radius : 5px !default;
|
32
73
|
$g-round : 1000px !default;
|
74
|
+
$g-transition : all 0.2s ease-out !default;
|
33
75
|
|
34
|
-
|
76
|
+
%transition { @include transition($g-transition); }
|
35
77
|
|
36
78
|
// ------------------------
|
37
79
|
// PIXEL --> EM CONVERTER
|
@@ -48,7 +90,7 @@ $em-base : 16px !default;
|
|
48
90
|
// If not number, return it as is
|
49
91
|
@if type-of($value) != number { @return $value; }
|
50
92
|
|
51
|
-
$value: stripUnit($value) / stripUnit($
|
93
|
+
$value: stripUnit($value) / stripUnit($context) * 1em;
|
52
94
|
// Turn 0em into 0
|
53
95
|
@if ($value == 0em) {
|
54
96
|
$value: 0;
|
@@ -62,25 +104,32 @@ $em-base : 16px !default;
|
|
62
104
|
// padding : em(20px 30px 15px 10px);
|
63
105
|
// @include box-shadow(em(inset 2px 0 5px rgba(black, 0.3) ) );
|
64
106
|
@function em($values, $context: $em-base) {
|
65
|
-
// If
|
66
|
-
@if
|
67
|
-
@return
|
107
|
+
// If debug mode, return it plainly
|
108
|
+
@if $debug {
|
109
|
+
@return $values;
|
68
110
|
}
|
111
|
+
// Only convert to EM on non-debug mode
|
112
|
+
@else {
|
113
|
+
// If the value only contain single number, return it quickly without the overhead further below
|
114
|
+
@if type-of($values) == number {
|
115
|
+
@return convertToEm($values, $context);
|
116
|
+
}
|
69
117
|
|
70
|
-
|
71
|
-
|
72
|
-
|
118
|
+
$emValues : (); // This will eventually store the converted $values in a list
|
119
|
+
@each $val in $values {
|
120
|
+
$emValues: append($emValues, convertToEm($val, $context) );
|
121
|
+
}
|
122
|
+
@return join((), $emValues, space );
|
73
123
|
}
|
74
|
-
@return join((), $emValues, space );
|
75
124
|
}
|
76
125
|
|
77
126
|
// -------------------
|
78
127
|
// MEDIA QUERIES
|
79
128
|
// -------------------
|
80
|
-
$phone-screen :
|
81
|
-
$small-screen :
|
82
|
-
$medium-screen :
|
83
|
-
$large-screen :
|
129
|
+
$phone-screen : 480px !default;
|
130
|
+
$small-screen : 767px !default;
|
131
|
+
$medium-screen : 1140px !default;
|
132
|
+
$large-screen : 1440px !default;
|
84
133
|
$retina-screen : 192dpi !default;
|
85
134
|
// 480px and down
|
86
135
|
@mixin phone() {
|
@@ -124,20 +173,19 @@ $retina-screen : 192dpi !default;
|
|
124
173
|
// @include box-shadow(shiny(right), ...)
|
125
174
|
// ---------------------------------------------------
|
126
175
|
@function shiny($applyTo: top, $activeState: false) {
|
127
|
-
|
128
|
-
|
129
|
-
|
176
|
+
$size : 0 1px; // top
|
177
|
+
$shiny : inset $size 0 rgba(white, 0.5); // normal state
|
178
|
+
|
179
|
+
@if $applyTo == right {
|
130
180
|
$size : 1px 0; }
|
131
181
|
@else if $applyTo == left {
|
132
182
|
$size : -1px 0; }
|
133
183
|
@else if $applyTo == bottom {
|
134
184
|
$size : 0 -1px; }
|
135
185
|
|
136
|
-
//
|
186
|
+
// Change the shiny shadow if active-state
|
137
187
|
@if $activeState {
|
138
188
|
$shiny : inset $size 0 rgba(black, 0.2);
|
139
|
-
} @else {
|
140
|
-
$shiny : inset $size 0 rgba(white, 0.5);
|
141
189
|
}
|
142
190
|
@return $shiny;
|
143
191
|
}
|
@@ -178,9 +226,11 @@ $retina-screen : 192dpi !default;
|
|
178
226
|
@mixin selection($color: lighten($main-color, 35%) ) {
|
179
227
|
::-moz-selection {
|
180
228
|
background : $color;
|
229
|
+
text-shadow : none;
|
181
230
|
}
|
182
231
|
::selection {
|
183
232
|
background : $color;
|
233
|
+
text-shadow : none;
|
184
234
|
}
|
185
235
|
}
|
186
236
|
|
@@ -228,7 +278,7 @@ $default-opposite : right !default;
|
|
228
278
|
$direction == bottom {
|
229
279
|
$height : $width/2;
|
230
280
|
}
|
231
|
-
// Else if
|
281
|
+
// Else if cornered triangle, `heigth` is the same as `width`
|
232
282
|
@else if $direction == top-right or
|
233
283
|
$direction == top-left or
|
234
284
|
$direction == bottom-right or
|
@@ -1,9 +1,12 @@
|
|
1
1
|
@import "components/normalize";
|
2
2
|
@import "components/main";
|
3
|
-
|
4
|
-
@import "components/
|
5
|
-
@import "components/
|
3
|
+
|
4
|
+
@import "components/button";
|
5
|
+
@import "components/typography";
|
6
6
|
@import "components/form";
|
7
|
+
|
8
|
+
@import "components/grid";
|
9
|
+
@import "components/block-grid";
|
10
|
+
|
7
11
|
@import "components/visibility";
|
8
|
-
|
9
|
-
// @import "components/form";
|
12
|
+
@import "components/print";
|
@@ -1,2 +1,19 @@
|
|
1
1
|
@import "helpers/sprites";
|
2
|
-
@import "helpers/sticky-footer";
|
2
|
+
@import "helpers/sticky-footer";
|
3
|
+
|
4
|
+
// The mixins from Components class, but don't output the CSS
|
5
|
+
$include-main : false;
|
6
|
+
$include-grid : false;
|
7
|
+
$include-block-grid : false;
|
8
|
+
$include-visibility : false;
|
9
|
+
|
10
|
+
$include-button : false;
|
11
|
+
$include-form : false;
|
12
|
+
$include-typography : false;
|
13
|
+
|
14
|
+
$include-normalize : false;
|
15
|
+
$include-print : false;
|
16
|
+
|
17
|
+
$external-call : true; // add extra feature to some Component's mixin
|
18
|
+
|
19
|
+
@import "components";
|
@@ -1,8 +1,8 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
//
|
5
|
-
|
1
|
+
// ------------------------------------------
|
2
|
+
// BLOCK GRID with MARGIN
|
3
|
+
// *Deprecated* in v 0.1
|
4
|
+
// Using margin for distance between block
|
5
|
+
// ------------------------------------------
|
6
6
|
$block-grid-max-width : em($content-width) !default;
|
7
7
|
$block-grid-total : 12 !default;
|
8
8
|
$block-grid-margin : em(25px) !default;
|
@@ -63,27 +63,38 @@ $block-grid-margin : em(25px) !default;
|
|
63
63
|
}
|
64
64
|
}
|
65
65
|
|
66
|
+
@if $include-block-grid {
|
67
|
+
|
68
|
+
/* ---------------
|
69
|
+
EDGE Block Grid
|
70
|
+
--------------- */
|
71
|
+
|
66
72
|
[class*="block-grid-"] { @include block-grid; }
|
67
73
|
|
68
74
|
// Large block grid
|
69
75
|
@for $i from 2 through $block-grid-total {
|
70
76
|
.large-block-grid-#{($i)} {
|
71
|
-
@include block-grid($i, $base
|
77
|
+
@include block-grid($i, $for-base: false);
|
72
78
|
|
73
79
|
&.collapse {
|
74
|
-
@include block-grid($i, $base
|
80
|
+
@include block-grid($i, $for-base: false, $collapse: true);
|
75
81
|
}
|
76
82
|
}
|
77
83
|
}
|
78
84
|
|
79
85
|
@include small {
|
80
86
|
[class*="small-block-grid-"] > li { clear: none !important; }
|
81
|
-
|
82
|
-
// Reset large-block-grid nth-child margin
|
83
|
-
[class*="large-block-grid-"] > li:nth-child(n+1) {
|
84
|
-
margin-#{$default-opposite} : blockGridMarginCalc($block-grid-margin);
|
85
|
-
}
|
86
87
|
|
88
|
+
// Make large-block-grid 100% width
|
89
|
+
[class*="large-block-grid-"] > li {
|
90
|
+
width: 100%;
|
91
|
+
|
92
|
+
// Reset large-block-grid nth-child margin
|
93
|
+
&:nth-child(n+1) {
|
94
|
+
margin-#{$default-opposite} : blockGridMarginCalc($block-grid-margin);
|
95
|
+
}
|
96
|
+
}
|
97
|
+
|
87
98
|
// Small block grid
|
88
99
|
@for $i from 2 through $block-grid-total {
|
89
100
|
.small-block-grid-#{($i)} {
|
@@ -97,3 +108,5 @@ $block-grid-margin : em(25px) !default;
|
|
97
108
|
|
98
109
|
// Base style for collapsed block-grid, written below to override other style
|
99
110
|
[class*="block-grid-"].collapse { @include block-grid($collapse: true); }
|
111
|
+
|
112
|
+
}
|
@@ -0,0 +1,110 @@
|
|
1
|
+
// ------------------------------------------
|
2
|
+
// BLOCK GRID
|
3
|
+
// Based heavily on ZURB's Foundation
|
4
|
+
// ------------------------------------------
|
5
|
+
|
6
|
+
$block-distance : em(15px) !default;
|
7
|
+
$max-blocks : 12 !default;
|
8
|
+
|
9
|
+
@mixin block-grid-calc (
|
10
|
+
$per-row : false,
|
11
|
+
$distance : $block-distance,
|
12
|
+
$collapse : false,
|
13
|
+
$for-base : true ) {
|
14
|
+
|
15
|
+
@if $per-row {
|
16
|
+
width : 100% / $per-row;
|
17
|
+
|
18
|
+
&:nth-of-type(n) {
|
19
|
+
clear: none;
|
20
|
+
}
|
21
|
+
&:nth-of-type(#{$per-row}n+1) {
|
22
|
+
clear: both;
|
23
|
+
}
|
24
|
+
} @else {
|
25
|
+
@if $collapse {
|
26
|
+
padding : 0;
|
27
|
+
} @else {
|
28
|
+
padding : 0 ($distance / 2);
|
29
|
+
}
|
30
|
+
}
|
31
|
+
}
|
32
|
+
|
33
|
+
@mixin block-grid (
|
34
|
+
$per-row : false,
|
35
|
+
$distance : $block-distance,
|
36
|
+
$collapse : false,
|
37
|
+
$for-base : true ) {
|
38
|
+
|
39
|
+
// For base class
|
40
|
+
@if $for-base {
|
41
|
+
display : block;
|
42
|
+
padding : 0;
|
43
|
+
|
44
|
+
@if $collapse {
|
45
|
+
margin : 0;
|
46
|
+
} @else {
|
47
|
+
margin : 0 (-$distance / 2);
|
48
|
+
}
|
49
|
+
|
50
|
+
@include clearfix;
|
51
|
+
|
52
|
+
& > li {
|
53
|
+
display : block;
|
54
|
+
height : auto;
|
55
|
+
float : $default-float;
|
56
|
+
@include block-grid-calc($distance:$distance, $collapse:$collapse);
|
57
|
+
}
|
58
|
+
}
|
59
|
+
|
60
|
+
@if $per-row {
|
61
|
+
& > li {
|
62
|
+
@include block-grid-calc($per-row:$per-row);
|
63
|
+
}
|
64
|
+
}
|
65
|
+
}
|
66
|
+
|
67
|
+
@if $include-block-grid {
|
68
|
+
|
69
|
+
/* ---------------
|
70
|
+
EDGE Block Grid
|
71
|
+
--------------- */
|
72
|
+
|
73
|
+
[class*="block-grid-"] {
|
74
|
+
@include block-grid();
|
75
|
+
|
76
|
+
&.collapse {
|
77
|
+
@include block-grid($collapse:true);
|
78
|
+
}
|
79
|
+
}
|
80
|
+
|
81
|
+
@for $i from 1 through $max-blocks {
|
82
|
+
.large-block-grid-#{$i} {
|
83
|
+
@include block-grid($per-row:$i, $for-base:false );
|
84
|
+
}
|
85
|
+
}
|
86
|
+
|
87
|
+
@include small {
|
88
|
+
// Make large-block-grid 100% width
|
89
|
+
[class*="large-block-grid-"] > li {
|
90
|
+
width: 100%;
|
91
|
+
}
|
92
|
+
|
93
|
+
// Remove large grid clearing
|
94
|
+
@for $i from 1 through $max-blocks {
|
95
|
+
.large-block-grid-#{$i} > li:nth-of-type(#{$i}n+1) {
|
96
|
+
clear: none;
|
97
|
+
}
|
98
|
+
}
|
99
|
+
|
100
|
+
@for $i from 1 through $max-blocks {
|
101
|
+
.small-block-grid-#{$i} {
|
102
|
+
@include block-grid($per-row:$i, $for-base:false );
|
103
|
+
}
|
104
|
+
}
|
105
|
+
}
|
106
|
+
|
107
|
+
|
108
|
+
|
109
|
+
|
110
|
+
} // include-block-grid
|
@@ -0,0 +1,50 @@
|
|
1
|
+
$button-padding : em(10px 20px);
|
2
|
+
|
3
|
+
@mixin button($bg-color:$main-color, $for-base:false) {
|
4
|
+
// Button Shadow
|
5
|
+
$shadow-base : 0 1px 0 darken($bg-color, 20%);
|
6
|
+
$shadow-hover : inset 1px 1px 5em rgba(black, 0.2);
|
7
|
+
|
8
|
+
background : $bg-color;
|
9
|
+
color : contrast-color($bg-color, #333, white, 50%);
|
10
|
+
border : none;
|
11
|
+
|
12
|
+
@if $full {
|
13
|
+
$shadow-base : 0 1px 0 darken($bg-color, 20%);
|
14
|
+
@include box-shadow($shadow-base );
|
15
|
+
}
|
16
|
+
|
17
|
+
@if $for-base {
|
18
|
+
position : relative;
|
19
|
+
cursor : pointer;
|
20
|
+
padding : $button-padding;
|
21
|
+
|
22
|
+
@if $full {
|
23
|
+
&:hover {
|
24
|
+
// background: darken($bg-color, 10%);
|
25
|
+
@include box-shadow($shadow-base, $shadow-hover );
|
26
|
+
}
|
27
|
+
|
28
|
+
&:active {
|
29
|
+
top: 1px;
|
30
|
+
border: none;
|
31
|
+
@include box-shadow($shadow-hover );
|
32
|
+
}
|
33
|
+
}
|
34
|
+
}
|
35
|
+
}
|
36
|
+
|
37
|
+
@if $include-button {
|
38
|
+
|
39
|
+
/* ---------------
|
40
|
+
EDGE Button
|
41
|
+
--------------- */
|
42
|
+
button,
|
43
|
+
.button,
|
44
|
+
input[type="button"],
|
45
|
+
input[type="submit"],
|
46
|
+
input[type="reset"] {
|
47
|
+
@include button($for-base: true);
|
48
|
+
}
|
49
|
+
|
50
|
+
}
|