compass-chameleon 0.1
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.
- checksums.yaml +15 -0
- data/CHANGELOG.md +3 -0
- data/README.md +165 -0
- data/lib/chameleon.rb +4 -0
- data/stylesheets/_chameleon.scss +6 -0
- data/stylesheets/chameleon/_functions.scss +73 -0
- data/stylesheets/chameleon/_settings.scss +14 -0
- data/stylesheets/chameleon/_theme.scss +32 -0
- metadata +80 -0
checksums.yaml
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
---
|
|
2
|
+
!binary "U0hBMQ==":
|
|
3
|
+
metadata.gz: !binary |-
|
|
4
|
+
OTk3MmI1NDlhMDFmNmMzMGEzZDA4NWQ2Yjc3Yjg5MGM3M2MyNTMwOA==
|
|
5
|
+
data.tar.gz: !binary |-
|
|
6
|
+
YTQ4MjEzZTBkY2YyMGM2ZjI3YWE2Zjg0MGJjNTllZWIxODU1ZGQxOA==
|
|
7
|
+
!binary "U0hBNTEy":
|
|
8
|
+
metadata.gz: !binary |-
|
|
9
|
+
MzI1ZjVkMTc2M2YxNjBhZDFiYTYyYmFlYzcyN2ZhM2RlMDJhNDVjMzdhMWM4
|
|
10
|
+
MTM1N2I0NDJlOWM4OGY0NTcwZjc3YzA3N2IxMzIyYWY2YjZjMmMzNmU4YjQ4
|
|
11
|
+
Mjk1Yjc1NjI2MDVkY2JhN2IwOGNiMzEwOWVlODRjZWExZGI5ZWM=
|
|
12
|
+
data.tar.gz: !binary |-
|
|
13
|
+
OTE4ZGI3ZDU1NjVkYTQ2OWQ2ZmRlODczMDFmN2NhOTVjNGUwOTg0ZDM4Y2Zj
|
|
14
|
+
OTdlNzc0Y2UyOGQyMmNmNDM1MWI1ZjVkMzA5NzlhOGMzOGJlZjNlODBiZTM1
|
|
15
|
+
N2ZhNmQwM2FkNThiMGUyODhkYzYwY2FlMmM1ZTQ3YmU4OWRmOGM=
|
data/CHANGELOG.md
ADDED
data/README.md
ADDED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
# Compass Chameleon
|
|
2
|
+
|
|
3
|
+
Chameleon is a theming/skinning extension for Compass. Chameleon allows you to
|
|
4
|
+
define themes and output themed CSS properties for each theme.
|
|
5
|
+
|
|
6
|
+
Imagine each section on your website having its own color scheme (primary color,
|
|
7
|
+
secondary color, tertiary color and so on). With Chameleon it's a breeze to
|
|
8
|
+
reuse the general styles and only change colors based on the theme.
|
|
9
|
+
|
|
10
|
+
## Installation
|
|
11
|
+
|
|
12
|
+
TODO: Release as gem and provide installation instructions.
|
|
13
|
+
|
|
14
|
+
## Usage
|
|
15
|
+
|
|
16
|
+
```scss
|
|
17
|
+
// First, set up your themes.
|
|
18
|
+
// Each theme is a list, consisting of two items: the theme-name {string} (this
|
|
19
|
+
// is what you would apply as a class to the container or body element) and the
|
|
20
|
+
// colors {list | color}, where the colors are ordered: primary theme color,
|
|
21
|
+
// secondary theme color, tertiary theme color etc.
|
|
22
|
+
//
|
|
23
|
+
$themes: ("red", (#FF0000, #F13333)),
|
|
24
|
+
("green", (#00FF00, #33F133)),
|
|
25
|
+
("blue", (#0000FF, #3333F1));
|
|
26
|
+
|
|
27
|
+
// Next, import Chameleon
|
|
28
|
+
@import "chameleon";
|
|
29
|
+
|
|
30
|
+
// Then, use the mixins to output themed properties
|
|
31
|
+
.page-title {
|
|
32
|
+
border-bottom: 1px solid;
|
|
33
|
+
@include themed(border-color, color);
|
|
34
|
+
}
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
This will output:
|
|
38
|
+
|
|
39
|
+
```css
|
|
40
|
+
.page-title {
|
|
41
|
+
border-bottom: 1px solid;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.red .page-title {
|
|
45
|
+
border-color: red;
|
|
46
|
+
color: #f13333;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.green .page-title {
|
|
50
|
+
border-color: lime;
|
|
51
|
+
color: #33f133;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.blue .page-title {
|
|
55
|
+
border-color: blue;
|
|
56
|
+
color: #3333f1;
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
In your HTML you'd add the theme name class to the `body` element to theme an entire page, or to a `div` or `section` or so to skin a component:
|
|
61
|
+
|
|
62
|
+
```html
|
|
63
|
+
<!-- Add the theme name class to the body element to theme an entire page: -->
|
|
64
|
+
<body class="red">
|
|
65
|
+
<!-- content -->
|
|
66
|
+
</body>
|
|
67
|
+
|
|
68
|
+
<!-- Or to a container to skin a component: -->
|
|
69
|
+
<section class="blue">
|
|
70
|
+
<!-- content -->
|
|
71
|
+
</section>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
## Mixins
|
|
75
|
+
|
|
76
|
+
Chameleon comes with a number of mixins for your theming pleasures:
|
|
77
|
+
|
|
78
|
+
### `themed`
|
|
79
|
+
|
|
80
|
+
Adds a style rule for *each* theme, containing the themed properties. Takes one or more CSS properties. Note: If you specify more properties than available colors for a theme, only the available property color pairs will be output.
|
|
81
|
+
|
|
82
|
+
Usage:
|
|
83
|
+
|
|
84
|
+
```scss
|
|
85
|
+
$themes: ("red", (#FF0000, #F13333)),
|
|
86
|
+
("green", (#00FF00)),
|
|
87
|
+
("blue", (#0000FF, #3333F1));
|
|
88
|
+
|
|
89
|
+
.page-title {
|
|
90
|
+
// In this case, theme `green` only has one color, it will only output the `background-color` property
|
|
91
|
+
@include themed(background-color, color);
|
|
92
|
+
}
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
Output:
|
|
96
|
+
|
|
97
|
+
```css
|
|
98
|
+
.red .page-title {
|
|
99
|
+
background-color: red;
|
|
100
|
+
color: #f13333;
|
|
101
|
+
}
|
|
102
|
+
.green .page-title {
|
|
103
|
+
background-color: lime;
|
|
104
|
+
}
|
|
105
|
+
.blue .page-title {
|
|
106
|
+
background-color: blue;
|
|
107
|
+
color: #3333f1;
|
|
108
|
+
}
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
### `properties-for-theme`
|
|
112
|
+
|
|
113
|
+
Adds a style rule for the *given* theme, containing the themed properties. Takes a theme and one or more properties (remember, a theme is a list of a name and a list of colors). Useful for those situations where only one theme is different. Use in conjunction with the `get-theme-by-name` function.
|
|
114
|
+
|
|
115
|
+
Usage:
|
|
116
|
+
|
|
117
|
+
```scss
|
|
118
|
+
.foo {
|
|
119
|
+
// First, look up the theme named 'red'
|
|
120
|
+
$theme: get-theme-by-name("red");
|
|
121
|
+
// Then, add the `color` property only for the `red` theme
|
|
122
|
+
@include properties-for-theme($theme, color);
|
|
123
|
+
}
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
Output:
|
|
127
|
+
|
|
128
|
+
```css
|
|
129
|
+
.red .single {
|
|
130
|
+
color: red;
|
|
131
|
+
}
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
## Functions
|
|
135
|
+
|
|
136
|
+
Chameleon uses a number of functions internally, but you can use them in your projects as well:
|
|
137
|
+
|
|
138
|
+
### `get-theme-by-name`
|
|
139
|
+
|
|
140
|
+
Returns a theme by its name. Takes a theme name.
|
|
141
|
+
|
|
142
|
+
```scss
|
|
143
|
+
.foo {
|
|
144
|
+
// First, look up the theme named 'red'
|
|
145
|
+
$theme: get-theme-by-name("red");
|
|
146
|
+
// Then, use $theme in a mixin include or in a style rule
|
|
147
|
+
}
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### `theme-color`
|
|
151
|
+
|
|
152
|
+
Returns the desired color (primary, secondary etc.) of the specified theme. Takes a theme and the desired color by ordinal number (primary color is 1, secondary color is 2, tertiary color is 3 etc.).
|
|
153
|
+
|
|
154
|
+
```scss
|
|
155
|
+
.foo {
|
|
156
|
+
// First, look up the theme named 'red'
|
|
157
|
+
$theme: get-theme-by-name("red");
|
|
158
|
+
// Then, use the tertiary color of that theme in this border property
|
|
159
|
+
border: 3px dashed theme-color($theme, 3);
|
|
160
|
+
}
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
## License
|
|
164
|
+
|
|
165
|
+
MIT License, see [LICENSE.txt](LICENSE.txt).
|
data/lib/chameleon.rb
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
// ----------------------------------------------------------------------------
|
|
2
|
+
// Sass List Functions
|
|
3
|
+
|
|
4
|
+
// Function fail-safe-nth
|
|
5
|
+
// Fail-safe implementation of `nth`. Gets the nth item in the list or returns
|
|
6
|
+
// null.
|
|
7
|
+
//
|
|
8
|
+
// @param $list {list} List of items
|
|
9
|
+
// @param $index {number} Index of the item to lookup
|
|
10
|
+
//
|
|
11
|
+
// @return {literal} The desired item
|
|
12
|
+
//
|
|
13
|
+
@function fail-safe-nth($list, $index: 1) {
|
|
14
|
+
|
|
15
|
+
// Check if $list is a list, otherwise we can't look up indexes in it.
|
|
16
|
+
@if type-of($list) != "list" {
|
|
17
|
+
@warn "$list should be a list";
|
|
18
|
+
@return null;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
// Check if $index is a positive number, otherwise we can't use it as
|
|
22
|
+
// an index.
|
|
23
|
+
@if type-of($index) != "number" or $index < 1 {
|
|
24
|
+
@warn "$index should be a number greater than or equal to 1";
|
|
25
|
+
@return null;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
// Only try to look up the item if the index is in the list
|
|
29
|
+
@if $index <= length($list) {
|
|
30
|
+
@return nth($list, $index);
|
|
31
|
+
} @else {
|
|
32
|
+
@warn "List index is #{$index} but the list of theme list is only #{length($list)} items long.";
|
|
33
|
+
@return null;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
// ----------------------------------------------------------------------------
|
|
38
|
+
// Theme functions
|
|
39
|
+
|
|
40
|
+
// Function get-theme-by-name
|
|
41
|
+
// Returns a theme by its name.
|
|
42
|
+
//
|
|
43
|
+
// @param $name {string} The theme name
|
|
44
|
+
//
|
|
45
|
+
// @returns {list} The desired theme
|
|
46
|
+
//
|
|
47
|
+
@function get-theme-by-name($name) {
|
|
48
|
+
@each $theme in $themes {
|
|
49
|
+
@if index($theme, $name) != false {
|
|
50
|
+
@return $theme;
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@return null;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// Function theme-color
|
|
58
|
+
// Returns the desired color (primary, secondary etc.) of the specified theme.
|
|
59
|
+
//
|
|
60
|
+
// @param $theme {string} Theme name as used in HTML
|
|
61
|
+
// @param $index {number} Desired color by ordinal number (primary color is 1, secondary color
|
|
62
|
+
// is 2, tertiary color is 3 etc.)
|
|
63
|
+
//
|
|
64
|
+
// @return {color} The desired color
|
|
65
|
+
//
|
|
66
|
+
@function theme-color($theme, $index) {
|
|
67
|
+
@if index($themes, $theme) == false {
|
|
68
|
+
@warn "Theme `#{$theme}` was not found in the list of themes.";
|
|
69
|
+
@return null;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@return fail-safe-nth(index($themes, $theme), $index);
|
|
73
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// ----------------------------------------------------------------------------
|
|
2
|
+
// Settings
|
|
3
|
+
|
|
4
|
+
// The themes list, normally you would specify `$themes` before importing
|
|
5
|
+
// chameleon.
|
|
6
|
+
//
|
|
7
|
+
// Each theme is a list, consisting of two items: the theme-name {string} (this
|
|
8
|
+
// is what you would apply as a class to the container or body element) and the
|
|
9
|
+
// colors {list | color}, where the colors are ordered: primary theme color,
|
|
10
|
+
// secondary theme color, tertiary theme color etc.
|
|
11
|
+
//
|
|
12
|
+
$themes: ("red", (#FF0000, #F13333)),
|
|
13
|
+
("green", (#00FF00, #33F133)),
|
|
14
|
+
("blue", (#0000FF, #3333F1)) !default;
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
// ----------------------------------------------------------------------------
|
|
2
|
+
// Theme
|
|
3
|
+
|
|
4
|
+
// Mixin themed
|
|
5
|
+
// Adds a style rule for each theme, containing the themed properties.
|
|
6
|
+
//
|
|
7
|
+
// @param $properties {list | string} One or more properties to theme
|
|
8
|
+
//
|
|
9
|
+
@mixin themed($properties...) {
|
|
10
|
+
@each $theme in $themes {
|
|
11
|
+
@include properties-for-theme($theme, $properties);
|
|
12
|
+
}
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
// Mixin properties-for-theme
|
|
16
|
+
// Adds a style rule for the given theme, containing the themed properties.
|
|
17
|
+
//
|
|
18
|
+
// @param $theme {list} The theme
|
|
19
|
+
// @param $propeties {list | string} One or more properties to theme
|
|
20
|
+
//
|
|
21
|
+
@mixin properties-for-theme($theme, $properties) {
|
|
22
|
+
$theme-name: fail-safe-nth($theme, 1);
|
|
23
|
+
$theme-colors: fail-safe-nth($theme, 2);
|
|
24
|
+
|
|
25
|
+
.#{$theme-name} & {
|
|
26
|
+
@for $i from 1 through length($properties) {
|
|
27
|
+
@if fail-safe-nth($theme-colors, $i) != null {
|
|
28
|
+
#{nth($properties, $i)}: fail-safe-nth($theme-colors, $i);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
}
|
metadata
ADDED
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
|
2
|
+
name: compass-chameleon
|
|
3
|
+
version: !ruby/object:Gem::Version
|
|
4
|
+
version: '0.1'
|
|
5
|
+
platform: ruby
|
|
6
|
+
authors:
|
|
7
|
+
- Leon de Rijke
|
|
8
|
+
autorequire:
|
|
9
|
+
bindir: bin
|
|
10
|
+
cert_chain: []
|
|
11
|
+
date: 2013-07-19 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.2.0
|
|
20
|
+
type: :runtime
|
|
21
|
+
prerelease: false
|
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
23
|
+
requirements:
|
|
24
|
+
- - ! '>='
|
|
25
|
+
- !ruby/object:Gem::Version
|
|
26
|
+
version: 3.2.0
|
|
27
|
+
- !ruby/object:Gem::Dependency
|
|
28
|
+
name: compass
|
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
|
30
|
+
requirements:
|
|
31
|
+
- - ! '>='
|
|
32
|
+
- !ruby/object:Gem::Version
|
|
33
|
+
version: 0.12.1
|
|
34
|
+
type: :runtime
|
|
35
|
+
prerelease: false
|
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
|
37
|
+
requirements:
|
|
38
|
+
- - ! '>='
|
|
39
|
+
- !ruby/object:Gem::Version
|
|
40
|
+
version: 0.12.1
|
|
41
|
+
description: Chameleon is a theming/skinning extension for Compass. Chameleon allows
|
|
42
|
+
you to define themes and output themed CSS properties for each theme.
|
|
43
|
+
email:
|
|
44
|
+
- leon@leonderijke.nl
|
|
45
|
+
executables: []
|
|
46
|
+
extensions: []
|
|
47
|
+
extra_rdoc_files: []
|
|
48
|
+
files:
|
|
49
|
+
- README.md
|
|
50
|
+
- CHANGELOG.md
|
|
51
|
+
- lib/chameleon.rb
|
|
52
|
+
- stylesheets/_chameleon.scss
|
|
53
|
+
- stylesheets/chameleon/_functions.scss
|
|
54
|
+
- stylesheets/chameleon/_settings.scss
|
|
55
|
+
- stylesheets/chameleon/_theme.scss
|
|
56
|
+
homepage: https://github.com/leonderijke/compass-chameleon
|
|
57
|
+
licenses:
|
|
58
|
+
- MIT
|
|
59
|
+
metadata: {}
|
|
60
|
+
post_install_message:
|
|
61
|
+
rdoc_options: []
|
|
62
|
+
require_paths:
|
|
63
|
+
- lib
|
|
64
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
|
65
|
+
requirements:
|
|
66
|
+
- - ! '>='
|
|
67
|
+
- !ruby/object:Gem::Version
|
|
68
|
+
version: '0'
|
|
69
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
70
|
+
requirements:
|
|
71
|
+
- - ! '>='
|
|
72
|
+
- !ruby/object:Gem::Version
|
|
73
|
+
version: '0'
|
|
74
|
+
requirements: []
|
|
75
|
+
rubyforge_project:
|
|
76
|
+
rubygems_version: 2.0.5
|
|
77
|
+
signing_key:
|
|
78
|
+
specification_version: 4
|
|
79
|
+
summary: A theming/skinning extension for Compass.
|
|
80
|
+
test_files: []
|