compass-pug 0.0.3.pre.alpha → 0.0.4

checksums.yaml

@@ -1,15 +1,15 @@
 ---
 !binary "U0hBMQ==":
   metadata.gz: !binary |-
-    ZmRmOGE2NjBmMWM1ZGFjNDE5ZTM4MjdjYWMxOWMxNmFjMWUyZmU2Ng==
+    ZWRhNDMyMmM4NzA4YTNkYjI2MDM4NWIzM2NmMGFhOTc0YmRhYTAwOA==
   data.tar.gz: !binary |-
-    NzY0YjUwM2E5MmI2MWYwZmI4ZTczYmI2ZWUyNjc0NGNkZDU1Yzk1Nw==
+    MzhiNDc2NmZkZTAwNTkyMTg2NmUxYThlNDkwODc1ZjU1ODVjNDA4Mg==
 SHA512:
   metadata.gz: !binary |-
-    MzM3NDkzYWI0MzZiNGIyMzg0ZTZhYWRlZWExOGY3YTRiN2Q3NmExOWU1OTgw
-    YmFiZjcyZjI1MTU5MGZkYTcxNTUwNDYzNTY4NTA1Y2QwMDIzNWZiMzNlOWEw
-    M2FlYmY1YTE4ODIzNTE5Zjc0ZjY0YTM3ZWNlMWQwNDQxNTZhZWU=
+    MjRjZmFkZDA2MTFiZGRmNmI1NzUwNDgxYmE3NGNjYzQ1NzA5Yzg5M2Q5ZmE0
+    YWQzNDFlYjk0NjJkYjMxOTU2NzY5MGIzNWY0MDdjYzJmYTM0ZDA5YTZjZmQw
+    M2YyYzEyMzI4YjI0NDk5YTcwMGM1ZWJlMWY3OTViYTJiZmJlNWI=
   data.tar.gz: !binary |-
-    ZmUzNGIxOWM4NzI2NWExYmY2Mjg1ODU0OTEzYzU1OWYxZWE1Mjg1ZWE5OTk2
-    N2EwOGEyMGJiMmEyMjNhMWVmNDhhNjdiNzUxMTE5ZWQ5OWZiNDIyZWM0ZGM2
-    MzRjMDEyMGVmZTFmNjg1MWZlODFmNzYzNDQ3MmM2NTgyYzdlMmY=
+    OWUzY2NlYjI3NDI3MGVjNDQ3MWJhYjQ5NTNjZDM2NDc5ODUzNzdkYzhhMzU1
+    MTkyZWJjZGJiYmU4MDQ3OTAzYWY2OTNlYmY4NjY2OWZlOTI1NThmNDk2ZWRi
+    OGE4ZTYyNzMwYmI3YTZlZmU1YjAwOTQzYzMxODAyODJiNmU4MWY=

data/README.md

@@ -1 +1,38 @@
 # Pug for Compass
+
+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`.
+
+## Installation
+
+Pug is distributed as a Ruby gem called `compass-pug`. You can install it with the `gem` command:
+
+    gem install compass-pug
+
+Once the gem is installed, `require` it in your Compass project's config file:
+
+    require 'compass-pug'
+
+And import the library itself in your Sass/SCSS code:
+
+    @import "pug";
+
+## What's Included
+
+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).
+
+### Sass Mixins
+
+* `pug-dark-bg-with-light-text()`: Quickly apply bg, text and link colors to a selector appropriate for a dark background with light text.
+* `pug-light-bg-with-dark-text()`: Quickly apply bg, text and link colors to a selector appropriate for a light background with dark text.
+* `pug-micro-clearfix()`: [Provides Nicolas Gallagher's Micro Clearfix](http://nicolasgallagher.com/micro-clearfix-hack/).
+* `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/).
+* `pug-tab-size()`: Vendor-prefixed tab sizing. Use with elements such as `pre`.
+* `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).
+* `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).
+
+### Sass Functions
+
+* `pug-calculate-line-height()`: Calculate an appropriate line-height value that maintains vertical rhythm.
+* `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).
+* `pug-strip-units()`: Strip unit of measurement from a numeric value. Ex: `10px` becomes `10`.
+* `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).

data/stylesheets/_pug.scss

@@ -4,6 +4,23 @@
 
 // Default values
 // ---------------------------------------------------------------------------
+// Colors
+$pug-bg-color-light: #FFF !default;
+$pug-bg-color-dark: #202020 !default;
+
+// Darkish text colors used on light backgrounds.
+$pug-text-color-dark: #202020 !default;
+$pug-link-default-color-dark: #4183c4 !default;
+$pug-link-visited-color-dark: $pug-link-default-color-dark !default;
+$pug-link-hover-color-dark: lighten($pug-link-default-color-dark, 20%) !default;
+
+// Lightish text colors used on dark backgrounds.
+$pug-text-color-light: #FEFEFE !default;
+$pug-link-default-color-light: #9DC7F5 !default;
+$pug-link-visited-color-light: $pug-link-default-color-light !default;
+$pug-link-hover-color-light: lighten($pug-link-default-color-light, 20%) !default;
+
+// Tab size
 $pug-tab-size: 2 !default;
 
 // Vars related to vertical-rhythm.
@@ -12,7 +29,7 @@ $pug-vr-vertical-unit: 24px !default;
 $pug-vr-preferred-division: 0.5 !default;
 $pug-vr-line-height-minimum-difference-proportion: 0.25 !default;
 
-// Import
+// Imports
 // ---------------------------------------------------------------------------
 @import "pug/functions";
 @import "pug/mixins";

data/stylesheets/pug/_mixins.scss

@@ -1,5 +1,71 @@
 /* Pug - Core Mixins */
 
+/**
+ * Quickly apply appropriate styles to an element for having a dark background.
+ *
+ * This mixin will adjust bg, text and link color.
+ *
+ * @param string $bg-color
+ * @param string $text-color
+ * @param string $link-default-color
+ * @param string $link-visited-color
+ * @param string $link-hover-color
+ */
+@mixin pug-dark-bg-with-light-text(
+		$bg-color: $pug-bg-color-dark,
+		$text-color: $pug-text-color-light,
+		$link-default-color: $pug-link-default-color-light,
+		$link-visited-color: $pug-link-visited-color-light,
+		$link-hover-color: $pug-link-hover-color-light
+	) {
+	background-color: $bg-color;
+	color: $text-color;
+	a:link {
+		color: $link-default-color;
+	}
+	a:visited {
+		color: $link-visited-color;
+	}
+	a:hover,
+	a:active,
+	a:focus {
+		color: $link-hover-color;
+	}
+}
+
+/**
+ * Quickly apply appropriate styles to an element for having a light background.
+ *
+ * This mixin will adjust bg, text and link color.
+ *
+ * @param string $bg-color
+ * @param string $text-color
+ * @param string $link-default-color
+ * @param string $link-visited-color
+ * @param string $link-hover-color
+ */
+@mixin pug-light-bg-with-dark-text(
+		$bg-color: $pug-bg-color-light,
+		$text-color: $pug-text-color-dark,
+		$link-default-color: $pug-link-default-color-dark,
+		$link-visited-color: $pug-link-visited-color-dark,
+		$link-hover-color: $pug-link-hover-color-dark
+	) {
+	background-color: $bg-color;
+	color: $text-color;
+	a:link {
+		color: $link-default-color;
+	}
+	a:visited {
+		color: $link-visited-color;
+	}
+	a:hover,
+	a:active,
+	a:focus {
+		color: $link-hover-color;
+	}
+}
+
 /**
  * Micro-clearfix.
  *
@@ -40,7 +106,6 @@
 	}
 }
 
-
 /**
  * Vendor-prefixed tab sizing. Use in elements such as pre.
  *
@@ -56,10 +121,10 @@
 /**
  * Apply to an element to make it accessible only to screen readers. (adapted from Bootstrap 3)
  *
- * @see sr-only-focusable()
+ * @see pug-sr-only-focusable()
  * @see http://getbootstrap.com/css/#helper-classes-screen-readers
  */
-@mixin sr-only {
+@mixin pug-sr-only {
 	position: absolute;
 	width: 1px;
 	height: 1px;
@@ -78,10 +143,10 @@
  *  only set this to false if you had already applied sr-only() to an element receiving
  *  sr-only-focusable).
  *
- * @see sr-only()
+ * @see pug-sr-only()
  * @see http://getbootstrap.com/css/#helper-classes-screen-readers
  */
-@mixin sr-only-focusable($include-sr-only: true) {
+@mixin pug-sr-only-focusable($include-sr-only: true) {
 	@if $include-sr-only == true {
 		@include sr-only;
 	}

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: compass-pug
 version: !ruby/object:Gem::Version
-  version: 0.0.3.pre.alpha
+  version: 0.0.4
 platform: ruby
 authors:
 - Andrew Kamm
@@ -63,9 +63,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ! '>'
+  - - ! '>='
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubyforge_project: 
 rubygems_version: 2.2.2