sassyseeds 0.0.2 → 0.0.21
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/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
|