sassyseeds 0.0.2 → 0.0.21
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +9 -1
- data/app/assets/stylesheets/_sassyseeds.scss +6 -3
- data/app/assets/stylesheets/base/_base.scss +5 -4
- data/app/assets/stylesheets/base/_color_palette.scss +1 -1
- data/app/assets/stylesheets/base/_typography.scss +27 -18
- data/app/assets/stylesheets/base/_unicode.scss +4 -0
- data/app/assets/stylesheets/elements/_blockquote.scss +28 -0
- data/app/assets/stylesheets/elements/_elements.scss +7 -15
- data/app/assets/stylesheets/patterns/_patterns.scss +1 -0
- data/app/assets/stylesheets/themes/_monochrome_theme.scss +6 -1
- data/bin/sassyseeds +0 -0
- data/lib/sassyseeds/version.rb +1 -1
- metadata +6 -3
- /data/app/assets/stylesheets/{elements → patterns}/_palette_swatch.scss +0 -0
data/README.md
CHANGED
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
#
|
|
1
|
+
# SassySeeds
|
|
2
|
+
|
|
3
|
+
SassySeeds supplies you with Sass utilities and mixins to begin your app's custom framework.
|
|
4
|
+
|
|
5
|
+
The goal of SassySeeds is give you controlled visual-styling of your core-elements.
|
|
6
|
+
This is achieved by using [a standard module definition for Sass](http://thesassway.com/intermediate/a-standard-module-definition-for-sass),
|
|
7
|
+
separating visual and positional styling.
|
|
8
|
+
|
|
9
|
+
Moar in the [wiki →](https://github.com/SassySeeds/sassyseeds/wiki)
|
|
2
10
|
|
|
3
11
|
# Installation
|
|
4
12
|
|
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
// import seeds
|
|
7
7
|
@import "base/base"; // reset, color-palette, typography, etc
|
|
8
8
|
@import "themes/monochrome_theme"; // use the base-variables in a selected theme.
|
|
9
|
-
@import "elements/elements"; // define visual styles for elements
|
|
9
|
+
@import "elements/elements"; // define visual styles for elements.
|
|
10
|
+
@import "patterns/patterns"; // useful patterns for building.
|
|
10
11
|
//---------------------------------------------------------------------------------
|
|
11
12
|
// apply visual seeds.
|
|
12
13
|
body { @include body-style; }
|
|
@@ -36,8 +37,10 @@ input {
|
|
|
36
37
|
&[type=password],
|
|
37
38
|
&[type=email],
|
|
38
39
|
&[type=number],
|
|
39
|
-
&[type=search]
|
|
40
|
-
}
|
|
40
|
+
&[type=search],
|
|
41
|
+
&[type=url] { @include text-input-style; }
|
|
42
|
+
}//(input)
|
|
43
|
+
|
|
41
44
|
textarea { @include text-input-style; }
|
|
42
45
|
|
|
43
46
|
table { @include table-style; }
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
@import "
|
|
2
|
-
@import "
|
|
3
|
-
@import "
|
|
4
|
-
@import "
|
|
1
|
+
@import "reset";
|
|
2
|
+
@import "color_palette";
|
|
3
|
+
@import "utilities";
|
|
4
|
+
@import "typography";
|
|
5
|
+
@import "unicode";
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
$sans-fallback: Arial, Sans-Serif;
|
|
7
7
|
$exo: 'Exo', $sans-fallback;
|
|
8
8
|
$source-sans: 'Source Sans Pro', $sans-fallback;
|
|
9
|
-
$sans: $
|
|
9
|
+
$sans: $source-sans;
|
|
10
10
|
$serif: serif;
|
|
11
11
|
$mono: "lucida console", mono;
|
|
12
12
|
$body-font-family: $sans;
|
|
@@ -46,80 +46,89 @@ $light-text-shadow: 0 -1px rgba($white, .3);
|
|
|
46
46
|
text-shadow: $light-text-shadow;
|
|
47
47
|
}//@mixin
|
|
48
48
|
|
|
49
|
+
//-------------------------------------------
|
|
50
|
+
// line-heights
|
|
51
|
+
// defining these as reusable variables can
|
|
52
|
+
// be very helpful for some fragile layouts.
|
|
53
|
+
$hero-line-height: 60px;
|
|
54
|
+
$hero-thick-line-height: $hero-line-height;
|
|
55
|
+
$hero-thin-line-height: $hero-line-height;
|
|
56
|
+
$h1-line-height: 52px;
|
|
57
|
+
$h2-line-height: 34px;
|
|
58
|
+
$h3-line-height: 30px;
|
|
59
|
+
$h4-line-height: 30px;
|
|
60
|
+
$h5-line-height: 24px;
|
|
61
|
+
$h6-line-height: 24px;
|
|
62
|
+
$bodycopy-line-height: 24px;
|
|
63
|
+
|
|
49
64
|
@mixin typestyle( $style ) {
|
|
50
65
|
|
|
51
66
|
@if $style == hero-thick {
|
|
52
67
|
font-size: 48px;
|
|
53
|
-
line-height:
|
|
68
|
+
line-height: $hero-thick-line-height;
|
|
54
69
|
font-weight: $demi;
|
|
55
70
|
color: $h136-color;
|
|
56
71
|
}//@if
|
|
57
72
|
|
|
58
73
|
@if $style == hero-thin {
|
|
59
74
|
font-size: 48px;
|
|
60
|
-
line-height:
|
|
61
|
-
font-weight:
|
|
75
|
+
line-height: $hero-thin-line-height;
|
|
76
|
+
font-weight: $light;
|
|
62
77
|
color: $h136-color;
|
|
63
78
|
}//@if
|
|
64
79
|
|
|
65
80
|
@if $style == h1 {
|
|
66
81
|
font-size: 36px;
|
|
67
|
-
line-height:
|
|
82
|
+
line-height: $h1-line-height;
|
|
68
83
|
font-weight: $demi;
|
|
69
84
|
color: $h136-color;
|
|
70
85
|
}//@if
|
|
71
86
|
|
|
72
87
|
@if $style == h2 {
|
|
73
88
|
font-size: 26px;
|
|
74
|
-
line-height:
|
|
89
|
+
line-height: $h2-line-height;
|
|
75
90
|
font-weight: $medium;
|
|
76
91
|
color: $h245-color;
|
|
77
92
|
}//@if
|
|
78
93
|
|
|
79
94
|
@if $style == h3 {
|
|
80
95
|
font-size: 22px;
|
|
81
|
-
line-height:
|
|
96
|
+
line-height: $h3-line-height;
|
|
82
97
|
font-weight: $medium;
|
|
83
98
|
color: $h136-color;
|
|
84
99
|
}//@if
|
|
85
100
|
|
|
86
101
|
@if $style == h4 {
|
|
87
102
|
font-size: 22px;
|
|
88
|
-
line-height:
|
|
103
|
+
line-height: $h4-line-height;
|
|
89
104
|
font-weight: $demi;
|
|
90
105
|
color: $h245-color;
|
|
91
106
|
}//@if
|
|
92
107
|
|
|
93
108
|
@if $style == h5 {
|
|
94
109
|
font-size: 18px;
|
|
95
|
-
line-height:
|
|
110
|
+
line-height: $h5-line-height;
|
|
96
111
|
font-weight: $demi;
|
|
97
112
|
color: $h245-color;
|
|
98
113
|
}//@if
|
|
99
114
|
|
|
100
115
|
@if $style == h6 {
|
|
101
116
|
font-size: 16px;
|
|
102
|
-
line-height:
|
|
117
|
+
line-height: $h6-line-height;
|
|
103
118
|
font-weight: $bold;
|
|
104
119
|
color: $h136-color;
|
|
105
120
|
}//@if
|
|
106
121
|
|
|
107
122
|
@if $style == bodycopy {
|
|
108
123
|
font-size: 16px;
|
|
109
|
-
line-height:
|
|
124
|
+
line-height: $bodycopy-line-height;
|
|
110
125
|
font-weight: $normal;
|
|
111
126
|
color: $bodycopy-color;
|
|
112
127
|
}//@if
|
|
113
128
|
|
|
114
129
|
@if $style == codecopy {
|
|
115
130
|
font-size: 12px;
|
|
116
|
-
line-height: 1;
|
|
131
|
+
line-height: 1; // reset this for mono
|
|
117
132
|
font-weight: $normal;
|
|
118
133
|
}//@if
|
|
119
|
-
|
|
120
134
|
}//@mixin
|
|
121
|
-
|
|
122
|
-
//------------------------------
|
|
123
|
-
// unicode characters
|
|
124
|
-
$checkmark-unicode: \2713;
|
|
125
|
-
$radio-circle-unicode: \25C9;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
//--------------------------------------------------------
|
|
2
|
+
// blockquote
|
|
3
|
+
// variable pivots
|
|
4
|
+
$blockquote-small-border-radius: $border-radius;
|
|
5
|
+
$blockquote-large-border-radius: $border-radius*5;
|
|
6
|
+
$blockquote-padding-vertical: 20px;
|
|
7
|
+
$blockquote-paddding-horizontal: 10px;
|
|
8
|
+
$blockquote-padding: $blockquote-padding-vertical $blockquote-paddding-horizontal;
|
|
9
|
+
//----------------------------------------------
|
|
10
|
+
|
|
11
|
+
@mixin blockquote-style {
|
|
12
|
+
padding: $blockquote-padding;
|
|
13
|
+
padding: $blockquote-padding;
|
|
14
|
+
|
|
15
|
+
font-style: $blockquote-font-style; //located in_typography.scss
|
|
16
|
+
@include typestyle( h2 ); //located in _typography.scss
|
|
17
|
+
|
|
18
|
+
background: $blockquote-bg;
|
|
19
|
+
@include box-shadow( 0 1px 4px 0 rgba(0,0,0, .4) );
|
|
20
|
+
@include border-radius(
|
|
21
|
+
$blockquote-large-border-radius
|
|
22
|
+
$blockquote-small-border-radius
|
|
23
|
+
$blockquote-large-border-radius
|
|
24
|
+
$blockquote-small-border-radius );
|
|
25
|
+
|
|
26
|
+
&:before { content: " \"\ "; }
|
|
27
|
+
}//@mixin
|
|
28
|
+
//--------------------------------------------------------
|
|
@@ -2,15 +2,13 @@
|
|
|
2
2
|
// no positional styling
|
|
3
3
|
|
|
4
4
|
// some element-styles need their own files
|
|
5
|
-
@import "
|
|
6
|
-
@import "
|
|
7
|
-
@import "
|
|
8
|
-
@import "
|
|
9
|
-
@import "
|
|
10
|
-
@import "
|
|
11
|
-
|
|
12
|
-
// ui elements
|
|
13
|
-
@import "elements/palette_swatch";
|
|
5
|
+
@import "buttons";
|
|
6
|
+
@import "links";
|
|
7
|
+
@import "lists";
|
|
8
|
+
@import "forms";
|
|
9
|
+
@import "checkbox_radio";
|
|
10
|
+
@import "tables";
|
|
11
|
+
@import "blockquote";
|
|
14
12
|
|
|
15
13
|
@mixin body-style {
|
|
16
14
|
background: $body-bg;
|
|
@@ -34,12 +32,6 @@
|
|
|
34
32
|
@mixin em-style { font-style: $em-font-style; }
|
|
35
33
|
@mixin strong-style { font-weight: $bold; }
|
|
36
34
|
|
|
37
|
-
$blockquote-padding: 20px 10px;
|
|
38
|
-
@mixin blockquote-style {
|
|
39
|
-
padding: $blockquote-padding;
|
|
40
|
-
&:before, &:after { content: " \"\ "; }
|
|
41
|
-
}//@mixin
|
|
42
|
-
|
|
43
35
|
@mixin selection-pseudo-style {
|
|
44
36
|
color: $selection-text-color;
|
|
45
37
|
background: $selection-bg-color;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@import "palette_swatch";
|
|
@@ -72,4 +72,9 @@ $selection-text-color: $body-bg-color;
|
|
|
72
72
|
// table
|
|
73
73
|
$table-bg-texture: $body-bg-texture;
|
|
74
74
|
$table-bg-color: $body-bg-color;
|
|
75
|
-
$table-bg: $table-bg-texture $table-bg-color;
|
|
75
|
+
$table-bg: $table-bg-texture $table-bg-color;
|
|
76
|
+
|
|
77
|
+
//blockquote
|
|
78
|
+
$blockquote-bg-color: lighten($body-bg-color, 3);
|
|
79
|
+
$blockquote-bg-texture: $body-bg-texture;
|
|
80
|
+
$blockquote-bg: $blockquote-bg-color $blockquote-bg-texture;
|
data/bin/sassyseeds
CHANGED
|
File without changes
|
data/lib/sassyseeds/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: sassyseeds
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.21
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2012-11-
|
|
12
|
+
date: 2012-11-16 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: compass-rails
|
|
@@ -61,15 +61,18 @@ files:
|
|
|
61
61
|
- app/assets/stylesheets/base/_color_palette.scss
|
|
62
62
|
- app/assets/stylesheets/base/_reset.scss
|
|
63
63
|
- app/assets/stylesheets/base/_typography.scss
|
|
64
|
+
- app/assets/stylesheets/base/_unicode.scss
|
|
64
65
|
- app/assets/stylesheets/base/_utilities.scss
|
|
66
|
+
- app/assets/stylesheets/elements/_blockquote.scss
|
|
65
67
|
- app/assets/stylesheets/elements/_buttons.scss
|
|
66
68
|
- app/assets/stylesheets/elements/_checkbox_radio.scss
|
|
67
69
|
- app/assets/stylesheets/elements/_elements.scss
|
|
68
70
|
- app/assets/stylesheets/elements/_forms.scss
|
|
69
71
|
- app/assets/stylesheets/elements/_links.scss
|
|
70
72
|
- app/assets/stylesheets/elements/_lists.scss
|
|
71
|
-
- app/assets/stylesheets/elements/_palette_swatch.scss
|
|
72
73
|
- app/assets/stylesheets/elements/_tables.scss
|
|
74
|
+
- app/assets/stylesheets/patterns/_palette_swatch.scss
|
|
75
|
+
- app/assets/stylesheets/patterns/_patterns.scss
|
|
73
76
|
- app/assets/stylesheets/themes/_monochrome_theme.scss
|
|
74
77
|
- bin/sassyseeds
|
|
75
78
|
- lib/generators/sassyseeds_generator.rb
|
|
File without changes
|