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.
- data/CHANGELOG.markdown +4 -0
- data/lib/survivalkit.rb +3 -2
- data/stylesheets/survivalkit/extend/_sticky-footer.scss +1 -1
- data/stylesheets/survivalkit/functions/_calculations.scss +4 -10
- data/stylesheets/survivalkit/mixins/_all.scss +2 -3
- data/stylesheets/survivalkit/mixins/_typography.scss +5 -18
- data/stylesheets/survivalkit/mixins/_ui.scss +65 -7
- data/stylesheets/survivalkit/survival_kit/_survival-kit.scss +2 -2
- data/templates/shared/partials/01-variables/_base.scss +9 -7
- data/templates/shared/partials/01-variables/_colors.scss +2 -2
- data/templates/shared/partials/01-variables/_fonts.scss +3 -1
- data/templates/shared/partials/05-layout/_grids-susy.scss +1 -1
- data/templates/shared/style.scss +7 -7
- metadata +16 -4
- data/stylesheets/survivalkit/mixins/_patterns.scss +0 -62
data/CHANGELOG.markdown
CHANGED
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.
|
10
|
-
DATE = "2012-08-
|
10
|
+
VERSION = "1.0.beta.8"
|
11
|
+
DATE = "2012-08-28"
|
11
12
|
|
12
13
|
end
|
@@ -9,16 +9,10 @@
|
|
9
9
|
}
|
10
10
|
|
11
11
|
// shortcut name
|
12
|
-
@function cp($
|
13
|
-
@return calc-percent($
|
12
|
+
@function cp($args...) {
|
13
|
+
@return calc-percent($args...);
|
14
14
|
}
|
15
15
|
|
16
|
-
@function ce($
|
17
|
-
@return calc-em($
|
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
|
}
|
@@ -30,19 +30,18 @@
|
|
30
30
|
@mixin undo-border-links {
|
31
31
|
& {
|
32
32
|
text-decoration: none;
|
33
|
-
|
34
|
-
border-bottom-style: inherit;
|
33
|
+
border-bottom: none;
|
35
34
|
&:visited {
|
36
|
-
border-bottom
|
35
|
+
border-bottom: none;
|
37
36
|
}
|
38
37
|
&:focus {
|
39
|
-
border-bottom
|
38
|
+
border-bottom: none;
|
40
39
|
}
|
41
40
|
&:hover {
|
42
|
-
border-bottom
|
41
|
+
border-bottom: none;
|
43
42
|
}
|
44
43
|
&:active {
|
45
|
-
border-bottom
|
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 {
|
@@ -12,8 +12,7 @@
|
|
12
12
|
a {
|
13
13
|
border-#{$dir}: 1px solid $border-color-active;
|
14
14
|
background-color: $background-color-active;
|
15
|
-
|
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
|
+
}
|
@@ -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
|
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
|
62
|
+
@include undo-border-links;
|
63
63
|
float: right;
|
64
64
|
font-size: 10px;
|
65
65
|
}
|
@@ -2,18 +2,23 @@
|
|
2
2
|
// Kit Default Variables
|
3
3
|
////////////////////////////
|
4
4
|
|
5
|
-
//
|
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
|
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
|
-
//
|
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;
|
@@ -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);
|
@@ -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
|
-
//
|
13
|
+
// Special use font variables
|
12
14
|
// ampersands
|
13
15
|
$font-amp: $font-serifs;
|
14
16
|
// caps
|
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
|
-
// ✔
|
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
|
-
// ✔
|
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
|
-
// ✔
|
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
|
-
// ✔
|
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
|
-
// ✔
|
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
|
-
// -- ✔
|
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
|
-
// ✔
|
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
|
-
-
|
10
|
-
version: 1.0.beta.
|
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-
|
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
|
@@ -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
|
-
}
|