gluhu 0.0.1
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.
- checksums.yaml +7 -0
- data/CHANGELOG.md +0 -0
- data/README.md +13 -0
- data/lib/gluhu.rb +30 -0
- data/stylesheets/_fonts.scss +58 -0
- data/stylesheets/_forms.scss +102 -0
- data/stylesheets/_globals.scss +69 -0
- data/stylesheets/_grid.scss +71 -0
- data/stylesheets/_mixins.scss +5 -0
- data/stylesheets/_nav.scss +67 -0
- data/stylesheets/_ss-framework.scss +16 -0
- data/stylesheets/_typography.scss +51 -0
- data/stylesheets/_variables.scss +88 -0
- data/templates/project/_base.scss +88 -0
- data/templates/project/_ss-framework.scss +8 -0
- data/templates/project/manifest.rb +23 -0
- metadata +86 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
---
|
|
2
|
+
SHA1:
|
|
3
|
+
metadata.gz: d49550cef1a9a8f082e48d6decd7fdb3795aded9
|
|
4
|
+
data.tar.gz: 786f75152a5591d786759d2950206915422f4e45
|
|
5
|
+
SHA512:
|
|
6
|
+
metadata.gz: 5a895b939d62a65438b2127cc6c4defa3fa5bdf9acc683ef8a17cc955dc19b95f2da00eeec8fdd5b66102a9bfc9f4f578fba34ad7601eb1d3d8461744bb0bba5
|
|
7
|
+
data.tar.gz: 103d0587205763e0f268d6b16ac580a7936b4e5d035efe5489803748fa9bbb4f5d3a0b3b34155a709b47d4c0e158325ae4f06d5233f006f5abe04438f5eacff9
|
data/CHANGELOG.md
ADDED
|
File without changes
|
data/README.md
ADDED
data/lib/gluhu.rb
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
# All gems that are required for this extension to work should go here.
|
|
2
|
+
# These are the requires you would normally put in your config.rb file
|
|
3
|
+
# By default, you should always included Compass. Do not include your
|
|
4
|
+
# extension.
|
|
5
|
+
require 'compass'
|
|
6
|
+
|
|
7
|
+
# This tells Compass what your Compass extension is called, and where to find
|
|
8
|
+
# its files
|
|
9
|
+
# Replace 'extension' with the name of your extension. Spaces allowed.
|
|
10
|
+
extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
|
|
11
|
+
Compass::Frameworks.register('gluhu', :path => extension_path)
|
|
12
|
+
|
|
13
|
+
# Version and date of version for your Compass extension.
|
|
14
|
+
# Replace Extension with the name of your extension
|
|
15
|
+
# Letters, numbers, and underscores only
|
|
16
|
+
# Version is a number. If a version contains alphas, it will be created as
|
|
17
|
+
# a prerelease version
|
|
18
|
+
# Date is in the form of YYYY-MM-DD
|
|
19
|
+
module Gluhu
|
|
20
|
+
VERSION = "0.0.1"
|
|
21
|
+
DATE = "2014-11-22"
|
|
22
|
+
end
|
|
23
|
+
|
|
24
|
+
# This is where any custom SassScript should be placed. The functions will be
|
|
25
|
+
# available on require of your extension without the need for users to import
|
|
26
|
+
# any partials. Uncomment below.
|
|
27
|
+
|
|
28
|
+
# module Sass::Script::Functions
|
|
29
|
+
#
|
|
30
|
+
# end
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: 'icomoon';
|
|
3
|
+
src:url('fonts/icomoon.eot?j0lryd');
|
|
4
|
+
src:url('fonts/icomoon.eot?#iefixj0lryd') format('embedded-opentype'),
|
|
5
|
+
url('fonts/icomoon.woff?j0lryd') format('woff'),
|
|
6
|
+
url('fonts/icomoon.ttf?j0lryd') format('truetype'),
|
|
7
|
+
url('fonts/icomoon.svg?j0lryd#icomoon') format('svg');
|
|
8
|
+
font-weight: normal;
|
|
9
|
+
font-style: normal;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
[class^="icon-"], [class*=" icon-"] {
|
|
13
|
+
font-family: 'icomoon';
|
|
14
|
+
speak: none;
|
|
15
|
+
font-style: normal;
|
|
16
|
+
font-weight: normal;
|
|
17
|
+
font-variant: normal;
|
|
18
|
+
text-transform: none;
|
|
19
|
+
line-height: 1;
|
|
20
|
+
|
|
21
|
+
/* Better Font Rendering =========== */
|
|
22
|
+
-webkit-font-smoothing: antialiased;
|
|
23
|
+
-moz-osx-font-smoothing: grayscale;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.icon-home:before {
|
|
27
|
+
content: "\e600";
|
|
28
|
+
}
|
|
29
|
+
.icon-pencil:before {
|
|
30
|
+
content: "\e601";
|
|
31
|
+
}
|
|
32
|
+
.icon-tag:before {
|
|
33
|
+
content: "\e602";
|
|
34
|
+
}
|
|
35
|
+
.icon-cart:before {
|
|
36
|
+
content: "\e603";
|
|
37
|
+
}
|
|
38
|
+
.icon-search:before {
|
|
39
|
+
content: "\e604";
|
|
40
|
+
}
|
|
41
|
+
.icon-menu:before {
|
|
42
|
+
content: "\e605";
|
|
43
|
+
}
|
|
44
|
+
.icon-heart:before {
|
|
45
|
+
content: "\e606";
|
|
46
|
+
}
|
|
47
|
+
.icon-thumbs-up:before {
|
|
48
|
+
content: "\e607";
|
|
49
|
+
}
|
|
50
|
+
.icon-thumbs-up2:before {
|
|
51
|
+
content: "\e608";
|
|
52
|
+
}
|
|
53
|
+
.icon-facebook:before {
|
|
54
|
+
content: "\e609";
|
|
55
|
+
}
|
|
56
|
+
.icon-twitter:before {
|
|
57
|
+
content: "\e60a";
|
|
58
|
+
}
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
label {
|
|
2
|
+
display:block;
|
|
3
|
+
width:100%;
|
|
4
|
+
margin-bottom: $element-bottom-margin;
|
|
5
|
+
font-size:$base-font-size;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
input {
|
|
9
|
+
display:block;
|
|
10
|
+
width:100%;
|
|
11
|
+
font-size:$base-font-size;
|
|
12
|
+
margin-bottom: $element-bottom-margin;
|
|
13
|
+
padding: $form-element-padding;
|
|
14
|
+
border: $element-border;
|
|
15
|
+
outline: 0;
|
|
16
|
+
@include border-radius($form-border-radius);
|
|
17
|
+
&:focus,
|
|
18
|
+
&:active {
|
|
19
|
+
@include box-shadow($element-box-shadow);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
button {
|
|
24
|
+
background-color:$nav-button-background-color;
|
|
25
|
+
color:$button-text-color;
|
|
26
|
+
border:$button-border;
|
|
27
|
+
@include border-radius;
|
|
28
|
+
@include box-shadow;
|
|
29
|
+
margin-top:$button-margin-top;
|
|
30
|
+
margin-bottom:$button-margin-bottom;
|
|
31
|
+
padding: $form-element-padding;
|
|
32
|
+
font-size: $base-font-size;
|
|
33
|
+
outline: 0;
|
|
34
|
+
&:hover {
|
|
35
|
+
background-color:lighten($button-hover-color, $button-hover-color-amount);
|
|
36
|
+
cursor:pointer;
|
|
37
|
+
}
|
|
38
|
+
&:active {
|
|
39
|
+
background-color:darken($button-active-color, $button-active-color-amount);
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.radio-option {
|
|
44
|
+
input[type="radio"] {
|
|
45
|
+
display:inline;
|
|
46
|
+
width:initial;
|
|
47
|
+
outline: 0;
|
|
48
|
+
&:focus,
|
|
49
|
+
&:active {
|
|
50
|
+
@include box-shadow(none);
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
label {
|
|
54
|
+
display:block;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
input[type="checkbox"] {
|
|
59
|
+
outline:0;
|
|
60
|
+
display:inline;
|
|
61
|
+
width:initial;
|
|
62
|
+
&:focus,
|
|
63
|
+
&:active {
|
|
64
|
+
@include box-shadow(none);
|
|
65
|
+
}
|
|
66
|
+
@include border-radius(0);
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
textarea {
|
|
70
|
+
display:block;
|
|
71
|
+
width:100%;
|
|
72
|
+
font-size:$base-font-size;
|
|
73
|
+
margin-bottom: $element-bottom-margin;
|
|
74
|
+
padding: $form-element-padding;
|
|
75
|
+
border: $element-border;
|
|
76
|
+
outline: 0;
|
|
77
|
+
@include border-radius($form-border-radius);
|
|
78
|
+
&:focus,
|
|
79
|
+
&:active {
|
|
80
|
+
@include box-shadow($element-box-shadow);;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
select {
|
|
85
|
+
border:$element-border;
|
|
86
|
+
display:block;
|
|
87
|
+
width:100%;
|
|
88
|
+
font-size:$base-font-size;
|
|
89
|
+
margin-bottom: $element-bottom-margin;
|
|
90
|
+
@include border-radius($form-border-radius);
|
|
91
|
+
padding:$form-element-padding;
|
|
92
|
+
outline: 0;
|
|
93
|
+
&:focus,
|
|
94
|
+
&:active {
|
|
95
|
+
@include box-shadow($element-box-shadow);;
|
|
96
|
+
background-color: #fff;
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
input[type="submit"] {
|
|
101
|
+
width:initial;
|
|
102
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
html {
|
|
2
|
+
@include box-sizing();
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
*, *:before, *:after {
|
|
6
|
+
-moz-box-sizing: inherit;
|
|
7
|
+
-webkit-box-sizing: inherit;
|
|
8
|
+
box-sizing: inherit;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.sr-only {
|
|
12
|
+
display:none;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.hidden-lg {
|
|
16
|
+
@media (min-width: $breakpoint-width) {
|
|
17
|
+
display:none;
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.hidden-sm {
|
|
22
|
+
display:none;
|
|
23
|
+
@media (min-width: $breakpoint-width) {
|
|
24
|
+
display:initial;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
img {
|
|
29
|
+
width:100%;
|
|
30
|
+
height:auto;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.error-background {
|
|
34
|
+
padding: $form-element-padding;
|
|
35
|
+
background: $error-background-color;
|
|
36
|
+
@include border-radius($form-border-radius);
|
|
37
|
+
border: $error-background-border;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.success-background {
|
|
41
|
+
padding: $form-element-padding;
|
|
42
|
+
background: $success-background-color;
|
|
43
|
+
@include border-radius($form-border-radius);
|
|
44
|
+
border: $success-background-border;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.text-error {
|
|
48
|
+
color: $error-color;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.text-success {
|
|
52
|
+
color: $success-color;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.error {
|
|
56
|
+
@include box-shadow($error-box-shadow);
|
|
57
|
+
&:focus,
|
|
58
|
+
&:active {
|
|
59
|
+
@include box-shadow($error-box-shadow);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.success {
|
|
64
|
+
@include box-shadow($success-box-shadow);
|
|
65
|
+
&:focus,
|
|
66
|
+
&:active {
|
|
67
|
+
@include box-shadow($success-box-shadow);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
width:$container-width;
|
|
3
|
+
max-width: $max-width;
|
|
4
|
+
margin: 0 auto;
|
|
5
|
+
@include clearfix;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.container:after {
|
|
9
|
+
@include clearfix;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.row:after {
|
|
13
|
+
@include clearfix;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
[class*='column-'] {
|
|
17
|
+
float: left;
|
|
18
|
+
min-height: 1px;
|
|
19
|
+
padding: $column-padding;
|
|
20
|
+
width:100%;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@media (min-width:$breakpoint-width) {
|
|
24
|
+
.column-1 {
|
|
25
|
+
width: $column-1-width;
|
|
26
|
+
}
|
|
27
|
+
.column-2 {
|
|
28
|
+
width: $column-2-width;
|
|
29
|
+
}
|
|
30
|
+
.column-3 {
|
|
31
|
+
width: $column-3-width;
|
|
32
|
+
}
|
|
33
|
+
.column-4 {
|
|
34
|
+
width: $column-4-width;
|
|
35
|
+
}
|
|
36
|
+
.column-5 {
|
|
37
|
+
width: $column-5-width;
|
|
38
|
+
}
|
|
39
|
+
.column-6 {
|
|
40
|
+
width: $column-6-width;
|
|
41
|
+
}
|
|
42
|
+
.column-7 {
|
|
43
|
+
width: $column-7-width;
|
|
44
|
+
}
|
|
45
|
+
.column-8 {
|
|
46
|
+
width: $column-8-width;
|
|
47
|
+
}
|
|
48
|
+
.column-9 {
|
|
49
|
+
width: $column-9-width;
|
|
50
|
+
}
|
|
51
|
+
.column-10 {
|
|
52
|
+
width: $column-10-width;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.example-block {
|
|
57
|
+
background-color: #000;
|
|
58
|
+
width:100%;
|
|
59
|
+
height:50px;
|
|
60
|
+
color:#fff;
|
|
61
|
+
position:relative;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.vertical-center {
|
|
65
|
+
margin: auto;
|
|
66
|
+
position: absolute;
|
|
67
|
+
top: 0; left: 0; bottom: 0; right: 0;
|
|
68
|
+
overflow: auto;
|
|
69
|
+
width: 50%;
|
|
70
|
+
height: 50%;
|
|
71
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
.navigation {
|
|
2
|
+
display:none;
|
|
3
|
+
@media (min-width: $breakpoint-width) {
|
|
4
|
+
float:$nav-float;
|
|
5
|
+
display:initial;
|
|
6
|
+
}
|
|
7
|
+
ul {
|
|
8
|
+
list-style: none;
|
|
9
|
+
padding-left:0;
|
|
10
|
+
margin-bottom: 0;
|
|
11
|
+
@media (min-width:$breakpoint-width) {
|
|
12
|
+
@include horizontal-list-container;
|
|
13
|
+
}
|
|
14
|
+
li {
|
|
15
|
+
margin-bottom:$nav-list-margin-bottom;
|
|
16
|
+
@media (min-width: $breakpoint-width) {
|
|
17
|
+
margin-bottom:0;
|
|
18
|
+
}
|
|
19
|
+
&:first-child {
|
|
20
|
+
margin-top: $nav-list-margin-bottom;
|
|
21
|
+
@media (min-width: $breakpoint-width) {
|
|
22
|
+
margin-top: 0;
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
&:last-child {
|
|
26
|
+
margin-bottom:0;
|
|
27
|
+
}
|
|
28
|
+
@media (min-width: $breakpoint-width) {
|
|
29
|
+
@include horizontal-list-item($nav-padding);
|
|
30
|
+
}
|
|
31
|
+
a {
|
|
32
|
+
background-color:$nav-button-background-color;
|
|
33
|
+
padding:$nav-link-padding;
|
|
34
|
+
@include box-shadow;
|
|
35
|
+
@include border-radius;
|
|
36
|
+
color:$nav-button-text-color;
|
|
37
|
+
text-decoration:none;
|
|
38
|
+
display:block;
|
|
39
|
+
&:hover {
|
|
40
|
+
text-decoration:underline;
|
|
41
|
+
background-color:lighten($nav-button-background-color, 5%);
|
|
42
|
+
}
|
|
43
|
+
&:focus, &:active {
|
|
44
|
+
background-color:darken($nav-button-background-color, 20%);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
.hamburger-menu-button {
|
|
53
|
+
.icon-menu {
|
|
54
|
+
font-size:$hamburger-menu-size;
|
|
55
|
+
}
|
|
56
|
+
border: 0;
|
|
57
|
+
background-color: $hamburger-menu-background-color;
|
|
58
|
+
outline: 0;
|
|
59
|
+
padding: $hamburger-menu-padding;
|
|
60
|
+
cursor: pointer;
|
|
61
|
+
color:$hamburger-menu-color;
|
|
62
|
+
outline: 0;
|
|
63
|
+
float:right;
|
|
64
|
+
@media (min-width:$breakpoint-width) {
|
|
65
|
+
display:none;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
// Your Compass Extension's Sass goes here! Run wild!
|
|
2
|
+
|
|
3
|
+
@import "compass/reset";
|
|
4
|
+
@import "compass/css3/box-sizing";
|
|
5
|
+
@import "compass/typography/vertical_rhythm";
|
|
6
|
+
@import "compass/typography/lists/horizontal-list";
|
|
7
|
+
@import "compass/css3/border-radius";
|
|
8
|
+
@import "compass/css3/box-shadow";
|
|
9
|
+
@import "_variables.scss";
|
|
10
|
+
@import "_mixins.scss";
|
|
11
|
+
@import "_globals.scss";
|
|
12
|
+
@import "_grid.scss";
|
|
13
|
+
@import "_fonts.scss";
|
|
14
|
+
@import "_typography.scss";
|
|
15
|
+
@import "_nav.scss";
|
|
16
|
+
@import "_forms.scss";
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
@include establish-baseline;
|
|
2
|
+
|
|
3
|
+
body {
|
|
4
|
+
font-family: $font-stack;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
h1 {
|
|
8
|
+
font-family: $heading-font-stack;
|
|
9
|
+
@include adjust-font-size-to($h1-size);
|
|
10
|
+
margin-bottom: rhythm(1, $h1-size);
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.h2-logo {
|
|
14
|
+
font-family: $heading-font-stack;
|
|
15
|
+
display:inline-block;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
h2 {
|
|
19
|
+
font-family: $heading-font-stack;
|
|
20
|
+
@include adjust-font-size-to($h2-size);
|
|
21
|
+
margin-bottom: rhythm(1, $h2-size);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
h3 {
|
|
25
|
+
font-family: $heading-font-stack;
|
|
26
|
+
@include adjust-font-size-to($h3-size);
|
|
27
|
+
margin-bottom: rhythm(1, $h3-size);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
p {
|
|
31
|
+
@include trailer;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.lead-text {
|
|
35
|
+
@include adjust-font-size-to($lead-text-size);
|
|
36
|
+
@include trailer(1, $lead-text-size);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
ul {
|
|
40
|
+
padding-left:$list-padding;
|
|
41
|
+
list-style-type:disc;
|
|
42
|
+
@include trailer;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
ol {
|
|
46
|
+
padding-left:$list-padding;
|
|
47
|
+
list-style-type:decimal;
|
|
48
|
+
@include trailer;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/* Grid ================ */
|
|
2
|
+
|
|
3
|
+
$max-width: 1000px !default;
|
|
4
|
+
$container-width:90% !default;
|
|
5
|
+
$breakpoint-width: 992px !default;
|
|
6
|
+
$column-1-width: 10% !default;
|
|
7
|
+
$column-2-width: 20% !default;
|
|
8
|
+
$column-3-width: 30% !default;
|
|
9
|
+
$column-4-width: 40% !default;
|
|
10
|
+
$column-5-width: 50% !default;
|
|
11
|
+
$column-6-width: 60% !default;
|
|
12
|
+
$column-7-width: 70% !default;
|
|
13
|
+
$column-8-width: 80% !default;
|
|
14
|
+
$column-9-width: 90% !default;
|
|
15
|
+
$column-10-width: 100% !default;
|
|
16
|
+
$column-padding: 10px !default;
|
|
17
|
+
|
|
18
|
+
/* typography =============== */
|
|
19
|
+
|
|
20
|
+
$font-stack: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif !default;
|
|
21
|
+
$heading-font-stack: 'Georgia', serif !default;
|
|
22
|
+
$base-font-size: 16px !default;
|
|
23
|
+
$base-line-height: 24px !default;
|
|
24
|
+
$h1-size:50px !default;
|
|
25
|
+
$h2-size:37px !default;
|
|
26
|
+
$h3-size:28px !default;
|
|
27
|
+
$lead-text-size:21px !default;
|
|
28
|
+
$list-padding: 40px !default;
|
|
29
|
+
|
|
30
|
+
/* Nav stuff =============== */
|
|
31
|
+
|
|
32
|
+
$nav-float: right !default;
|
|
33
|
+
$nav-button-background-color: #cc3d27 !default;
|
|
34
|
+
$nav-button-text-color: #fff !default;
|
|
35
|
+
/* Margin bottom at small viewports */
|
|
36
|
+
$nav-list-margin-bottom: 20px !default;
|
|
37
|
+
$nav-list-margin-top: 20px !default;
|
|
38
|
+
/* The padding around the link element */
|
|
39
|
+
$nav-link-padding: 15px !default;
|
|
40
|
+
/* The padding between navigation elememts */
|
|
41
|
+
$nav-padding: 10px !default;
|
|
42
|
+
$default-box-shadow-color: darken($nav-button-background-color, 20%) !default;
|
|
43
|
+
$default-box-shadow-v-offset: 4px !default;
|
|
44
|
+
$default-box-shadow-blur: 1px !default;
|
|
45
|
+
$hamburger-menu-padding: 5px !default;
|
|
46
|
+
$hamburger-menu-color: #fff !default;
|
|
47
|
+
$hamburger-menu-size: 28px !default;
|
|
48
|
+
$hamburger-menu-background-color: #cc3d27 !default;
|
|
49
|
+
|
|
50
|
+
/* Validation states =========== */
|
|
51
|
+
|
|
52
|
+
/* success */
|
|
53
|
+
|
|
54
|
+
$success-color: #109500 !default;
|
|
55
|
+
$success-background-color: lighten($success-color, 40%) !default;
|
|
56
|
+
$success-background-border: 2px solid darken($success-color, 20%) !default;
|
|
57
|
+
$success-box-shadow: 0px 0px 3px 2px $success-color !default;
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
/* errors */
|
|
61
|
+
|
|
62
|
+
$error-color:#E13020 !default;
|
|
63
|
+
$error-background-color: lighten($error-color, 20%) !default;
|
|
64
|
+
$error-background-border: 2px solid darken($error-color, 20%) !default;
|
|
65
|
+
$error-box-shadow: 0px 0px 3px 2px $error-color !default;
|
|
66
|
+
|
|
67
|
+
/* forms ================== */
|
|
68
|
+
|
|
69
|
+
$outline-color: #058AD9 !default;
|
|
70
|
+
$element-border: 1px solid #ccc !default;
|
|
71
|
+
$form-element-padding: 10px !default;
|
|
72
|
+
$element-box-shadow: 0px 0px 3px 2px $outline-color !default;
|
|
73
|
+
$form-border-radius:10px !default;
|
|
74
|
+
/* Bottom margin between form elements */
|
|
75
|
+
$element-bottom-margin: 10px !default;
|
|
76
|
+
|
|
77
|
+
/* Button */
|
|
78
|
+
$button-text-color: #fff !default;
|
|
79
|
+
$button-border: 0 !default;
|
|
80
|
+
$button-margin-top: 10px !default;
|
|
81
|
+
$button-margin-bottom: 20px !default;
|
|
82
|
+
$button-color: #cc3d27 !default;
|
|
83
|
+
/* Lightens the button color */
|
|
84
|
+
$button-hover-color: $button-color !default;
|
|
85
|
+
$button-hover-color-amount: 5% !default;
|
|
86
|
+
/* Darkens the button color */
|
|
87
|
+
$button-active-color: $button-color !default;
|
|
88
|
+
$button-active-color-amount: 20% !default;
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/* Grid ================ */
|
|
2
|
+
|
|
3
|
+
$max-width: 1000px ;
|
|
4
|
+
$container-width:90% ;
|
|
5
|
+
$breakpoint-width: 992px ;
|
|
6
|
+
$column-1-width: 10% ;
|
|
7
|
+
$column-2-width: 20% ;
|
|
8
|
+
$column-3-width: 30% ;
|
|
9
|
+
$column-4-width: 40% ;
|
|
10
|
+
$column-5-width: 50% ;
|
|
11
|
+
$column-6-width: 60% ;
|
|
12
|
+
$column-7-width: 70% ;
|
|
13
|
+
$column-8-width: 80% ;
|
|
14
|
+
$column-9-width: 90% ;
|
|
15
|
+
$column-10-width: 100% ;
|
|
16
|
+
$column-padding: 10px ;
|
|
17
|
+
|
|
18
|
+
/* typography =============== */
|
|
19
|
+
|
|
20
|
+
$font-stack: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif ;
|
|
21
|
+
$heading-font-stack: 'Georgia', serif ;
|
|
22
|
+
$base-font-size: 16px ;
|
|
23
|
+
$base-line-height: 24px ;
|
|
24
|
+
$h1-size:50px ;
|
|
25
|
+
$h2-size:37px ;
|
|
26
|
+
$h3-size:28px ;
|
|
27
|
+
$lead-text-size:21px ;
|
|
28
|
+
$list-padding: 40px ;
|
|
29
|
+
|
|
30
|
+
/* Nav stuff =============== */
|
|
31
|
+
|
|
32
|
+
$nav-float: right ;
|
|
33
|
+
$nav-button-background-color: #cc3d27 ;
|
|
34
|
+
$nav-button-text-color: #fff ;
|
|
35
|
+
/* Margin bottom at small viewports */
|
|
36
|
+
$nav-list-margin-bottom: 20px ;
|
|
37
|
+
$nav-list-margin-top: 20px ;
|
|
38
|
+
/* The padding around the link element */
|
|
39
|
+
$nav-link-padding: 15px ;
|
|
40
|
+
/* The padding between navigation elememts */
|
|
41
|
+
$nav-padding: 10px ;
|
|
42
|
+
$default-box-shadow-color: darken($nav-button-background-color, 20%) ;
|
|
43
|
+
$default-box-shadow-v-offset: 4px ;
|
|
44
|
+
$default-box-shadow-blur: 1px ;
|
|
45
|
+
$hamburger-menu-padding: 5px ;
|
|
46
|
+
$hamburger-menu-color: #fff ;
|
|
47
|
+
$hamburger-menu-size: 28px ;
|
|
48
|
+
$hamburger-menu-background-color: #cc3d27 ;
|
|
49
|
+
|
|
50
|
+
/* Validation states =========== */
|
|
51
|
+
|
|
52
|
+
/* success */
|
|
53
|
+
|
|
54
|
+
$success-color: #109500 ;
|
|
55
|
+
$success-background-color: lighten($success-color, 40%) ;
|
|
56
|
+
$success-background-border: 2px solid darken($success-color, 20%) ;
|
|
57
|
+
$success-box-shadow: 0px 0px 3px 2px $success-color ;
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
/* errors */
|
|
61
|
+
|
|
62
|
+
$error-color:#E13020 ;
|
|
63
|
+
$error-background-color: lighten($error-color, 20%) ;
|
|
64
|
+
$error-background-border: 2px solid darken($error-color, 20%) ;
|
|
65
|
+
$error-box-shadow: 0px 0px 3px 2px $error-color ;
|
|
66
|
+
|
|
67
|
+
/* forms ================== */
|
|
68
|
+
|
|
69
|
+
$outline-color: #058AD9 ;
|
|
70
|
+
$element-border: 1px solid #ccc ;
|
|
71
|
+
$form-element-padding: 10px ;
|
|
72
|
+
$element-box-shadow: 0px 0px 3px 2px $outline-color ;
|
|
73
|
+
$form-border-radius:10px ;
|
|
74
|
+
/* Bottom margin between form elements */
|
|
75
|
+
$element-bottom-margin: 10px ;
|
|
76
|
+
|
|
77
|
+
/* Button */
|
|
78
|
+
$button-text-color: #fff ;
|
|
79
|
+
$button-border: 0 ;
|
|
80
|
+
$button-margin-top: 10px ;
|
|
81
|
+
$button-margin-bottom: 20px ;
|
|
82
|
+
$button-color: #cc3d27 ;
|
|
83
|
+
/* Lightens the button color */
|
|
84
|
+
$button-hover-color: $button-color ;
|
|
85
|
+
$button-hover-color-amount: 5% ;
|
|
86
|
+
/* Darkens the button color */
|
|
87
|
+
$button-active-color: $button-color ;
|
|
88
|
+
$button-active-color-amount: 20% ;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
// Welcome to SS-Framework! This is the file that I suggest you centralize your imports in. The _base.scss file
|
|
2
|
+
// contains configurable variables. You can change almost everything here without touching the core code. It's
|
|
3
|
+
// importnat that _base.scss is imported before the ss-framework-compass-extension in order to override the
|
|
4
|
+
// variables in the core file.
|
|
5
|
+
|
|
6
|
+
@import "_base.scss";
|
|
7
|
+
@import "_ss-framework-compass-extension";
|
|
8
|
+
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
# Description
|
|
2
|
+
description "SS-Framework is a front-end framework for building websites more quickly."
|
|
3
|
+
|
|
4
|
+
# Stylesheet Import
|
|
5
|
+
file '_base.scss', :like => :stylesheet, :media => 'screen, projection'
|
|
6
|
+
file '_ss-framework.scss', :like => :stylesheet, :media => 'screen, projection'
|
|
7
|
+
|
|
8
|
+
# Javascript Import
|
|
9
|
+
# file 'scripts.js', :like => :javascript, :to => 'scripts.js'
|
|
10
|
+
|
|
11
|
+
# General File Import
|
|
12
|
+
# file 'README.md', :to => "README.md"
|
|
13
|
+
|
|
14
|
+
# Compass Extension Help
|
|
15
|
+
help %Q{
|
|
16
|
+
Help is available on the Github repo.
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
# Compass Extension Welcome Message
|
|
20
|
+
# Users will see this when they create a new project using this template.
|
|
21
|
+
welcome_message %Q{
|
|
22
|
+
Welcome to the SS-Framework compass-extension. May the code be ever in your favour.
|
|
23
|
+
}
|
metadata
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: gluhu
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: 0.0.1
|
|
5
|
+
platform: ruby
|
|
6
|
+
authors:
|
|
7
|
+
- Andrew Chappell
|
|
8
|
+
autorequire:
|
|
9
|
+
bindir: bin
|
|
10
|
+
cert_chain: []
|
|
11
|
+
date: 2014-11-22 00:00:00.000000000 Z
|
|
12
|
+
dependencies:
|
|
13
|
+
- !ruby/object:Gem::Dependency
|
|
14
|
+
name: sass
|
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
|
16
|
+
requirements:
|
|
17
|
+
- - '>='
|
|
18
|
+
- !ruby/object:Gem::Version
|
|
19
|
+
version: 3.3.14
|
|
20
|
+
type: :runtime
|
|
21
|
+
prerelease: false
|
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
23
|
+
requirements:
|
|
24
|
+
- - '>='
|
|
25
|
+
- !ruby/object:Gem::Version
|
|
26
|
+
version: 3.3.14
|
|
27
|
+
- !ruby/object:Gem::Dependency
|
|
28
|
+
name: compass
|
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
|
30
|
+
requirements:
|
|
31
|
+
- - '>='
|
|
32
|
+
- !ruby/object:Gem::Version
|
|
33
|
+
version: 1.0.1
|
|
34
|
+
type: :runtime
|
|
35
|
+
prerelease: false
|
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
37
|
+
requirements:
|
|
38
|
+
- - '>='
|
|
39
|
+
- !ruby/object:Gem::Version
|
|
40
|
+
version: 1.0.1
|
|
41
|
+
description: A front end framework built with SASS and extending Compass
|
|
42
|
+
email:
|
|
43
|
+
- acha5066@gmail.com
|
|
44
|
+
executables: []
|
|
45
|
+
extensions: []
|
|
46
|
+
extra_rdoc_files: []
|
|
47
|
+
files:
|
|
48
|
+
- CHANGELOG.md
|
|
49
|
+
- README.md
|
|
50
|
+
- lib/gluhu.rb
|
|
51
|
+
- stylesheets/_fonts.scss
|
|
52
|
+
- stylesheets/_forms.scss
|
|
53
|
+
- stylesheets/_globals.scss
|
|
54
|
+
- stylesheets/_grid.scss
|
|
55
|
+
- stylesheets/_mixins.scss
|
|
56
|
+
- stylesheets/_nav.scss
|
|
57
|
+
- stylesheets/_ss-framework.scss
|
|
58
|
+
- stylesheets/_typography.scss
|
|
59
|
+
- stylesheets/_variables.scss
|
|
60
|
+
- templates/project/_base.scss
|
|
61
|
+
- templates/project/_ss-framework.scss
|
|
62
|
+
- templates/project/manifest.rb
|
|
63
|
+
homepage:
|
|
64
|
+
licenses: []
|
|
65
|
+
metadata: {}
|
|
66
|
+
post_install_message:
|
|
67
|
+
rdoc_options: []
|
|
68
|
+
require_paths:
|
|
69
|
+
- lib
|
|
70
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
71
|
+
requirements:
|
|
72
|
+
- - '>='
|
|
73
|
+
- !ruby/object:Gem::Version
|
|
74
|
+
version: '0'
|
|
75
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
76
|
+
requirements:
|
|
77
|
+
- - '>='
|
|
78
|
+
- !ruby/object:Gem::Version
|
|
79
|
+
version: 1.9.0
|
|
80
|
+
requirements: []
|
|
81
|
+
rubyforge_project: gluhu
|
|
82
|
+
rubygems_version: 2.4.4
|
|
83
|
+
signing_key:
|
|
84
|
+
specification_version: 4
|
|
85
|
+
summary: A front end framework for speeding up development
|
|
86
|
+
test_files: []
|