survivalkit 1.0.beta.7 → 1.0.beta.8

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.
Files changed (15) hide show
  1. data/CHANGELOG.markdown +4 -0
  2. data/lib/survivalkit.rb +3 -2
  3. data/stylesheets/survivalkit/extend/_sticky-footer.scss +1 -1
  4. data/stylesheets/survivalkit/functions/_calculations.scss +4 -10
  5. data/stylesheets/survivalkit/mixins/_all.scss +2 -3
  6. data/stylesheets/survivalkit/mixins/_typography.scss +5 -18
  7. data/stylesheets/survivalkit/mixins/_ui.scss +65 -7
  8. data/stylesheets/survivalkit/survival_kit/_survival-kit.scss +2 -2
  9. data/templates/shared/partials/01-variables/_base.scss +9 -7
  10. data/templates/shared/partials/01-variables/_colors.scss +2 -2
  11. data/templates/shared/partials/01-variables/_fonts.scss +3 -1
  12. data/templates/shared/partials/05-layout/_grids-susy.scss +1 -1
  13. data/templates/shared/style.scss +7 -7
  14. metadata +16 -4
  15. data/stylesheets/survivalkit/mixins/_patterns.scss +0 -62
data/CHANGELOG.markdown CHANGED
@@ -1,5 +1,9 @@
1
1
  # Changelog
2
2
 
3
+ ## 1.0.beta.8 - August 28, 2012
4
+ * small updates
5
+ * clean installation option
6
+
3
7
  ## 1.0.beta.6 and 7 - August 20, 2012
4
8
  * update replace-list-numbers mixin
5
9
 
data/lib/survivalkit.rb CHANGED
@@ -2,11 +2,12 @@ require 'compass'
2
2
  require 'susy'
3
3
  require 'breakpoint'
4
4
  require 'modular-scale'
5
+ require 'color-schemer'
5
6
  Compass::Frameworks.register("survivalkit", :path => "#{File.dirname(__FILE__)}/..")
6
7
 
7
8
  module SurvivalKit
8
9
 
9
- VERSION = "1.0.beta.7"
10
- DATE = "2012-08-20"
10
+ VERSION = "1.0.beta.8"
11
+ DATE = "2012-08-28"
11
12
 
12
13
  end
data/stylesheets/survivalkit/extend/_sticky-footer.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  }
10
10
 
11
11
  %frame {
12
- // aplly to <body>
12
+ // apply to <body>
13
13
  display: table;
14
14
  height: 100%;
15
15
  width: 100%;
data/stylesheets/survivalkit/functions/_calculations.scss CHANGED
@@ -9,16 +9,10 @@
9
9
  }
10
10
 
11
11
  // shortcut name
12
- @function cp($target, $container) {
13
- @return calc-percent($target, $container);
12
+ @function cp($args...) {
13
+ @return calc-percent($args...);
14
14
  }
15
15
 
16
- @function ce($target, $container) {
17
- @return calc-em($target, $container);
18
- }
19
-
20
- // return the width of an arbitrary number of columns in a css grid system
21
- @function calc-col-width($number-of-cols) {
22
- $calc-width: $kit-col-width * $number-of-cols + $kit-gutter-width * ($number-of-cols - 1);
23
- @return $calc-width;
16
+ @function ce($args...) {
17
+ @return calc-em($args...);
24
18
  }
data/stylesheets/survivalkit/mixins/_all.scss CHANGED
@@ -1,6 +1,5 @@
1
1
  @import "helpers";
2
- @import "typography";
3
2
  @import "layout";
4
- @import "patterns";
5
- @import "ui";
6
3
  @import "pseudo";
4
+ @import "typography";
5
+ @import "ui";
data/stylesheets/survivalkit/mixins/_typography.scss CHANGED
@@ -30,19 +30,18 @@
30
30
  @mixin undo-border-links {
31
31
  & {
32
32
  text-decoration: none;
33
- // border-bottom: inherit
34
- border-bottom-style: inherit;
33
+ border-bottom: none;
35
34
  &:visited {
36
- border-bottom-color: inherit;
35
+ border-bottom: none;
37
36
  }
38
37
  &:focus {
39
- border-bottom-color: inherit;
38
+ border-bottom: none;
40
39
  }
41
40
  &:hover {
42
- border-bottom-color: inherit;
41
+ border-bottom: none;
43
42
  }
44
43
  &:active {
45
- border-bottom-color: inherit;
44
+ border-bottom: none;
46
45
  }
47
46
  }
48
47
  }
@@ -52,18 +51,6 @@
52
51
  @include transition($property, $time, $easing);
53
52
  }
54
53
 
55
- // remove bottom borders from better links
56
- // call directly from an <a> element
57
- // (needed when linking an <img/> for example)
58
- @mixin remove-link-underlines {
59
- & {
60
- border-bottom: none;
61
- &:hover {
62
- border-bottom: none;
63
- }
64
- }
65
- }
66
-
67
54
  // Only use the fancy ampersand in <h#> tags */
68
55
  @mixin header-ampersands($size: 1em) {
69
56
  h1 .amp, h2 .amp, h3 .amp, h4 .amp, h5 .amp, h6 .amp {
data/stylesheets/survivalkit/mixins/_ui.scss CHANGED
@@ -12,8 +12,7 @@
12
12
  a {
13
13
  border-#{$dir}: 1px solid $border-color-active;
14
14
  background-color: $background-color-active;
15
- // padding-#{$dir}: 0
16
-
15
+
17
16
  }
18
17
  }
19
18
  a {
@@ -23,10 +22,6 @@
23
22
  color: $border-color;
24
23
  };
25
24
  background-color: $background-color;
26
- // float: left
27
- // margin-top: -1px
28
- // position: relative
29
- // #{$dir}: -1px
30
25
  padding: 0 0.25em;
31
26
  @if $dir == bottom {
32
27
  @include border-top-radius;
@@ -75,8 +70,8 @@
75
70
  }
76
71
  }
77
72
 
73
+ // assumes placement on UL
78
74
  @mixin decending-z-order-tab($count: 20) {
79
- // assumes placement on UL
80
75
  position: relative;
81
76
  li {
82
77
  position: relative;
@@ -98,3 +93,66 @@
98
93
  @include transition(all $time $ease);
99
94
  }
100
95
  }
96
+
97
+ @mixin dropdown-menu($padding: false) {
98
+ padding: 0;
99
+ > li {
100
+ @include inline-block-list-item($padding);
101
+ position: relative;
102
+ &:hover{
103
+ ul {
104
+ display: block;
105
+ }
106
+ }
107
+ }
108
+ ul {
109
+ display: none;
110
+ position: absolute;
111
+ top: 100%;
112
+ left: 0;
113
+ margin-top: 0;
114
+ padding-left: 0;
115
+ padding-right: 0;
116
+ li {
117
+ display: block;
118
+ @if $padding != false {
119
+ padding-left: $padding;
120
+ padding-right: $padding;
121
+ }
122
+ }
123
+ }
124
+ }
125
+
126
+ @mixin pretty-dropdown-menu(
127
+ $padding: false,
128
+ $background: false,
129
+ $background-drop: false,
130
+ $hover-color: false
131
+ ) {
132
+ @include dropdown-menu($padding);
133
+ @if $background != false {
134
+ background: $background;
135
+ }
136
+ > li {
137
+ &:hover {
138
+ @if $background-drop != false {
139
+ background: $background-drop;
140
+ }
141
+ }
142
+ }
143
+ ul {
144
+ @if $background-drop != false {
145
+ background: $background-drop;
146
+ }
147
+ @else {
148
+ @if $background != false {
149
+ background: $background;
150
+ }
151
+ }
152
+ li:hover {
153
+ @if $hover-color != false {
154
+ background: $hover-color;
155
+ }
156
+ }
157
+ }
158
+ }
data/stylesheets/survivalkit/survival_kit/_survival-kit.scss CHANGED
@@ -31,7 +31,7 @@ $sk-darkgray: mix($darkgray, $c-primary, 90%);
31
31
  border-right: 1px solid white;
32
32
  font-family: $kit-font-family;
33
33
  a {
34
- @include remove-link-underlines;
34
+ @include undo-border-links;
35
35
  @include replace-text-with-dimensions("survival-kit-logo.png");
36
36
  display: block;
37
37
  padding: 0.3em;
@@ -59,7 +59,7 @@ $sk-darkgray: mix($darkgray, $c-primary, 90%);
59
59
  }
60
60
  }
61
61
  .back-to-top {
62
- @include remove-link-underlines;
62
+ @include undo-border-links;
63
63
  float: right;
64
64
  font-size: 10px;
65
65
  }
data/templates/shared/partials/01-variables/_base.scss CHANGED
@@ -2,18 +2,23 @@
2
2
  // Kit Default Variables
3
3
  ////////////////////////////
4
4
 
5
- // pick a reset of normalization
5
+ // Pick a reset or normalization
6
6
  // accepted values: 'meyer' (default), 'normalize', 'none'
7
7
  // choose to reset header sizes (applies to 'normalize' only)
8
8
  // $init-headers: true;
9
9
  $init-type: normalize;
10
- // use Formalize http://formalize.me/
10
+ // use [Formalize](http://formalize.me/)
11
11
  $formalize: true;
12
12
 
13
+ // pixel-normalize
14
+ // [A List Apart](http://www.alistapart.com/articles/a-pixel-identity-crisis/)
15
+ $pixel-normalize: true;
16
+
17
+ // Font size and line-height
13
18
  $base-font-size: 16px;
14
19
  $base-line-height: $base-font-size * 1.5;
15
20
 
16
- // --- Modular SCALE (used by 05-base) -----------
21
+ // Modular Scale (used by 04-base)
17
22
  // values used to determine modular scale values
18
23
  // and http://modularscale.com/
19
24
  $ratio: golden_ratio() major_third();
@@ -28,9 +33,6 @@ $kit-gutter: ms(2);
28
33
  $kit-gutter-half: $kit-gutter * 0.5;
29
34
  $kit-gutter-neg: $kit-gutter * -1;
30
35
 
31
- // pixel-normalize
32
- // http://www.alistapart.com/articles/a-pixel-identity-crisis/
33
- $pixel-normalize: true;
34
36
 
35
37
  // use the Compass baseline system
36
38
  $establish-baseline: true;
@@ -52,7 +54,7 @@ $link-transitions: false;
52
54
  // Forms
53
55
  $kit-form-defaults: false;
54
56
 
55
- // Grid Variables --------------------------------------------------------------
57
+ // Grid Variables
56
58
  // note: set grid system-specific variables in the grid section (06)
57
59
  $show-grid: false;
58
60
  $show-baseline: false;
data/templates/shared/partials/01-variables/_colors.scss CHANGED
@@ -22,9 +22,9 @@ $hue-offset: 30;
22
22
  // How distant do you want tints and shades to be from their base:
23
23
  $brightness-offset: 10%;
24
24
  // Use Claude Boutet complements instead of RGB complements.
25
- // $color-theory: boutet
25
+ // $color-theory: boutet;
26
26
  // Set saturation to 100% and lightness to 50% on all colors
27
- // $equalize: true
27
+ // $equalize: true;
28
28
  $c-primary: color-schemer(primary);
29
29
  $c-secondary: color-schemer(secondary);
30
30
  $c-tertiary: color-schemer(tertiary);
data/templates/shared/partials/01-variables/_fonts.scss CHANGED
@@ -1,14 +1,16 @@
1
1
  // This file establishes simple clean default font stacks
2
2
 
3
+ // Default font stacks
3
4
  $font-sans: sans-serif;
4
5
  $font-serifs: Georgia, serif;
5
6
  $font-mono: Consolas, Menlo, "Courier New", monospace, monospace;
6
7
 
8
+ // General font variables
7
9
  $font-body: $font-serifs;
8
10
  $font-headline: $font-sans;
9
11
  $font-logo: $font-sans;
10
12
 
11
- // SPECIAL USE FONT STACKS
13
+ // Special use font variables
12
14
  // ampersands
13
15
  $font-amp: $font-serifs;
14
16
  // caps
data/templates/shared/partials/05-layout/_grids-susy.scss CHANGED
@@ -9,7 +9,7 @@
9
9
  $total-columns: 12;
10
10
  $column-width: 6em;
11
11
  $gutter-width: 2em;
12
- $side-gutter-width: $gutter-width;
12
+ $grid-padding: $gutter-width;
13
13
 
14
14
  // uncomment to output the full container width to the terminal
15
15
  // @debug columns-width()
data/templates/shared/style.scss CHANGED
@@ -55,33 +55,33 @@
55
55
  // ✔ ADD A CSS RESET OR NORMALIZATION
56
56
  @import "survivalkit/reset/reset";
57
57
 
58
- // ✔ 2. ADD YOUR OWN EXTENDABLES
58
+ // ✔ 3. ADD YOUR OWN EXTENDABLES
59
59
  // typography
60
60
  @import "partials/03-extend/all";
61
61
  // @import "partials/03-extend/typography";
62
62
  // @import "partials/03-extend/helpers";
63
63
 
64
- // ✔ 3. EDIT AND ADD YOUR BASE STYLES
64
+ // ✔ 4. EDIT AND ADD YOUR BASE STYLES
65
65
  // This is worth going into in detail
66
66
  // edit as you see fit for your project
67
67
  @import "partials/04-base/all";
68
68
 
69
- // ✔ 4. ESTABLISH A LAYOUT
69
+ // ✔ 5. ESTABLISH A LAYOUT
70
70
  // Uncomment to use the Susy grid system
71
71
  @import "partials/05-layout/grids-susy";
72
72
 
73
- // ✔ 5. STYLE COMMON UI PATTERNS / DRUPAL UI PATTERNS
73
+ // ✔ 6. STYLE COMMON UI PATTERNS / DRUPAL UI PATTERNS
74
74
  @import "partials/06-ui-patterns/common";
75
75
  // @import "partials/06-ui-patterns/drupal-patterns";
76
76
 
77
77
  // --------------------------------------------------------------------------------------
78
- // ✔ 7. YOUR CUSTOM LAYOUT AND DESIGN SASS
78
+ // ✔ YOUR CUSTOM LAYOUT AND DESIGN SASS
79
79
  // THIS IS WHERE MOST CUSTOM WORK WILL GO
80
80
  // -- PRIMARY DESIGN --
81
81
  @import "your-design-here/design";
82
82
 
83
83
  // ------ OR ------
84
- // -- ✔ 8. STYLE TILE DESIGN --
84
+ // -- ✔ 7. STYLE TILE DESIGN --
85
85
  // enable these partials for styletile layout and design
86
86
  // work with styletile.html
87
87
  // see: http://styletil.es/
@@ -91,5 +91,5 @@
91
91
 
92
92
  // --------------------------------------------------------------------------------------
93
93
 
94
- // ✔ 10. ENABLE PRINT STYLES
94
+ // ✔ 8. ENABLE PRINT STYLES
95
95
  @import "partials/08-media/print";
metadata CHANGED
@@ -6,8 +6,8 @@ version: !ruby/object:Gem::Version
6
6
  - 1
7
7
  - 0
8
8
  - beta
9
- - 7
10
- version: 1.0.beta.7
9
+ - 8
10
+ version: 1.0.beta.8
11
11
  platform: ruby
12
12
  authors:
13
13
  - Mason Wendell
@@ -15,7 +15,7 @@ autorequire:
15
15
  bindir: bin
16
16
  cert_chain: []
17
17
 
18
- date: 2012-08-20 00:00:00 -04:00
18
+ date: 2012-08-28 00:00:00 -04:00
19
19
  default_executable:
20
20
  dependencies:
21
21
  - !ruby/object:Gem::Dependency
@@ -71,6 +71,19 @@ dependencies:
71
71
  version: "1.0"
72
72
  type: :runtime
73
73
  version_requirements: *id004
74
+ - !ruby/object:Gem::Dependency
75
+ name: color-schemer
76
+ prerelease: false
77
+ requirement: &id005 !ruby/object:Gem::Requirement
78
+ requirements:
79
+ - - ">="
80
+ - !ruby/object:Gem::Version
81
+ segments:
82
+ - 0
83
+ - 1
84
+ version: "0.1"
85
+ type: :runtime
86
+ version_requirements: *id005
74
87
  description: The Coding Designer's Survival Kit - tools for designing websites in the browser.
75
88
  email:
76
89
  - mason@zivtech.com
@@ -93,7 +106,6 @@ files:
93
106
  - stylesheets/survivalkit/mixins/_all.scss
94
107
  - stylesheets/survivalkit/mixins/_helpers.scss
95
108
  - stylesheets/survivalkit/mixins/_layout.scss
96
- - stylesheets/survivalkit/mixins/_patterns.scss
97
109
  - stylesheets/survivalkit/mixins/_pseudo.scss
98
110
  - stylesheets/survivalkit/mixins/_typography.scss
99
111
  - stylesheets/survivalkit/mixins/_ui.scss
data/stylesheets/survivalkit/mixins/_patterns.scss DELETED
@@ -1,62 +0,0 @@
1
- @mixin dropdown-menu($padding: false) {
2
- padding: 0;
3
- > li {
4
- @include inline-block-list-item($padding);
5
- position: relative;
6
- &:hover{
7
- ul {
8
- display: block;
9
- }
10
- }
11
- }
12
- ul {
13
- display: none;
14
- position: absolute;
15
- top: 100%;
16
- left: 0;
17
- margin-top: 0;
18
- padding-left: 0;
19
- padding-right: 0;
20
- li {
21
- display: block;
22
- @if $padding != false {
23
- padding-left: $padding;
24
- padding-right: $padding;
25
- }
26
- }
27
- }
28
- }
29
-
30
- @mixin pretty-dropdown-menu(
31
- $padding: false,
32
- $background: false,
33
- $background-drop: false,
34
- $hover-color: false
35
- ) {
36
- @include dropdown-menu($padding);
37
- @if $background != false {
38
- background: $background;
39
- }
40
- > li {
41
- &:hover {
42
- @if $background-drop != false {
43
- background: $background-drop;
44
- }
45
- }
46
- }
47
- ul {
48
- @if $background-drop != false {
49
- background: $background-drop;
50
- }
51
- @else {
52
- @if $background != false {
53
- background: $background;
54
- }
55
- }
56
- li:hover {
57
- @if $hover-color != false {
58
- background: $hover-color;
59
- }
60
- }
61
- }
62
- }