accoutrement 0.0.5 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/README.md +9 -148
- data/VERSION +1 -0
- data/lib/accoutrement.rb +12 -3
- data/lib/compass-accoutrement.rb +1 -0
- metadata +66 -78
- data/stylesheets/_accoutrement.scss +0 -21
- data/stylesheets/accoutrement/_a11y.scss +0 -23
- data/stylesheets/accoutrement/_arrows.scss +0 -127
- data/stylesheets/accoutrement/_background.scss +0 -116
- data/stylesheets/accoutrement/_calc.scss +0 -22
- data/stylesheets/accoutrement/_color.scss +0 -182
- data/stylesheets/accoutrement/_flexbox.scss +0 -297
- data/stylesheets/accoutrement/_layout.scss +0 -24
- data/stylesheets/accoutrement/_math.scss +0 -14
- data/stylesheets/accoutrement/_media.scss +0 -72
- data/stylesheets/accoutrement/_pseudo-elements.scss +0 -34
- data/stylesheets/accoutrement/_rhythm.scss +0 -28
- data/stylesheets/accoutrement/_sass-lists.scss +0 -40
- data/stylesheets/accoutrement/_tabs.scss +0 -157
- data/stylesheets/accoutrement/_type.scss +0 -41
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 24bd5bad1dac14124a58c4f07a65183dfa3748ea
|
4
|
+
data.tar.gz: 85a3674dd24f6bfd15f63da21d9a2f39d6d3f98f
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 5241b7e5451f72d4abc394b3de2cfee6e911b4599bfb97b9bdc55ca4e32f85d20b60ccdde0f6298411d39831d50028a9343a4f772d39e5196633e515e6bfae15
|
7
|
+
data.tar.gz: 44f990a7a31344d2f05382694a50ba046d3ec3a3ad6a1bb3360a4d82b5e0340174282d20a5c5c2aebbbe66f99ae8918ee0d4e4ac790a366e1d6888e30a3ee321
|
data/README.md
CHANGED
@@ -1,151 +1,13 @@
|
|
1
|
-
|
1
|
+
Accoutrement
|
2
|
+
============
|
2
3
|
|
3
|
-
|
4
|
-
Maybe some of them will develop in to more legit Things,
|
5
|
-
but for now thye are just normal things.
|
4
|
+
Sass utilities and patterns for OddBird projects.
|
6
5
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
notably [toolkit][] by [snugug][] and [canarymason][]
|
13
|
-
who are very smart.
|
14
|
-
|
15
|
-
[toolkit]: https://github.com/Snugug/toolkit
|
16
|
-
[snugug]: https://github.com/Snugug/
|
17
|
-
[canarymason]: https://github.com/canarymason/
|
18
|
-
|
19
|
-
List of Things
|
20
|
-
--------------
|
21
|
-
|
22
|
-
### A11y
|
23
|
-
|
24
|
-
**Mixins:**
|
25
|
-
- `gone()`
|
26
|
-
|
27
|
-
**Silent Classes:**
|
28
|
-
- `%alt-text`
|
29
|
-
|
30
|
-
### Arrows
|
31
|
-
|
32
|
-
**Settings:**
|
33
|
-
- `$default-arrow-position : top !default;`
|
34
|
-
- `$default-arrow-offset : center !default;`
|
35
|
-
- `$default-arrow-size : 1em !default;`
|
36
|
-
- `$default-arrow-color : gray !default;`
|
37
|
-
- `$default-arrow-border-size : null !default;`
|
38
|
-
- `$default-arrow-border-color : null !default;`
|
39
|
-
|
40
|
-
**Mixins:**
|
41
|
-
- `arrow-base()`
|
42
|
-
- `arrow([$arrow, $border, $positioning])`
|
43
|
-
|
44
|
-
### Background
|
45
|
-
|
46
|
-
**Functions:**
|
47
|
-
- `convert-gradient-angle($deg)`:
|
48
|
-
- `convert-linear($angle, $details...)`:
|
49
|
-
- `stripes($position, $colors)`
|
50
|
-
- `get-palette($color [, $tints, $shades])`
|
51
|
-
|
52
|
-
**Mixins:**
|
53
|
-
- `gradient-background-image($gradient...)`:
|
54
|
-
- `palette($color [, $tints, $shades])`
|
55
|
-
|
56
|
-
### Color
|
57
|
-
|
58
|
-
*The brightness and contrast functions are based on
|
59
|
-
a [codepen demo][text-contrast] by Brendan Saunders.
|
60
|
-
The idea of color-stacks comes from [toolkit][],
|
61
|
-
though I've made some alterations to fit into my own process.*
|
62
|
-
|
63
|
-
**Settings**:
|
64
|
-
- `$contrasted-dark-default : black !default;`
|
65
|
-
- `$contrasted-light-default : white !default;`
|
66
|
-
- `$default-amounts : 20% 40% 60% 70% 80% !default;`
|
67
|
-
- `$default-tints : $default-amounts !default;`
|
68
|
-
- `$default-shades : $default-amounts !default;`
|
69
|
-
|
70
|
-
**Functions:**
|
71
|
-
- `brightness($color)`
|
72
|
-
- `contrast($color [, $contrast])`
|
73
|
-
- `color-stack($main, $second [, $amounts])`
|
74
|
-
- `tint-stack($color [, $amounts])`
|
75
|
-
- `shade-stack($color [, $amounts])`
|
76
|
-
- `color($color [, $alpha, $tints, $shades])`
|
77
|
-
|
78
|
-
[text-contrast]: http://codepen.io/bluesaunders/details/FCLaz
|
79
|
-
|
80
|
-
### Math
|
81
|
-
|
82
|
-
**Functions:**
|
83
|
-
- `mod($dividend, $divisor)`
|
84
|
-
|
85
|
-
### Media
|
86
|
-
|
87
|
-
*These are also adapted from [toolkit][].*
|
88
|
-
|
89
|
-
**Settings:**
|
90
|
-
- `$default-fluid-width : max-width 100% !default;`
|
91
|
-
- `$default-fluid-elements : 'img, video' !default;`
|
92
|
-
- `$default-fluid-ratio : 16/9 !default;`
|
93
|
-
- `$default-fluid-ratio-width : 100% !default;`
|
94
|
-
- `$default-fluid-ratio-children : '*' !default;`
|
95
|
-
|
96
|
-
**Mixins:**
|
97
|
-
- `fluid-media([$width, $elements])`
|
98
|
-
- `fluid-ratio([$ratio, $width, $children])`
|
99
|
-
|
100
|
-
### Pseudo-Elements
|
101
|
-
|
102
|
-
**Mixins:**
|
103
|
-
- `@include before($content)`
|
104
|
-
- `@include after($content)`
|
105
|
-
- `@include wrap-content($content)`
|
106
|
-
|
107
|
-
### Rhythm
|
108
|
-
|
109
|
-
**Functions:**
|
110
|
-
- `px-to-rhythm($px [, $from, $round])`
|
111
|
-
- `rhythm-image($image [, $from, $round])`
|
112
|
-
|
113
|
-
### Sass Lists
|
114
|
-
|
115
|
-
**Functions:**
|
116
|
-
- `reverse($list)`
|
117
|
-
- `remove-duplicates($list)`
|
118
|
-
- `filter($list, $target)`
|
119
|
-
|
120
|
-
### Tabs
|
121
|
-
|
122
|
-
**Settings:**
|
123
|
-
- `$default-checked-selector : ':checked' !default;`
|
124
|
-
- `$default-nested-selectors : null !default;`
|
125
|
-
- `$toggle-attribute : id !default;`
|
126
|
-
- `$title-attribute : for !default;`
|
127
|
-
- `$content-attribute : class !default;`
|
128
|
-
|
129
|
-
**Mixins:**
|
130
|
-
- `@include tab-defaults`
|
131
|
-
- `@include tabs($slugs [, $nested, $checked])`
|
132
|
-
|
133
|
-
**Silent Classes:**
|
134
|
-
- `%hide-tab-toggle`
|
135
|
-
- `%hide-tab-content`
|
136
|
-
- `%show-tab-content`
|
137
|
-
- `%active-tab-title`
|
138
|
-
|
139
|
-
### Type
|
140
|
-
|
141
|
-
**Settings:**
|
142
|
-
- `$default-dropcap-size : $base-font-size * 2 !default;`
|
143
|
-
- `$default-dropcap-lines : false !default;`
|
144
|
-
- `$default-dropcap-padding : null !default;`
|
145
|
-
- `$default-dropcap-font-family : null !default;`
|
146
|
-
|
147
|
-
**Mixins:**
|
148
|
-
- `dropcap([$size, $lines, $padding, $from-size]) { @content }`
|
6
|
+
**WARNING:**
|
7
|
+
Version 0.1.0 makes no attempt at backwards compatability.
|
8
|
+
This project has been co-opted by OddBird for internal use,
|
9
|
+
and will be maintained towards that end only.
|
10
|
+
Don't upgrade unless you're willing to use new things in new ways.
|
149
11
|
|
150
12
|
License
|
151
13
|
-------
|
@@ -156,5 +18,4 @@ Original code licensed under MIT/GLPv2
|
|
156
18
|
Open Source projects used within this project retain their original licenses.
|
157
19
|
|
158
20
|
GPL license: http://www.gnu.org/licenses/gpl.html
|
159
|
-
|
160
|
-
MIT license: http://www.opensource.org/licenses/mit-license.php
|
21
|
+
MIT license: http://www.opensource.org/licenses/mit-license.php
|
data/VERSION
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
0.1.0
|
data/lib/accoutrement.rb
CHANGED
@@ -1,3 +1,12 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
1
|
+
accoutrement_stylesheets_path = File.expand_path(File.join(File.dirname(__FILE__), '..', 'stylesheets'))
|
2
|
+
begin
|
3
|
+
require 'compass'
|
4
|
+
Compass::Frameworks.register('accoutrement', :stylesheets_directory => accoutrement_stylesheets_path)
|
5
|
+
rescue LoadError
|
6
|
+
# compass not found, register on the Sass path via the environment.
|
7
|
+
if ENV.has_key?("SASS_PATH")
|
8
|
+
ENV["SASS_PATH"] = ENV["SASS_PATH"] + File::PATH_SEPARATOR + accoutrement_stylesheets_path
|
9
|
+
else
|
10
|
+
ENV["SASS_PATH"] = accoutrement_stylesheets_path
|
11
|
+
end
|
12
|
+
end
|
@@ -0,0 +1 @@
|
|
1
|
+
require 'accoutrement'
|
metadata
CHANGED
@@ -1,96 +1,84 @@
|
|
1
|
-
--- !ruby/object:Gem::Specification
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
2
|
name: accoutrement
|
3
|
-
version: !ruby/object:Gem::Version
|
4
|
-
|
5
|
-
prerelease:
|
6
|
-
segments:
|
7
|
-
- 0
|
8
|
-
- 0
|
9
|
-
- 5
|
10
|
-
version: 0.0.5
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.1.0
|
11
5
|
platform: ruby
|
12
|
-
authors:
|
6
|
+
authors:
|
13
7
|
- Eric Meyer
|
14
8
|
autorequire:
|
15
9
|
bindir: bin
|
16
10
|
cert_chain: []
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
11
|
+
date: 2013-09-04 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: sass
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - ~>
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: 3.3.0.rc.1
|
20
|
+
type: :runtime
|
22
21
|
prerelease: false
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - ~>
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: 3.3.0.rc.1
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: compass
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - ~>
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: 1.0.0.alpha.17
|
34
34
|
type: :runtime
|
35
|
-
|
36
|
-
|
37
|
-
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - ~>
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: 1.0.0.alpha.17
|
41
|
+
description: A library of Sass utilities and patterns for OddBird projects.
|
42
|
+
email:
|
43
|
+
- eric@oddbird.net
|
38
44
|
executables: []
|
39
|
-
|
40
45
|
extensions: []
|
41
|
-
|
42
|
-
extra_rdoc_files: []
|
43
|
-
|
44
|
-
files:
|
46
|
+
extra_rdoc_files:
|
45
47
|
- README.md
|
46
48
|
- lib/accoutrement.rb
|
47
|
-
|
48
|
-
-
|
49
|
-
-
|
50
|
-
-
|
51
|
-
-
|
52
|
-
|
53
|
-
|
54
|
-
-
|
55
|
-
|
56
|
-
- stylesheets/accoutrement/_media.scss
|
57
|
-
- stylesheets/accoutrement/_pseudo-elements.scss
|
58
|
-
- stylesheets/accoutrement/_rhythm.scss
|
59
|
-
- stylesheets/accoutrement/_sass-lists.scss
|
60
|
-
- stylesheets/accoutrement/_tabs.scss
|
61
|
-
- stylesheets/accoutrement/_type.scss
|
62
|
-
homepage: http://oddbird.net/
|
63
|
-
licenses: []
|
64
|
-
|
49
|
+
files:
|
50
|
+
- lib/accoutrement.rb
|
51
|
+
- lib/compass-accoutrement.rb
|
52
|
+
- README.md
|
53
|
+
- VERSION
|
54
|
+
homepage: http://github.com/ericam/accoutrement/
|
55
|
+
licenses:
|
56
|
+
- MIT/GLPv2
|
57
|
+
metadata: {}
|
65
58
|
post_install_message:
|
66
|
-
rdoc_options:
|
67
|
-
|
68
|
-
|
59
|
+
rdoc_options:
|
60
|
+
- --line-numbers
|
61
|
+
- --inline-source
|
62
|
+
- --title
|
63
|
+
- accoutrement
|
64
|
+
- --main
|
65
|
+
- README.md
|
66
|
+
require_paths:
|
69
67
|
- lib
|
70
|
-
required_ruby_version: !ruby/object:Gem::Requirement
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
none: false
|
81
|
-
requirements:
|
82
|
-
- - ">="
|
83
|
-
- !ruby/object:Gem::Version
|
84
|
-
hash: 3
|
85
|
-
segments:
|
86
|
-
- 0
|
87
|
-
version: "0"
|
68
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
69
|
+
requirements:
|
70
|
+
- - '>='
|
71
|
+
- !ruby/object:Gem::Version
|
72
|
+
version: '0'
|
73
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
74
|
+
requirements:
|
75
|
+
- - '>='
|
76
|
+
- !ruby/object:Gem::Version
|
77
|
+
version: '1.2'
|
88
78
|
requirements: []
|
89
|
-
|
90
|
-
|
91
|
-
rubygems_version: 1.8.24
|
79
|
+
rubyforge_project: accoutrement
|
80
|
+
rubygems_version: 2.1.10
|
92
81
|
signing_key:
|
93
82
|
specification_version: 3
|
94
|
-
summary:
|
83
|
+
summary: Sass utilities and patterns.
|
95
84
|
test_files: []
|
96
|
-
|
@@ -1,21 +0,0 @@
|
|
1
|
-
// ----------------------------------------------------------------------------
|
2
|
-
// Helpers
|
3
|
-
|
4
|
-
@import 'accoutrement/math';
|
5
|
-
@import 'accoutrement/sass-lists';
|
6
|
-
@import 'accoutrement/a11y';
|
7
|
-
@import 'accoutrement/rhythm';
|
8
|
-
@import 'accoutrement/color';
|
9
|
-
@import 'accoutrement/background';
|
10
|
-
@import 'accoutrement/pseudo-elements';
|
11
|
-
@import 'accoutrement/media';
|
12
|
-
@import 'accoutrement/type';
|
13
|
-
@import 'accoutrement/arrows';
|
14
|
-
@import 'accoutrement/flexbox';
|
15
|
-
@import 'accoutrement/layout';
|
16
|
-
@import 'accoutrement/calc';
|
17
|
-
|
18
|
-
// ----------------------------------------------------------------------------
|
19
|
-
// Patterns
|
20
|
-
|
21
|
-
@import 'accoutrement/tabs';
|
@@ -1,23 +0,0 @@
|
|
1
|
-
// ----------------------------------------------------------------------------
|
2
|
-
// gone/here
|
3
|
-
|
4
|
-
@mixin gone {
|
5
|
-
position: absolute;
|
6
|
-
top: -9999px;
|
7
|
-
left: -9999px;
|
8
|
-
}
|
9
|
-
|
10
|
-
// Bring back a previously "gone" element.
|
11
|
-
//
|
12
|
-
// here([$position])
|
13
|
-
// - $position : static | relative | etc...
|
14
|
-
@mixin here($position: static) {
|
15
|
-
position: $position;
|
16
|
-
top: auto;
|
17
|
-
left: auto;
|
18
|
-
}
|
19
|
-
|
20
|
-
// ----------------------------------------------------------------------------
|
21
|
-
// alt text
|
22
|
-
|
23
|
-
%alt-text { @include gone; }
|
@@ -1,127 +0,0 @@
|
|
1
|
-
// ----------------------------------------------------------------------------
|
2
|
-
// Settings
|
3
|
-
|
4
|
-
// Body defaults
|
5
|
-
$default-arrow-position : top !default;
|
6
|
-
$default-arrow-offset : center !default;
|
7
|
-
$default-arrow-size : 1em !default;
|
8
|
-
$default-arrow-color : gray !default;
|
9
|
-
|
10
|
-
// Border defaults
|
11
|
-
$default-arrow-border-size : null !default;
|
12
|
-
$default-arrow-border-color : null !default;
|
13
|
-
|
14
|
-
// ----------------------------------------------------------------------------
|
15
|
-
// Mixins
|
16
|
-
|
17
|
-
// Creates a pseudo-element, prepared for arrow-fication
|
18
|
-
//
|
19
|
-
// @include arrow-base()
|
20
|
-
@mixin arrow-base {
|
21
|
-
content: " ";
|
22
|
-
position: absolute;
|
23
|
-
height: 0;
|
24
|
-
width: 0;
|
25
|
-
border: solid transparent;
|
26
|
-
pointer-events: none;
|
27
|
-
}
|
28
|
-
|
29
|
-
// Creates an arrow to your exact size/shape/location specifications
|
30
|
-
//
|
31
|
-
// @include arrow([$arrow, $border, $positioning])
|
32
|
-
// $arrow : Arrow body position, offset, size, and color.
|
33
|
-
// $border : Border size and color.
|
34
|
-
// $positioning : You have to position the host element, default is relative.
|
35
|
-
@mixin arrow(
|
36
|
-
$arrow : $default-arrow-position
|
37
|
-
$default-arrow-offset
|
38
|
-
$default-arrow-size
|
39
|
-
$default-arrow-color,
|
40
|
-
$border : $default-arrow-border-size
|
41
|
-
$default-arrow-border-color,
|
42
|
-
$positioning : relative
|
43
|
-
) {
|
44
|
-
$has-border : false;
|
45
|
-
|
46
|
-
$position : $default-arrow-position;
|
47
|
-
$offset : $default-arrow-offset;
|
48
|
-
$size : $default-arrow-size;
|
49
|
-
$color : $default-arrow-color;
|
50
|
-
$border-size : $default-arrow-border-size;
|
51
|
-
$border-color : $default-arrow-border-color;
|
52
|
-
|
53
|
-
$strings : compact();
|
54
|
-
$numbers : compact();
|
55
|
-
|
56
|
-
@each $val in $border {
|
57
|
-
@if type-of($val) == 'color' {
|
58
|
-
$border-color: $val;
|
59
|
-
$has-border: true;
|
60
|
-
} @else if type-of($val) == 'number' {
|
61
|
-
$border-size: $val;
|
62
|
-
$has-border: true;
|
63
|
-
}
|
64
|
-
}
|
65
|
-
|
66
|
-
$pseudo : if($has-border, '&:before, &:after', '&:before');
|
67
|
-
|
68
|
-
@each $val in $arrow {
|
69
|
-
@if type-of($val) == 'color' { $color: $val; }
|
70
|
-
@else if type-of($val) == 'string' { $strings: append($strings, $val); }
|
71
|
-
@else if type-of($val) == 'number' { $numbers: append($numbers, $val); }
|
72
|
-
}
|
73
|
-
|
74
|
-
@if length($strings) > 0 {
|
75
|
-
$position: nth($strings,1);
|
76
|
-
@if length($strings) > 1 and nth($strings,2) { $offset: nth($strings,2); }
|
77
|
-
}
|
78
|
-
|
79
|
-
@if length($numbers) > 0 {
|
80
|
-
@if length($numbers) > 1 {
|
81
|
-
$offset: nth($numbers,1);
|
82
|
-
$size: nth($numbers,2);
|
83
|
-
} @else {
|
84
|
-
$size: nth($numbers,1);
|
85
|
-
}
|
86
|
-
}
|
87
|
-
|
88
|
-
$opposite: opposite-position($position);
|
89
|
-
$offset-position: if($position == left or $position == right, top, left);
|
90
|
-
@if $offset == 'bottom' or $offset == 'right' {
|
91
|
-
$offset-position: opposite-position($offset-position);
|
92
|
-
} @else if type-of($offset) == "number" {
|
93
|
-
@if $offset != abs($offset) {
|
94
|
-
$offset-position: opposite-position($offset-position);
|
95
|
-
};
|
96
|
-
}
|
97
|
-
|
98
|
-
position: $positioning;
|
99
|
-
|
100
|
-
#{$pseudo} {
|
101
|
-
@include arrow-base;
|
102
|
-
#{$opposite}: 100%;
|
103
|
-
border-#{$opposite}-color: $color;
|
104
|
-
border-width: $size;
|
105
|
-
@if $offset {
|
106
|
-
@if $offset == 'center' {
|
107
|
-
#{$offset-position}: 50%;
|
108
|
-
margin-#{$offset-position}: - $size;
|
109
|
-
} @else if type-of($offset) == 'string' {
|
110
|
-
#{$offset-position}: 0;
|
111
|
-
} @else {
|
112
|
-
#{$offset-position}: abs($offset);
|
113
|
-
}
|
114
|
-
}
|
115
|
-
}
|
116
|
-
|
117
|
-
@if $has-border {
|
118
|
-
$border-ratio: 1.5; // 1.41421356 square root of 2, rounded a bit
|
119
|
-
$border-full: $size + $border-size * $border-ratio;
|
120
|
-
&:before {
|
121
|
-
border-width: $border-full;
|
122
|
-
border-#{$opposite}-color: $border-color;
|
123
|
-
@if $offset == 'center' { margin-#{$offset-position}: - $border-full; }
|
124
|
-
@else { margin-#{$offset-position}: - $border-size * $border-ratio; }
|
125
|
-
}
|
126
|
-
}
|
127
|
-
}
|