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

Sign up to get free protection for your applications and to get access to all the features.
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
- }