compass-pattern-primer 0.2.6 → 0.2.7
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +2 -1
- data/README.md +11 -13
- data/lib/compass-pattern-primer.rb +2 -2
- data/stylesheets/compass-pattern-primer/base/_forms.scss +1 -1
- data/stylesheets/compass-pattern-primer/partials/variables/base/_forms.scss +1 -0
- data/templates/project/manifest.rb +27 -27
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA512:
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
data.tar.gz: 98f466f0f904b87ef60bd2b7ce7f361b61f7b8604b481d3edefe6a9e47042934e6d30cc5852d6fc56d3ee422d38ea736dcaa07e1ab8a92fd9469a3467e7404b9
|
|
4
|
+
metadata.gz: caac415434592a67cb95930b666cb48d0f5d77cca68a68530b46d91d4f2cc034f9fd70a0154ef64dd99a6055577d40882295c665a9acbd144948c6077d4504a7
|
|
5
5
|
SHA1:
|
|
6
|
-
|
|
7
|
-
|
|
6
|
+
data.tar.gz: e64be830db644d3d93782328bc83f3c6d9809281
|
|
7
|
+
metadata.gz: 6c870c69d3e3d85c1ad8af93ea4eab61a5ef9a59
|
data/CHANGELOG.md
CHANGED
|
@@ -5,4 +5,5 @@
|
|
|
5
5
|
* **0.2.3** Fixed missing <html> tag on pattern-primer.html. Color scheme and modules are easier to opt out of in global.scss
|
|
6
6
|
* **0.2.4** Added MIT GPL-3 Licenses — thanks to Benjamin Fleischer (https://github.com/bf4) for the prompting
|
|
7
7
|
* **0.2.5** Fixed errors in time style in base/_tyopgraphy.scss
|
|
8
|
-
* **0.2.6** Forgot to update Changelog
|
|
8
|
+
* **0.2.6** Forgot to update Changelog
|
|
9
|
+
* **0.2.7** Added `$forms-input-width` variable
|
data/README.md
CHANGED
|
@@ -105,7 +105,6 @@ Or selectively, here's the full list you can select which parts:
|
|
|
105
105
|
@import "compass-pattern-primer/base/_buttons";
|
|
106
106
|
```
|
|
107
107
|
|
|
108
|
-
|
|
109
108
|
### Modules
|
|
110
109
|
Similarly the modules allow can be imported whole or selectively.
|
|
111
110
|
|
|
@@ -118,7 +117,7 @@ Or
|
|
|
118
117
|
@import "compass-pattern-primer/modules/_control";
|
|
119
118
|
@import "compass-pattern-primer/modules/_feedback";
|
|
120
119
|
@import "compass-pattern-primer/modules/_options";
|
|
121
|
-
@import "compass-pattern-primer/modules/_pagination";
|
|
120
|
+
@import "compass-pattern-primer/modules/_pagination";
|
|
122
121
|
```
|
|
123
122
|
Styles for the modules can be changed using **overrides** and extended to other elements using **extendables**.
|
|
124
123
|
|
|
@@ -136,19 +135,19 @@ In this example I am extending an `input` with the `id="reset"` to `%button-acti
|
|
|
136
135
|
|
|
137
136
|
```scss
|
|
138
137
|
input#reset {
|
|
139
|
-
@extend %button-active;
|
|
138
|
+
@extend %button-active;
|
|
140
139
|
}
|
|
141
140
|
```
|
|
142
141
|
#### Colors
|
|
143
142
|
Custom color guides can generated by altering the `$primary-color` variable in `partials/colors`. If you want to see this in action, the best option is to build a project using the SMACSS scaffolding. Color guides are created using [Color Schemer](https://github.com/Team-Sass/color-schemer) and can be viewed on the `pattern-primer.html` page.
|
|
144
143
|
|
|
145
|
-
Color Schemer is feature rich and allows you to generate color schemes using color theory schemes: mono, complement, triad, tetrad, analogic, accented-analogic. See [Color Schemer](https://github.com/Team-Sass/color-schemer) for more info.
|
|
144
|
+
Color Schemer is feature rich and allows you to generate color schemes using color theory schemes: mono, complement, triad, tetrad, analogic, accented-analogic. See [Color Schemer](https://github.com/Team-Sass/color-schemer) for more info.
|
|
146
145
|
|
|
147
146
|
The colors also take advantage of `tint-stack` and `shade-stack` to generate 6 (by default but can be extended) tints (mixed with white) or shades (mixed with black) of your colors. Documentation for these functions can be found in [Toolkit](https://github.com/Team-Sass/toolkit).
|
|
148
147
|
|
|
149
148
|
```scss
|
|
150
149
|
$primary-color: #57068c;
|
|
151
|
-
$black-value: #333;
|
|
150
|
+
$black-value: #333;
|
|
152
151
|
```
|
|
153
152
|
|
|
154
153
|
```scss
|
|
@@ -156,7 +155,7 @@ $black: tint-stack($black-value);
|
|
|
156
155
|
$primary: tint-stack(cs-primary());
|
|
157
156
|
$secondary: tint-stack(cs-secondary());
|
|
158
157
|
$tertiary: tint-stack(cs-tertiary());
|
|
159
|
-
$quadrary: tint-stack(cs-quadrary())
|
|
158
|
+
$quadrary: tint-stack(cs-quadrary())
|
|
160
159
|
```
|
|
161
160
|
|
|
162
161
|
The advantage of this is you can design your site using `tint-stack` variables. You can then easily adjust your colors by simply altering the `$primary-color` variable.
|
|
@@ -168,18 +167,17 @@ $link-visited-link-color: nth($primary, 2);
|
|
|
168
167
|
|
|
169
168
|
## Features to be added
|
|
170
169
|
#### More scaffolding options.
|
|
171
|
-
At the moment there's only one option to use my SMACSS scaffolding and a static html preview page. This works for some use cases but doesn't allow you to easily add patterns.
|
|
170
|
+
At the moment there's only one option to use my SMACSS scaffolding and a static html preview page. This works for some use cases but doesn't allow you to easily add patterns.
|
|
172
171
|
|
|
173
|
-
I intend to allow a scaffolding option that includes the original patterns and `index.php` file from Jeremy Keith's [Pattern Primer](https://github.com/adactio/Pattern-Primer) repo.
|
|
172
|
+
I intend to allow a scaffolding option that includes the original patterns and `index.php` file from Jeremy Keith's [Pattern Primer](https://github.com/adactio/Pattern-Primer) repo.
|
|
174
173
|
|
|
175
174
|
Another option could be to create a very basic scaffolding that doesn't use the SMACSS approach. So that you can use you own.
|
|
176
175
|
|
|
177
176
|
#### Use existing Compass Reset gems
|
|
178
|
-
I realized after the fact that all my reset's existed as compass gems. Doesn't seem like a good idea to duplicate code.
|
|
179
|
-
- [Meyer Reset](https://github.com/adamstac/meyer-reset)
|
|
180
|
-
- [Compass Normalize](https://github.com/ksmandersen/compass-normalize)
|
|
181
|
-
- [Compass Formalize](https://github.com/pengwynn/compass_formalize)
|
|
182
|
-
|
|
177
|
+
I realized after the fact that all my reset's existed as compass gems. Doesn't seem like a good idea to duplicate code.
|
|
178
|
+
- [Meyer Reset](https://github.com/adamstac/meyer-reset)
|
|
179
|
+
- [Compass Normalize](https://github.com/ksmandersen/compass-normalize)
|
|
180
|
+
- [Compass Formalize](https://github.com/pengwynn/compass_formalize)
|
|
183
181
|
|
|
184
182
|
|
|
185
183
|
#### ~~Simplify `bounding-box` mixin~~ DONE
|
|
@@ -18,8 +18,8 @@ Compass::Frameworks.register('compass-pattern-primer', :path => extension_path)
|
|
|
18
18
|
# a prerelease version
|
|
19
19
|
# Date is in the form of YYYY-MM-DD
|
|
20
20
|
module Compass_Pattern_Primer
|
|
21
|
-
VERSION = "0.2.
|
|
22
|
-
DATE = "2013-
|
|
21
|
+
VERSION = "0.2.7"
|
|
22
|
+
DATE = "2013-09-09"
|
|
23
23
|
end
|
|
24
24
|
|
|
25
25
|
# This is where any custom SassScript should be placed. The functions will be
|
|
@@ -5,34 +5,34 @@ description "Compass Pattern Primer is based on Adactio/Jeremy Keith's Pattern P
|
|
|
5
5
|
file 'global.scss', :like => :stylesheet, :media => 'screen, projection'
|
|
6
6
|
|
|
7
7
|
# Partials
|
|
8
|
-
file 'partials/_browsers.scss',
|
|
9
|
-
file 'partials/_colors.scss',
|
|
10
|
-
file 'partials/_extendables.scss',
|
|
11
|
-
file 'partials/_functions.scss',
|
|
12
|
-
file 'partials/_mixins.scss',
|
|
13
|
-
file 'partials/_variables.scss',
|
|
8
|
+
file 'partials/_browsers.scss', :like => :stylesheet, :to => 'partials/_browsers.scss'
|
|
9
|
+
file 'partials/_colors.scss', :like => :stylesheet, :to => 'partials/_colors.scss'
|
|
10
|
+
file 'partials/_extendables.scss', :like => :stylesheet, :to => 'partials/_extendables.scss'
|
|
11
|
+
file 'partials/_functions.scss', :like => :stylesheet, :to => 'partials/_functions.scss'
|
|
12
|
+
file 'partials/_mixins.scss', :like => :stylesheet, :to => 'partials/_mixins.scss'
|
|
13
|
+
file 'partials/_variables.scss', :like => :stylesheet, :to => 'partials/_variables.scss'
|
|
14
14
|
|
|
15
15
|
# Variables
|
|
16
|
-
file 'partials/variables/base/_page.scss',
|
|
17
|
-
file 'partials/variables/modules/_header.scss',
|
|
18
|
-
file 'partials/variables/modules/_footer.scss',
|
|
19
|
-
file 'partials/variables/layout/_breakpoints.scss',
|
|
20
|
-
file 'partials/variables/layout/_page.scss',
|
|
21
|
-
file 'partials/variables/state/_page.scss',
|
|
22
|
-
file 'partials/variables/state/_header.scss',
|
|
23
|
-
file 'partials/variables/state/_footer.scss',
|
|
24
|
-
file 'partials/variables/theme/_page.scss',
|
|
25
|
-
file 'partials/variables/theme/_overrides.scss',
|
|
16
|
+
file 'partials/variables/base/_page.scss', :like => :stylesheet, :to => 'partials/variables/base/_page.scss'
|
|
17
|
+
file 'partials/variables/modules/_header.scss', :like => :stylesheet, :to => 'partials/variables/modules/_header.scss'
|
|
18
|
+
file 'partials/variables/modules/_footer.scss', :like => :stylesheet, :to => 'partials/variables/modules/_footer.scss'
|
|
19
|
+
file 'partials/variables/layout/_breakpoints.scss', :like => :stylesheet, :to => 'partials/variables/layout/_breakpoints.scss'
|
|
20
|
+
file 'partials/variables/layout/_page.scss', :like => :stylesheet, :to => 'partials/variables/layout/_page.scss'
|
|
21
|
+
file 'partials/variables/state/_page.scss', :like => :stylesheet, :to => 'partials/variables/state/_page.scss'
|
|
22
|
+
file 'partials/variables/state/_header.scss', :like => :stylesheet, :to => 'partials/variables/state/_header.scss'
|
|
23
|
+
file 'partials/variables/state/_footer.scss', :like => :stylesheet, :to => 'partials/variables/state/_footer.scss'
|
|
24
|
+
file 'partials/variables/theme/_page.scss', :like => :stylesheet, :to => 'partials/variables/theme/_page.scss'
|
|
25
|
+
file 'partials/variables/theme/_overrides.scss', :like => :stylesheet, :to => 'partials/variables/theme/_overrides.scss'
|
|
26
26
|
|
|
27
27
|
# SMACSS
|
|
28
|
-
file 'base/_page.scss',
|
|
29
|
-
file 'modules/_header.scss',
|
|
30
|
-
file 'modules/_footer.scss',
|
|
31
|
-
file 'layout/_page.scss',
|
|
32
|
-
file 'state/_page.scss',
|
|
33
|
-
file 'state/_header.scss',
|
|
34
|
-
file 'state/_footer.scss',
|
|
35
|
-
file 'theme/_page.scss',
|
|
28
|
+
file 'base/_page.scss', :like => :stylesheet, :to => 'base/_page.scss'
|
|
29
|
+
file 'modules/_header.scss', :like => :stylesheet, :to => 'modules/_header.scss'
|
|
30
|
+
file 'modules/_footer.scss', :like => :stylesheet, :to => 'modules/_footer.scss'
|
|
31
|
+
file 'layout/_page.scss', :like => :stylesheet, :to => 'layout/_page.scss'
|
|
32
|
+
file 'state/_page.scss', :like => :stylesheet, :to => 'state/_page.scss'
|
|
33
|
+
file 'state/_header.scss', :like => :stylesheet, :to => 'state/_header.scss'
|
|
34
|
+
file 'state/_footer.scss', :like => :stylesheet, :to => 'state/_footer.scss'
|
|
35
|
+
file 'theme/_page.scss', :like => :stylesheet, :to => 'theme/_page.scss'
|
|
36
36
|
|
|
37
37
|
# Javascript Import
|
|
38
38
|
# file 'scripts.js', :like => :javascript, :to => 'scripts.js'
|
|
@@ -45,13 +45,13 @@ file 'pattern-primer.html', :like => :html, :to => "pattern-primer.html"
|
|
|
45
45
|
|
|
46
46
|
# Compass Extension Help
|
|
47
47
|
help %Q{
|
|
48
|
-
The best place for help is to read the documentation in Github: https://github.com/alienresident/compass-pattern-primer
|
|
48
|
+
The best place for help is to read the documentation in Github: https://github.com/alienresident/compass-pattern-primer
|
|
49
49
|
}
|
|
50
50
|
|
|
51
51
|
# Compass Extension Welcome Message
|
|
52
52
|
# Users will see this when they create a new project using this template.
|
|
53
53
|
welcome_message %Q{
|
|
54
|
-
Welcome to Compass Pattern Primer!
|
|
54
|
+
Welcome to Compass Pattern Primer!
|
|
55
55
|
Documentation: https://github.com/alienresident/compass-pattern-primer
|
|
56
|
-
Contact: mark@alienresident.net
|
|
56
|
+
Contact: mark@alienresident.net
|
|
57
57
|
}
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: compass-pattern-primer
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.2.
|
|
4
|
+
version: 0.2.7
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Mark Reilly
|
|
@@ -9,7 +9,7 @@ autorequire:
|
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
11
|
|
|
12
|
-
date: 2013-
|
|
12
|
+
date: 2013-09-09 00:00:00 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: sass
|