compass-pug 0.0.3.pre.alpha → 0.0.4

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,15 +1,15 @@
1
1
  ---
2
2
  !binary "U0hBMQ==":
3
3
  metadata.gz: !binary |-
4
- ZmRmOGE2NjBmMWM1ZGFjNDE5ZTM4MjdjYWMxOWMxNmFjMWUyZmU2Ng==
4
+ ZWRhNDMyMmM4NzA4YTNkYjI2MDM4NWIzM2NmMGFhOTc0YmRhYTAwOA==
5
5
  data.tar.gz: !binary |-
6
- NzY0YjUwM2E5MmI2MWYwZmI4ZTczYmI2ZWUyNjc0NGNkZDU1Yzk1Nw==
6
+ MzhiNDc2NmZkZTAwNTkyMTg2NmUxYThlNDkwODc1ZjU1ODVjNDA4Mg==
7
7
  SHA512:
8
8
  metadata.gz: !binary |-
9
- MzM3NDkzYWI0MzZiNGIyMzg0ZTZhYWRlZWExOGY3YTRiN2Q3NmExOWU1OTgw
10
- YmFiZjcyZjI1MTU5MGZkYTcxNTUwNDYzNTY4NTA1Y2QwMDIzNWZiMzNlOWEw
11
- M2FlYmY1YTE4ODIzNTE5Zjc0ZjY0YTM3ZWNlMWQwNDQxNTZhZWU=
9
+ MjRjZmFkZDA2MTFiZGRmNmI1NzUwNDgxYmE3NGNjYzQ1NzA5Yzg5M2Q5ZmE0
10
+ YWQzNDFlYjk0NjJkYjMxOTU2NzY5MGIzNWY0MDdjYzJmYTM0ZDA5YTZjZmQw
11
+ M2YyYzEyMzI4YjI0NDk5YTcwMGM1ZWJlMWY3OTViYTJiZmJlNWI=
12
12
  data.tar.gz: !binary |-
13
- ZmUzNGIxOWM4NzI2NWExYmY2Mjg1ODU0OTEzYzU1OWYxZWE1Mjg1ZWE5OTk2
14
- N2EwOGEyMGJiMmEyMjNhMWVmNDhhNjdiNzUxMTE5ZWQ5OWZiNDIyZWM0ZGM2
15
- MzRjMDEyMGVmZTFmNjg1MWZlODFmNzYzNDQ3MmM2NTgyYzdlMmY=
13
+ OWUzY2NlYjI3NDI3MGVjNDQ3MWJhYjQ5NTNjZDM2NDc5ODUzNzdkYzhhMzU1
14
+ MTkyZWJjZGJiYmU4MDQ3OTAzYWY2OTNlYmY4NjY2OWZlOTI1NThmNDk2ZWRi
15
+ OGE4ZTYyNzMwYmI3YTZlZmU1YjAwOTQzYzMxODAyODJiNmU4MWY=
data/README.md CHANGED
@@ -1 +1,38 @@
1
1
  # Pug for Compass
2
+
3
+ A collection of Sass functions and mixins for use in Compass projects. It currently requires Sass `>=3.3` and Compass `>= 1.0.0.alpha.21`.
4
+
5
+ ## Installation
6
+
7
+ Pug is distributed as a Ruby gem called `compass-pug`. You can install it with the `gem` command:
8
+
9
+ gem install compass-pug
10
+
11
+ Once the gem is installed, `require` it in your Compass project's config file:
12
+
13
+ require 'compass-pug'
14
+
15
+ And import the library itself in your Sass/SCSS code:
16
+
17
+ @import "pug";
18
+
19
+ ## What's Included
20
+
21
+ For complete details, including function/mixin parameters, view the `stylesheets/pug/_functions.scss` and `stylesheets/pug/_mixins.scss` source files. And take a look at `stylesheets/_pug.scss` for various overridable configuration variables (define your own value for any of these prior to importing Pug).
22
+
23
+ ### Sass Mixins
24
+
25
+ * `pug-dark-bg-with-light-text()`: Quickly apply bg, text and link colors to a selector appropriate for a dark background with light text.
26
+ * `pug-light-bg-with-dark-text()`: Quickly apply bg, text and link colors to a selector appropriate for a light background with dark text.
27
+ * `pug-micro-clearfix()`: [Provides Nicolas Gallagher's Micro Clearfix](http://nicolasgallagher.com/micro-clearfix-hack/).
28
+ * `pug-placeholder-color()`: Generates cross-browser CSS (with selectors) for setting the color of input field placeholder text. Via [CSS Tricks](http://css-tricks.com/snippets/css/style-placeholder-text/).
29
+ * `pug-tab-size()`: Vendor-prefixed tab sizing. Use with elements such as `pre`.
30
+ * `pug-sr-only()`: Apply to an element to make it accessible only to screen readers. [Adapted from Bootstrap 3](http://getbootstrap.com/css/#helper-classes-screen-readers).
31
+ * `pug-sr-only-focusable()`: Applies (optionally) `pug-sr-only` and shows the element again when it's focused. [Adapted from Bootstrap 3](http://getbootstrap.com/css/#helper-classes-screen-readers).
32
+
33
+ ### Sass Functions
34
+
35
+ * `pug-calculate-line-height()`: Calculate an appropriate line-height value that maintains vertical rhythm.
36
+ * `pug-round-up-to-nearest-vertical-unit()`: Round a size up to the nearest factor of a vertical unit (or of a sub-unit of that vertical unit). Parameters must use the same unit of measurement (rem, px, etc).
37
+ * `pug-strip-units()`: Strip unit of measurement from a numeric value. Ex: `10px` becomes `10`.
38
+ * `pug-units-match()`: Determine whether two or more values use the same unit of measurement (such as px, rem, etc). Similar to the Sass comparable() function but requires exact match (such as mm and mm, but not cm and mm).
@@ -4,6 +4,23 @@
4
4
 
5
5
  // Default values
6
6
  // ---------------------------------------------------------------------------
7
+ // Colors
8
+ $pug-bg-color-light: #FFF !default;
9
+ $pug-bg-color-dark: #202020 !default;
10
+
11
+ // Darkish text colors used on light backgrounds.
12
+ $pug-text-color-dark: #202020 !default;
13
+ $pug-link-default-color-dark: #4183c4 !default;
14
+ $pug-link-visited-color-dark: $pug-link-default-color-dark !default;
15
+ $pug-link-hover-color-dark: lighten($pug-link-default-color-dark, 20%) !default;
16
+
17
+ // Lightish text colors used on dark backgrounds.
18
+ $pug-text-color-light: #FEFEFE !default;
19
+ $pug-link-default-color-light: #9DC7F5 !default;
20
+ $pug-link-visited-color-light: $pug-link-default-color-light !default;
21
+ $pug-link-hover-color-light: lighten($pug-link-default-color-light, 20%) !default;
22
+
23
+ // Tab size
7
24
  $pug-tab-size: 2 !default;
8
25
 
9
26
  // Vars related to vertical-rhythm.
@@ -12,7 +29,7 @@ $pug-vr-vertical-unit: 24px !default;
12
29
  $pug-vr-preferred-division: 0.5 !default;
13
30
  $pug-vr-line-height-minimum-difference-proportion: 0.25 !default;
14
31
 
15
- // Import
32
+ // Imports
16
33
  // ---------------------------------------------------------------------------
17
34
  @import "pug/functions";
18
35
  @import "pug/mixins";
@@ -1,5 +1,71 @@
1
1
  /* Pug - Core Mixins */
2
2
 
3
+ /**
4
+ * Quickly apply appropriate styles to an element for having a dark background.
5
+ *
6
+ * This mixin will adjust bg, text and link color.
7
+ *
8
+ * @param string $bg-color
9
+ * @param string $text-color
10
+ * @param string $link-default-color
11
+ * @param string $link-visited-color
12
+ * @param string $link-hover-color
13
+ */
14
+ @mixin pug-dark-bg-with-light-text(
15
+ $bg-color: $pug-bg-color-dark,
16
+ $text-color: $pug-text-color-light,
17
+ $link-default-color: $pug-link-default-color-light,
18
+ $link-visited-color: $pug-link-visited-color-light,
19
+ $link-hover-color: $pug-link-hover-color-light
20
+ ) {
21
+ background-color: $bg-color;
22
+ color: $text-color;
23
+ a:link {
24
+ color: $link-default-color;
25
+ }
26
+ a:visited {
27
+ color: $link-visited-color;
28
+ }
29
+ a:hover,
30
+ a:active,
31
+ a:focus {
32
+ color: $link-hover-color;
33
+ }
34
+ }
35
+
36
+ /**
37
+ * Quickly apply appropriate styles to an element for having a light background.
38
+ *
39
+ * This mixin will adjust bg, text and link color.
40
+ *
41
+ * @param string $bg-color
42
+ * @param string $text-color
43
+ * @param string $link-default-color
44
+ * @param string $link-visited-color
45
+ * @param string $link-hover-color
46
+ */
47
+ @mixin pug-light-bg-with-dark-text(
48
+ $bg-color: $pug-bg-color-light,
49
+ $text-color: $pug-text-color-dark,
50
+ $link-default-color: $pug-link-default-color-dark,
51
+ $link-visited-color: $pug-link-visited-color-dark,
52
+ $link-hover-color: $pug-link-hover-color-dark
53
+ ) {
54
+ background-color: $bg-color;
55
+ color: $text-color;
56
+ a:link {
57
+ color: $link-default-color;
58
+ }
59
+ a:visited {
60
+ color: $link-visited-color;
61
+ }
62
+ a:hover,
63
+ a:active,
64
+ a:focus {
65
+ color: $link-hover-color;
66
+ }
67
+ }
68
+
3
69
  /**
4
70
  * Micro-clearfix.
5
71
  *
@@ -40,7 +106,6 @@
40
106
  }
41
107
  }
42
108
 
43
-
44
109
  /**
45
110
  * Vendor-prefixed tab sizing. Use in elements such as pre.
46
111
  *
@@ -56,10 +121,10 @@
56
121
  /**
57
122
  * Apply to an element to make it accessible only to screen readers. (adapted from Bootstrap 3)
58
123
  *
59
- * @see sr-only-focusable()
124
+ * @see pug-sr-only-focusable()
60
125
  * @see http://getbootstrap.com/css/#helper-classes-screen-readers
61
126
  */
62
- @mixin sr-only {
127
+ @mixin pug-sr-only {
63
128
  position: absolute;
64
129
  width: 1px;
65
130
  height: 1px;
@@ -78,10 +143,10 @@
78
143
  * only set this to false if you had already applied sr-only() to an element receiving
79
144
  * sr-only-focusable).
80
145
  *
81
- * @see sr-only()
146
+ * @see pug-sr-only()
82
147
  * @see http://getbootstrap.com/css/#helper-classes-screen-readers
83
148
  */
84
- @mixin sr-only-focusable($include-sr-only: true) {
149
+ @mixin pug-sr-only-focusable($include-sr-only: true) {
85
150
  @if $include-sr-only == true {
86
151
  @include sr-only;
87
152
  }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: compass-pug
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.3.pre.alpha
4
+ version: 0.0.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - Andrew Kamm
@@ -63,9 +63,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
63
63
  version: '0'
64
64
  required_rubygems_version: !ruby/object:Gem::Requirement
65
65
  requirements:
66
- - - ! '>'
66
+ - - ! '>='
67
67
  - !ruby/object:Gem::Version
68
- version: 1.3.1
68
+ version: '0'
69
69
  requirements: []
70
70
  rubyforge_project:
71
71
  rubygems_version: 2.2.2