edge_framework 1.2.9 → 1.3.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +0 -1
- data/README.md +1 -1
- data/assets/kitchen-sink.html +2 -2
- data/assets/sass/edge/_base.scss +14 -22
- data/assets/sass/edge/_helpers.scss +1 -1
- data/assets/sass/edge/components/_code.scss +2 -5
- data/assets/sass/edge/components/_grid.scss +12 -0
- data/assets/sass/edge/components/_tile.scss +0 -1
- data/assets/sass/edge/components/_typography.scss +18 -16
- data/assets/sass/edge.scss +5 -4
- data/assets/sass/edgemail/_base.scss +34 -0
- data/assets/sass/edgemail/_components.scss +2 -0
- data/assets/sass/edgemail/_helpers.scss +1 -0
- data/assets/sass/edgemail/components/_generic.scss +60 -0
- data/assets/sass/edgemail/components/_normalize.scss +98 -0
- data/assets/sass/edgemail.scss +8 -0
- data/assets/sass/kitchen-sink-email.scss +2 -0
- data/config.rb +13 -0
- data/lib/edge/install_generator.rb +37 -13
- data/lib/edge/version.rb +2 -2
- data/lib/edge_framework.rb +13 -5
- data/template/base/{gitignore → .gitignore} +2 -1
- data/template/base/assets/js/app.js +7 -2
- data/template/base/assets/js/vendor/jquery.min.js +4 -6
- data/template/base/assets/sass/_setting.scss +9 -19
- data/template/base/assets/sass/framework.scss +1 -7
- data/template/base/config.rb +1 -1
- data/template/email/.gitignore +56 -0
- data/template/email/assets/css/.keep +0 -0
- data/template/email/assets/img/.keep +0 -0
- data/template/email/assets/js/app.js +5 -0
- data/template/email/assets/js/jquery.min.js +4 -0
- data/template/email/assets/sass/_setting.scss +43 -0
- data/template/email/assets/sass/app.scss +4 -0
- data/template/email/assets/sass/framework.scss +4 -0
- data/template/email/config.rb +15 -0
- data/template/email/index.html +53 -87
- data/template/email/robots.txt +4 -0
- metadata +21 -5
- data/.gitattributes +0 -22
- data/template/rails/app.js +0 -6
data/.gitignore
CHANGED
data/README.md
CHANGED
data/assets/kitchen-sink.html
CHANGED
data/assets/sass/edge/_base.scss
CHANGED
@@ -16,8 +16,13 @@ $experimental-support-for-khtml : false;
|
|
16
16
|
// ------------------
|
17
17
|
// OUTPUT CONFIG
|
18
18
|
// ------------------
|
19
|
-
|
20
|
-
|
19
|
+
|
20
|
+
// User modifiable
|
21
|
+
$responsive : true !default;
|
22
|
+
$adaptive : false !default;
|
23
|
+
|
24
|
+
// Shouldn't be modified by user
|
25
|
+
$user-mode : false !default; // check whether the mixin call is coming from framework or user
|
21
26
|
$is-in-media : false !default; // check if the code is within @media block
|
22
27
|
|
23
28
|
// Must be true
|
@@ -39,11 +44,11 @@ $include-code : false !default;
|
|
39
44
|
// ----------
|
40
45
|
// COLOR
|
41
46
|
// ----------
|
42
|
-
|
43
|
-
// Two main colors of your site
|
44
47
|
$main-color : #2a71e3 !default;
|
45
48
|
$sub-color : #d7d7d7 !default;
|
46
49
|
|
50
|
+
$link-color : $main-color !default;
|
51
|
+
|
47
52
|
$passive-color : #d7d7d7 !default;
|
48
53
|
$blue-color : #2a71e3 !default;
|
49
54
|
$yellow-color : #fac741 !default;
|
@@ -62,12 +67,9 @@ $g-transition : all .2s ease-out !default;
|
|
62
67
|
$body-font-size : 16px !default;
|
63
68
|
$body-line-height : 1.5 !default;
|
64
69
|
|
65
|
-
//
|
66
|
-
//
|
67
|
-
//
|
68
|
-
// font-size: em(14px);
|
69
|
-
// padding: em(10px 5px 20px);
|
70
|
-
// --------------------------------
|
70
|
+
// --------------
|
71
|
+
// EM CONVERTER
|
72
|
+
// --------------
|
71
73
|
|
72
74
|
// Strips unit and return plain number
|
73
75
|
@function stripUnit($num) {
|
@@ -103,13 +105,6 @@ $body-line-height : 1.5 !default;
|
|
103
105
|
|
104
106
|
// -------------------
|
105
107
|
// MEDIA QUERIES
|
106
|
-
// How to use:
|
107
|
-
// @include below(small)
|
108
|
-
// @include below(500px)
|
109
|
-
// @include above(retina)
|
110
|
-
// @include between(small, medium)
|
111
|
-
//
|
112
|
-
// @media only screen and #{above(small)} and #{portrait}
|
113
108
|
// -------------------
|
114
109
|
$mini-screen : 480px !default;
|
115
110
|
$small-screen : 767px !default;
|
@@ -293,12 +288,9 @@ $default-opposite : right !default;
|
|
293
288
|
$default-opposite : left;
|
294
289
|
}
|
295
290
|
|
296
|
-
//
|
291
|
+
// -------------
|
297
292
|
// TRIANGLE
|
298
|
-
//
|
299
|
-
//
|
300
|
-
// Don't specify the `height` to create equalateral triangle
|
301
|
-
// ----------------------------------------------------------
|
293
|
+
// -------------
|
302
294
|
@mixin triangle(
|
303
295
|
$width,
|
304
296
|
$direction : top,
|
@@ -5,12 +5,9 @@
|
|
5
5
|
// @origin Tim Shedor
|
6
6
|
// https://github.com/tshedor/workshop-wp-theme
|
7
7
|
|
8
|
-
$code-font-family :
|
8
|
+
$code-font-family : Consolas, Courier, "monospace" !default;
|
9
9
|
$code-theme : light !default; // dark or light
|
10
|
-
$code-margin-bottom :
|
11
|
-
@if $include-typography {
|
12
|
-
$code-margin-bottom : $p-margin-bottom;
|
13
|
-
}
|
10
|
+
$code-margin-bottom : 1em !default;
|
14
11
|
|
15
12
|
$code-markup-color : $blue-color;
|
16
13
|
$code-js-color : #ff8f00; // orange
|
@@ -40,6 +40,18 @@ $column-gutter : 20px !default;
|
|
40
40
|
min-width: $width + $gutter;
|
41
41
|
}
|
42
42
|
@include clearfix;
|
43
|
+
|
44
|
+
@if $adaptive {
|
45
|
+
@if $collapse {
|
46
|
+
min-width: $width;
|
47
|
+
} @else {
|
48
|
+
min-width: $width + $gutter;
|
49
|
+
}
|
50
|
+
|
51
|
+
@include below(small) {
|
52
|
+
min-width: 0;
|
53
|
+
}
|
54
|
+
}
|
43
55
|
}
|
44
56
|
|
45
57
|
// Nested and collapsed
|
@@ -13,8 +13,8 @@ $base-font-size : $body-font-size;
|
|
13
13
|
$base-line-height : $body-line-height;
|
14
14
|
|
15
15
|
// FONT FAMILY
|
16
|
-
$header-font-family :
|
17
|
-
$body-font-family :
|
16
|
+
$header-font-family : Helvetica, Arial, "sans-serif" !default;
|
17
|
+
$body-font-family : Helvetica, Arial, "sans-serif" !default;
|
18
18
|
|
19
19
|
// HEADER
|
20
20
|
$h1-font-size : 44px !default;
|
@@ -27,9 +27,6 @@ $h6-font-size : 16px !default;
|
|
27
27
|
$header-font-color : $body-font-color !default;
|
28
28
|
$header-font-weight : 700 !default;
|
29
29
|
|
30
|
-
// PARAGRAPH
|
31
|
-
$p-margin-bottom : 1em !default;
|
32
|
-
|
33
30
|
// LIST
|
34
31
|
$ul-parent-style : disc !default;
|
35
32
|
$ul-child-style : circle !default;
|
@@ -89,6 +86,19 @@ $ol-child-style : lower-alpha !default;
|
|
89
86
|
background-size: 100% em($font-size * $line-height, $font-size);
|
90
87
|
}
|
91
88
|
|
89
|
+
// ----------------------
|
90
|
+
// Create Inline List
|
91
|
+
// ----------------------
|
92
|
+
@mixin inline-list() {
|
93
|
+
@include clearfix();
|
94
|
+
|
95
|
+
> li {
|
96
|
+
display: inline-block;
|
97
|
+
float: left;
|
98
|
+
vertical-align: top;
|
99
|
+
}
|
100
|
+
}
|
101
|
+
|
92
102
|
@if $include-typography and not $user-mode {
|
93
103
|
|
94
104
|
/* -----------------
|
@@ -112,7 +122,7 @@ h1, h2, h3, h4, h5, h6 {
|
|
112
122
|
}
|
113
123
|
|
114
124
|
a {
|
115
|
-
color: $
|
125
|
+
color: $link-color;
|
116
126
|
}
|
117
127
|
|
118
128
|
|
@@ -125,7 +135,7 @@ h6 { font-size: em($h6-font-size); }
|
|
125
135
|
|
126
136
|
p {
|
127
137
|
margin-top: 0;
|
128
|
-
margin-bottom:
|
138
|
+
margin-bottom: 0;
|
129
139
|
}
|
130
140
|
|
131
141
|
// -----------
|
@@ -133,13 +143,7 @@ p {
|
|
133
143
|
// -----------
|
134
144
|
|
135
145
|
.inline-list {
|
136
|
-
@include
|
137
|
-
|
138
|
-
> li {
|
139
|
-
display: inline-block;
|
140
|
-
float: left;
|
141
|
-
vertical-align: top;
|
142
|
-
}
|
146
|
+
@include inline-list();
|
143
147
|
}
|
144
148
|
|
145
149
|
ul {
|
@@ -166,8 +170,6 @@ ol {
|
|
166
170
|
}
|
167
171
|
|
168
172
|
blockquote {
|
169
|
-
margin-bottom: $p-margin-bottom;
|
170
|
-
|
171
173
|
cite {
|
172
174
|
display: block;
|
173
175
|
font-style: italic;
|
data/assets/sass/edge.scss
CHANGED
@@ -1,7 +1,8 @@
|
|
1
|
-
/*
|
2
|
-
- EDGE Framework
|
3
|
-
-
|
4
|
-
|
1
|
+
/* --------------------
|
2
|
+
- EDGE Framework
|
3
|
+
- edge.setyono.net
|
4
|
+
- v1.3.0 (Furion)
|
5
|
+
--------------------- */
|
5
6
|
|
6
7
|
@import "edge/base";
|
7
8
|
@import "edge/components";
|
@@ -0,0 +1,34 @@
|
|
1
|
+
@charset "UTF-8";
|
2
|
+
@import "compass";
|
3
|
+
|
4
|
+
// FONT
|
5
|
+
$header-font-family : Helvetica, Arial, "sans-serif" !default;
|
6
|
+
$body-font-family : Helvetica, Arial, "sans-serif" !default;
|
7
|
+
|
8
|
+
// COLORS
|
9
|
+
$main-color : #2a71e3 !default;
|
10
|
+
$sub-color : #d7d7d7 !default;
|
11
|
+
|
12
|
+
$link-color : $main-color !default;
|
13
|
+
|
14
|
+
// SIZING
|
15
|
+
$row-max-width : 650px !default;
|
16
|
+
$mini-screen : 480px !default;
|
17
|
+
|
18
|
+
// BODY
|
19
|
+
$body-background : #ffffff;
|
20
|
+
$body-font-color : #222222;
|
21
|
+
$body-font-weight : 400;
|
22
|
+
$body-font-size : 16px;
|
23
|
+
$body-line-height : 1.5;
|
24
|
+
|
25
|
+
// TYPOGRAPHY
|
26
|
+
$h1-font-size : 44px !default;
|
27
|
+
$h2-font-size : 36px !default;
|
28
|
+
$h3-font-size : 28px !default;
|
29
|
+
$h4-font-size : 22px !default;
|
30
|
+
$h5-font-size : 18px !default;
|
31
|
+
$h6-font-size : 16px !default;
|
32
|
+
|
33
|
+
$header-font-color : $body-font-color !default;
|
34
|
+
$header-font-weight : 700 !default;
|
@@ -0,0 +1 @@
|
|
1
|
+
@import "base";
|
@@ -0,0 +1,60 @@
|
|
1
|
+
// ====================
|
2
|
+
// EDGEMAIL GENERIC
|
3
|
+
// ====================
|
4
|
+
|
5
|
+
/* ----------------
|
6
|
+
GENERIC STYLING
|
7
|
+
---------------- */
|
8
|
+
|
9
|
+
#background-table {
|
10
|
+
background-color: $body-background;
|
11
|
+
width: $row-max-width !important;
|
12
|
+
margin: 0 auto;
|
13
|
+
padding: 0;
|
14
|
+
font-size: $body-font-size;
|
15
|
+
font-family: $body-font-family;
|
16
|
+
line-height: 100% !important;
|
17
|
+
|
18
|
+
@include box-shadow(1px 1px 5px 2px rgba(black, .3) );
|
19
|
+
}
|
20
|
+
|
21
|
+
table {
|
22
|
+
width: 100%;
|
23
|
+
-premailer-cellspacing: 0;
|
24
|
+
-premailer-cellpadding: 0;
|
25
|
+
}
|
26
|
+
|
27
|
+
// LINK
|
28
|
+
%link-style {
|
29
|
+
color: $link-color;
|
30
|
+
|
31
|
+
&:active {
|
32
|
+
color: darken($link-color, 10%);
|
33
|
+
}
|
34
|
+
|
35
|
+
&:visited {
|
36
|
+
color: lighten($link-color, 10%);
|
37
|
+
}
|
38
|
+
}
|
39
|
+
|
40
|
+
a {
|
41
|
+
@extend %link-style;
|
42
|
+
}
|
43
|
+
|
44
|
+
// HEADER
|
45
|
+
h1, h2, h3, h4, h5, h6 {
|
46
|
+
color: $header-font-color;
|
47
|
+
font-family: $header-font-family !important;
|
48
|
+
font-weight: $header-font-weight;
|
49
|
+
|
50
|
+
a {
|
51
|
+
@extend %link-style;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
|
55
|
+
h1 { font-size: $h1-font-size; }
|
56
|
+
h2 { font-size: $h2-font-size; }
|
57
|
+
h3 { font-size: $h3-font-size; }
|
58
|
+
h4 { font-size: $h4-font-size; }
|
59
|
+
h5 { font-size: $h5-font-size; }
|
60
|
+
h6 { font-size: $h6-font-size; }
|
@@ -0,0 +1,98 @@
|
|
1
|
+
// =======================
|
2
|
+
// EDGEMAIL NORMALIZE
|
3
|
+
// =======================
|
4
|
+
// Based on htmlemailboilerplate.com/
|
5
|
+
|
6
|
+
/* -------------------
|
7
|
+
EDGEMAIL NORMALIZE
|
8
|
+
------------------- */
|
9
|
+
|
10
|
+
// Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design.
|
11
|
+
body {
|
12
|
+
width: 100% !important;
|
13
|
+
margin: 0;
|
14
|
+
padding: 0;
|
15
|
+
|
16
|
+
-webkit-text-size-adjust: 100%;
|
17
|
+
-ms-text-size-adjust: 100%;
|
18
|
+
}
|
19
|
+
|
20
|
+
// Some sensible defaults for images
|
21
|
+
img {
|
22
|
+
display: block;
|
23
|
+
outline: none;
|
24
|
+
text-decoration: none;
|
25
|
+
-ms-interpolation-mode: bicubic;
|
26
|
+
}
|
27
|
+
|
28
|
+
a img {
|
29
|
+
border:none;
|
30
|
+
}
|
31
|
+
|
32
|
+
// Yahoo paragraph fix
|
33
|
+
p {
|
34
|
+
margin: 1em 0;
|
35
|
+
}
|
36
|
+
|
37
|
+
// Remove spacing around Outlook 07, 10 tables
|
38
|
+
table {
|
39
|
+
border-collapse:collapse;
|
40
|
+
mso-table-lspace: 0pt;
|
41
|
+
mso-table-rspace: 0pt;
|
42
|
+
}
|
43
|
+
|
44
|
+
// ------------
|
45
|
+
// PHONE
|
46
|
+
// ------------
|
47
|
+
|
48
|
+
@media only screen and (max-width: 480px) {
|
49
|
+
#background-table {
|
50
|
+
width: 100%;
|
51
|
+
}
|
52
|
+
|
53
|
+
// Part one of controlling phone number linking for mobile.
|
54
|
+
a[href^="tel"],
|
55
|
+
a[href^="sms"] {
|
56
|
+
text-decoration: none;
|
57
|
+
color: $link-color;
|
58
|
+
pointer-events: none;
|
59
|
+
cursor: default;
|
60
|
+
}
|
61
|
+
|
62
|
+
.mobile_link a[href^="tel"],
|
63
|
+
.mobile_link a[href^="sms"] {
|
64
|
+
text-decoration: default;
|
65
|
+
color: orange !important;
|
66
|
+
pointer-events: auto;
|
67
|
+
cursor: default;
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
71
|
+
@media only screen and (max-width: 360px) {
|
72
|
+
#background-table {
|
73
|
+
width: 360px;
|
74
|
+
}
|
75
|
+
}
|
76
|
+
|
77
|
+
// ------------
|
78
|
+
// TABLET
|
79
|
+
// ------------
|
80
|
+
|
81
|
+
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
|
82
|
+
|
83
|
+
a[href^="tel"],
|
84
|
+
a[href^="sms"] {
|
85
|
+
cursor: default;
|
86
|
+
pointer-events: none;
|
87
|
+
text-decoration: none;
|
88
|
+
color: $link-color;
|
89
|
+
}
|
90
|
+
|
91
|
+
.mobile_link a[href^="tel"],
|
92
|
+
.mobile_link a[href^="sms"] {
|
93
|
+
cursor: default;
|
94
|
+
pointer-events: auto;
|
95
|
+
text-decoration: default;
|
96
|
+
color: $link-color;
|
97
|
+
}
|
98
|
+
}
|
data/config.rb
ADDED
@@ -0,0 +1,13 @@
|
|
1
|
+
http_path = "/"
|
2
|
+
css_dir = "assets/css"
|
3
|
+
images_dir = "assets/img"
|
4
|
+
sass_dir = "assets/sass"
|
5
|
+
javascripts_dir = "assets/js"
|
6
|
+
fonts_dir = "assets/fonts"
|
7
|
+
output_style = :nested
|
8
|
+
# output_style = :expanded or :nested or :compact or :compressed
|
9
|
+
|
10
|
+
relative_assets = true
|
11
|
+
|
12
|
+
# To disable debugging comments that display the original location of your selectors. Uncomment:
|
13
|
+
line_comments = false
|
@@ -6,23 +6,46 @@ module Edge
|
|
6
6
|
source_root File.join(File.dirname(__FILE__), "../../template/rails")
|
7
7
|
argument :layout_name, type: :string, default: "application", banner: "layout_name"
|
8
8
|
|
9
|
-
|
10
|
-
|
11
|
-
|
9
|
+
# Copy the template to Rails' assets directory
|
10
|
+
def create_assets
|
11
|
+
files_list = {
|
12
|
+
sass: ["_setting.scss", "framework.scss", "app.scss"],
|
13
|
+
img: ["favicon.png", "favicon-big.png"],
|
14
|
+
js: ["app.js"]
|
15
|
+
}
|
16
|
+
|
17
|
+
template_path = File.join(File.dirname(__FILE__), "..", "..", "template", "base", "assets")
|
12
18
|
|
13
|
-
|
14
|
-
|
19
|
+
# loop each file type
|
20
|
+
files_list.each do |type, files|
|
21
|
+
case type
|
22
|
+
when :sass
|
23
|
+
src_dir = "sass"
|
24
|
+
dest_dir = "stylesheets"
|
25
|
+
when :img
|
26
|
+
src_dir = "img"
|
27
|
+
dest_dir = "images"
|
28
|
+
when :js
|
29
|
+
src_dir = "js"
|
30
|
+
dest_dir = "javascripts"
|
31
|
+
end
|
15
32
|
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
33
|
+
# loop each file
|
34
|
+
files.each do |f|
|
35
|
+
f_path = File.join(template_path, src_dir, f)
|
36
|
+
create_file(
|
37
|
+
File.join("app", "assets", dest_dir, f),
|
38
|
+
File.binread(f_path)
|
39
|
+
)
|
40
|
+
end
|
41
|
+
end
|
42
|
+
end
|
21
43
|
|
22
|
-
|
23
|
-
|
44
|
+
def append_assets
|
45
|
+
# rails_ujs breaks, need to incorporate rails-behavior plugin for this to work seamlessly
|
46
|
+
# gsub_file "app/assets/javascripts/application#{detect_js_format[0]}", /\/\/= require jquery\n/, ""
|
24
47
|
|
25
|
-
insert_into_file "app/assets/stylesheets/application#{detect_css_format[0]}", "#{detect_css_format[1]} require framework\n",
|
48
|
+
insert_into_file "app/assets/stylesheets/application#{detect_css_format[0]}", "#{ detect_css_format[1] } require framework\n", before: "#{ detect_css_format[1] } require_tree"
|
26
49
|
end
|
27
50
|
|
28
51
|
def detect_js_format
|
@@ -55,5 +78,6 @@ module Edge
|
|
55
78
|
layout_name.underscore.downcase
|
56
79
|
end
|
57
80
|
end
|
81
|
+
|
58
82
|
end
|
59
83
|
end
|
data/lib/edge/version.rb
CHANGED
data/lib/edge_framework.rb
CHANGED
@@ -30,12 +30,13 @@ module Edge
|
|
30
30
|
return false
|
31
31
|
end
|
32
32
|
|
33
|
-
#
|
33
|
+
# gem home directory
|
34
34
|
home = File.expand_path( "..", File.dirname(__FILE__) )
|
35
35
|
template = File.join( home, "template" )
|
36
36
|
|
37
|
-
#
|
37
|
+
# get the target type
|
38
38
|
template_type = File.join( template, type )
|
39
|
+
|
39
40
|
# If directory doesn't exist
|
40
41
|
if !File.directory?(template_type)
|
41
42
|
puts "[error] \t Template not found"
|
@@ -44,9 +45,16 @@ module Edge
|
|
44
45
|
end
|
45
46
|
FileUtils.cp_r( Dir["#{template_type}/*"], destination )
|
46
47
|
|
47
|
-
# Copy base files
|
48
|
-
|
49
|
-
|
48
|
+
# Copy base files, except if email
|
49
|
+
unless type == "email"
|
50
|
+
base = File.join( template, "base" )
|
51
|
+
source = Dir.entries("#{base}/").reject { |e|
|
52
|
+
e == '.' || e == '..'
|
53
|
+
}.map{ |e|
|
54
|
+
"#{base}/#{e}"
|
55
|
+
}
|
56
|
+
FileUtils.cp_r( source, destination )
|
57
|
+
end
|
50
58
|
|
51
59
|
# Copy javascript files
|
52
60
|
# js_source = File.join( home, "assets", "js" )
|