toolkit 0.2.2 → 0.2.3
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/lib/toolkit.rb
CHANGED
@@ -2,16 +2,12 @@ require 'compass'
|
|
2
2
|
require 'susy'
|
3
3
|
require 'respond-to'
|
4
4
|
require 'singularitygs'
|
5
|
+
require 'sassy-strings'
|
5
6
|
|
6
7
|
extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
|
7
8
|
Compass::Frameworks.register('toolkit', :path => extension_path)
|
8
9
|
|
9
10
|
module Sass::Script::Functions
|
10
|
-
def str_replace(needle, replace, haystack)
|
11
|
-
result = haystack.value.gsub(needle.value, replace.value)
|
12
|
-
Sass::Script::String.new(result)
|
13
|
-
end
|
14
|
-
|
15
11
|
def children_of_ie_nth(input)
|
16
12
|
n = "n"
|
17
13
|
b = ""
|
data/stylesheets/_toolkit.scss
CHANGED
@@ -13,6 +13,11 @@
|
|
13
13
|
////////////////////////
|
14
14
|
@import 'toolkit/fluid-media';
|
15
15
|
|
16
|
+
////////////////////////
|
17
|
+
// Import Intrinsic Ratio
|
18
|
+
////////////////////////
|
19
|
+
@import 'toolkit/intrinsic-ratio';
|
20
|
+
|
16
21
|
////////////////////////
|
17
22
|
// Import Progressive Enhancement
|
18
23
|
////////////////////////
|
@@ -4,56 +4,4 @@
|
|
4
4
|
img, video {
|
5
5
|
max-width: 100%;
|
6
6
|
height: auto;
|
7
|
-
}
|
8
|
-
|
9
|
-
////////////////////////
|
10
|
-
// Fluid Embeds and whatever WITH NO JAVASCIPT!
|
11
|
-
////////////////////////
|
12
|
-
$intrinsic-ratio: 16/9 !default;
|
13
|
-
$intrinsic-ratio-width: 100% !default;
|
14
|
-
$intrinsic-ratio-elements: '*' !default;
|
15
|
-
$intrinsic-ratio-extend: true !default;
|
16
|
-
|
17
|
-
@mixin intrinsic-ratio-parent {
|
18
|
-
position: relative;
|
19
|
-
height: 0;
|
20
|
-
}
|
21
|
-
|
22
|
-
@mixin intrinsic-ratio-child {
|
23
|
-
display: block;
|
24
|
-
position: absolute;
|
25
|
-
width: 100% !important; // Nuke the external styles
|
26
|
-
height: 100% !important; // Nuke the external styles
|
27
|
-
top: 0;
|
28
|
-
margin: 0;
|
29
|
-
padding: 0;
|
30
|
-
}
|
31
|
-
|
32
|
-
@mixin intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend) {
|
33
|
-
@if not $extend {
|
34
|
-
@include intrinsic-ratio-parent;
|
35
|
-
}
|
36
|
-
@else {
|
37
|
-
@extend %intrinsic-ratio-parent;
|
38
|
-
}
|
39
|
-
padding-top: (1 / $ratio) * $width;
|
40
|
-
width: $width;
|
41
|
-
@each $element in $elements {
|
42
|
-
> #{$element} {
|
43
|
-
@if not $extend {
|
44
|
-
@include intrinsic-ratio-child;
|
45
|
-
}
|
46
|
-
@else {
|
47
|
-
@extend %intrinsic-ratio-child;
|
48
|
-
}
|
49
|
-
}
|
50
|
-
}
|
51
|
-
}
|
52
|
-
|
53
|
-
%intrinsic-ratio-parent {
|
54
|
-
@include intrinsic-ratio-parent;
|
55
|
-
}
|
56
|
-
|
57
|
-
%intrinsic-ratio-child {
|
58
|
-
@include intrinsic-ratio-child;
|
59
7
|
}
|
@@ -0,0 +1,51 @@
|
|
1
|
+
////////////////////////
|
2
|
+
// Fluid Embeds and whatever WITH NO JAVASCIPT!
|
3
|
+
////////////////////////
|
4
|
+
$intrinsic-ratio: 16/9 !default;
|
5
|
+
$intrinsic-ratio-width: 100% !default;
|
6
|
+
$intrinsic-ratio-elements: '> *' !default;
|
7
|
+
$intrinsic-ratio-extend: true !default;
|
8
|
+
|
9
|
+
@mixin intrinsic-ratio-parent {
|
10
|
+
position: relative;
|
11
|
+
height: 0;
|
12
|
+
}
|
13
|
+
|
14
|
+
@mixin intrinsic-ratio-child {
|
15
|
+
display: block;
|
16
|
+
position: absolute;
|
17
|
+
width: 100% !important; // Nuke the external styles
|
18
|
+
height: 100% !important; // Nuke the external styles
|
19
|
+
top: 0;
|
20
|
+
margin: 0;
|
21
|
+
padding: 0;
|
22
|
+
}
|
23
|
+
|
24
|
+
@mixin intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend) {
|
25
|
+
@if not $extend {
|
26
|
+
@include intrinsic-ratio-parent;
|
27
|
+
}
|
28
|
+
@else {
|
29
|
+
@extend %intrinsic-ratio-parent;
|
30
|
+
}
|
31
|
+
padding-top: (1 / $ratio) * $width;
|
32
|
+
width: $width;
|
33
|
+
@each $element in $elements {
|
34
|
+
#{$element} {
|
35
|
+
@if not $extend {
|
36
|
+
@include intrinsic-ratio-child;
|
37
|
+
}
|
38
|
+
@else {
|
39
|
+
@extend %intrinsic-ratio-child;
|
40
|
+
}
|
41
|
+
}
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
%intrinsic-ratio-parent {
|
46
|
+
@include intrinsic-ratio-parent;
|
47
|
+
}
|
48
|
+
|
49
|
+
%intrinsic-ratio-child {
|
50
|
+
@include intrinsic-ratio-child;
|
51
|
+
}
|
@@ -39,6 +39,8 @@
|
|
39
39
|
// - $with-dimensions: Switches between including dimensions (height/width for all and background-size for SVG) or not. Defaults to true.
|
40
40
|
// - $inline: Whether or not the containing selector is an inline element. Defaults to false.
|
41
41
|
////////////////////////
|
42
|
+
@import "compass/utilities/sprites";
|
43
|
+
|
42
44
|
$replace-text-pe-method: 'svg' !default;
|
43
45
|
$replace-text-pe-inline-svg: true !default;
|
44
46
|
$replace-text-pe-with-dimensions: true !default;
|
metadata
CHANGED
@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
|
|
5
5
|
segments:
|
6
6
|
- 0
|
7
7
|
- 2
|
8
|
-
-
|
9
|
-
version: 0.2.
|
8
|
+
- 3
|
9
|
+
version: 0.2.3
|
10
10
|
platform: ruby
|
11
11
|
authors:
|
12
12
|
- Sam Richard
|
@@ -74,6 +74,19 @@ dependencies:
|
|
74
74
|
version: 0.0.17
|
75
75
|
type: :runtime
|
76
76
|
version_requirements: *id004
|
77
|
+
- !ruby/object:Gem::Dependency
|
78
|
+
name: sassy-strings
|
79
|
+
prerelease: false
|
80
|
+
requirement: &id005 !ruby/object:Gem::Requirement
|
81
|
+
requirements:
|
82
|
+
- - ">="
|
83
|
+
- !ruby/object:Gem::Version
|
84
|
+
segments:
|
85
|
+
- 0
|
86
|
+
- 1
|
87
|
+
version: "0.1"
|
88
|
+
type: :runtime
|
89
|
+
version_requirements: *id005
|
77
90
|
description: Toolkit for Progressive Enhancement and Responsive Web Design
|
78
91
|
email:
|
79
92
|
- sam@snug.ug
|
@@ -93,6 +106,7 @@ files:
|
|
93
106
|
- stylesheets/toolkit/_clearfix.scss
|
94
107
|
- stylesheets/toolkit/_colours.scss
|
95
108
|
- stylesheets/toolkit/_fluid-media.scss
|
109
|
+
- stylesheets/toolkit/_intrinsic-ratio.scss
|
96
110
|
- stylesheets/toolkit/_pe.scss
|
97
111
|
- stylesheets/toolkit/_selectors.scss
|
98
112
|
- stylesheets/toolkit/_triangle.scss
|