compass-chameleon 0.1
Sign up to get free protection for your applications and to get access to all the features.
- 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: []
|