compass-pattern-primer 0.3.beta → 0.4.beta

checksums.yaml

@@ -1,7 +1,7 @@
 --- 
-SHA1: 
-  data.tar.gz: 0de95f5460a05c3272087101d4dc87e492bab9bc
-  metadata.gz: 55f32509a2e6dabdd8488909fad6f5c272a4e0af
 SHA512: 
-  data.tar.gz: b6135ec2a68efa323bd60400564a54f6bc53c1b615fc8df1ffcb0c46709943e8689d0bd81b33b6cbc030b92b4461870fcc4aa69e40f9d6264c6c540dfad130d1
-  metadata.gz: b475432c33e9432bba9ce485dbe763ff572d5366d706a433b869c4c5f9ce51f6474222f3bed5bab98d21669d0ca6622c91e24a1615b460e2099fa34e16946f7f
+  metadata.gz: 61319d807f6764e5db0ddd72b8df8bcadafc710db87764be33f5d065aa13a9ecc4bb0a4cb5c4a3c341fff65605c17b3d2855804323da452364df8c5272455af6
+  data.tar.gz: 3b5ed5ac6dad4033532079cffb8acca9a1fbf74fdd585e6ce93c28406c6eafbb9401c0a9e88f8d26f1b9bb32d6542578ee785ea6d78b75c430a3d55f9cb97070
+SHA1: 
+  metadata.gz: 113d74613feb16929a542ec171ec2cfe79f88c56
+  data.tar.gz: 211c1e20640cc9476fdafb249bad63f2c9a99d79

data/CHANGELOG.md

@@ -8,4 +8,5 @@
 * **0.2.6** Forgot to update Changelog
 * **0.2.7** Added `$forms-input-width` variable
 * **0.2.8** Added `%formstyle` extendable to fix extendable cascade issues 
-* **0.3.beta** Remodeling reset and template files (pre-release for SassConf)
+* **0.3.beta** Remodeling reset and template files (pre-release for SassConf)
+* **0.4.beta** Moved base and modules from stylesheet folder to template files

data/README.md

@@ -1,19 +1,21 @@
 # Compass Pattern Primer
-### Create Style Guides in HTML and CSS with Sass & Compass
 _This is the development repo for the compass extension and rubygem: [Compass Pattern Primer](https://rubygems.org/gems/compass-pattern-primer)._
 
-Compass Pattern Primer is a system to quickly generate style guides for your web site or web app. It is based on [Pattern Primer](https://github.com/adactio/Pattern-Primer) by Adactio/Jeremy Keith. It's a collection of starter UI patterns that can be styled for any website. The pattern primer uses a PHP document to pull in patterns (HTML snippets) that can be styled. 
+## Create Style Guides in HTML and CSS with Sass & Compass
 
-I originally faithfully ported [Pattern Primer](https://github.com/alienresident/Pattern-Primer) and Jeremy Keith's styles to Sass. Using Sass allows the styles to be quickly changing by overriding a few variables. 
+__Compass Pattern Primer__ is a system to quickly generate style guides for your web site or web app. It's a collection of starter UI patterns that can be styled for any website. The pattern primer uses a PHP document to pull in _patterns_ (HTML snippets) that can then be styled. It is based on [Pattern Primer](https://github.com/adactio/Pattern-Primer) by Adactio/Jeremy Keith.
 
-For my own development work I needed to move beyond Jeremy's work. I reworked the Pattern Primer to use Jonathan Snook's [SMACSS](http://smacss.com/) \(Scalable and Modular Architecture for CSS\) as an organizing principle. I separated the partials into base and modules. The styling from the original Pattern Primer is the default style. The intended way to override the original Adactio styling is to change the variables in `partials/variables/theme/_overrides` following the SMACSS paradigm. I have also changed the default [reset](#reset) from Eric Meyer's to Formalize and Normalize.
+#### Background
+I originally faithfully ported [Pattern Primer](https://github.com/alienresident/Pattern-Primer) and Jeremy Keith's styles to Sass. Sass allows the styles to be quickly changed by overriding a few variables. 
+
+For my own development work I needed to move beyond Jeremy's work. I created a Compass Gem so I could create a base scaffolding for each new project. I reworked the Pattern Primer to use Jonathan Snook's [SMACSS](http://smacss.com/) \(Scalable and Modular Architecture for CSS\) as an organizing principle. I separated the styled elements into base and modules. The initial default style is the styling from the original Pattern Primer. The intended way to override the original Adactio styling is to change the variables in `_config` file. I have also changed the default [reset](#reset) from Eric Meyer's to Formalize and Normalize.
 
 *This is a work in progress and any feedback is very welcome.* 
 
 ## Installation
 Compass Pattern Primer is a compass extension bundled as a Ruby gem.
    
-```bash
+```bash  
 gem install compass-pattern-primer
 ``` 
 #### Dependencies  
@@ -22,40 +24,45 @@ You'll need to install [Sass](http://sass-lang.com/), [Compass](http://compass-s
 Depending on what [scaffolding](#create-a-new-compass-project-using-compass-pattern-primer-scaffolding) or [reset](#reset) library you use. You may need to install  [compass normalize](https://github.com/ksmandersen/compass-normalize) and/or [compass formalize](https://github.com/pengwynn/compass_formalize) or the [meyer reset](https://github.com/adamstac/meyer-reset).
 
 ## How to Use it
-There are a number of ways you can get started with Compass Pattern Primer
-
-### Create a new Compass project requiring Compass Pattern Primer
- 
-```bash
-compass create <MyProject> -r compass-pattern-primer 
-```
-This creates a new Compass project using the compass standard scaffolding and adds `require 'compass-pattern-primer'` to the `config.rb`.
+There are a number of ways you can get started with Compass Pattern Primer. There are three ways (scaffolding options) your project can be set up. 
   
-### Create a new Compass project using Compass Pattern Primer scaffolding
+### Create a New Compass project
+
+Use one of Compass Pattern Primer scaffolding options: 
 
-##### SMACSS
+##### SMACSS (PHP)
 
 ```bash
 compass create <MyProject> -r compass-pattern-primer -u compass-pattern-primer 
 ```   
-This creates a SMACSS style scaffolding for your project. It includes an `index.php` and a patterns folder (HTML snippets). Within the patterns folder there are the default Adactio patterns as well as some additional patterns. All the partials are imported into `global.scss` which will be your main css file. It also creates a `pattern-primer.scss` which imports `global.scss` and adds a color guide for your `index.php`. The color guide adds a lot of CSS that has no business being in the production site but's very useful for the style guide.   
+This creates a SMACSS style scaffolding for your project. It includes an `index.php` and a patterns folder (HTML snippets). Within the patterns folder there are the default Adactio patterns as well as some additional patterns. All the `base` and `modules` files are imported into `global.scss` which will be the main CSS file. It also creates a `pattern-primer.scss` which imports `global.scss` and adds a color guide viewable in your `index.php`. The color guide adds a lot of CSS that has no business being in the production site but's very useful for the style guide.   
 
-##### Adactio's Pattern Primer
+##### SMACSS with a Static HTML File
 
 ```bash
-compass create <MyProject> -r compass-pattern-primer -u compass-pattern-primer/adactio 
+compass create <MyProject> -r compass-pattern-primer -u compass-pattern-primer/static 
 ```   
+This creates a SMACSS style scaffolding for your project. Instead of the `index.php` it includes `pattern-primer.html` a static html page where you can preview the style guide. You edit the html to add your own patterns. All the `base` and `modules` files are imported into `global.scss` which will be the main CSS file. It also creates a `pattern-primer.scss` which imports `global.scss` and adds a color guide viewable in your `index.php`. The color guide adds a lot of CSS that has no business being in the production site but is useful for the style guide.
+
+##### Adactio's Pattern Primer (PHP)
+
+```bash
+compass create <MyProject> -r compass-pattern-primer -u compass-pattern-primer/adactio 
+```      
 This adds an `index.php` and a patterns folder (HTML snippets) with only  Adactio's original patterns and CSS that's (fairly) faithful to his CSS.
 
-##### Static HTML File
+### You can also:
 
+#### Create a New Compass Project Requiring Compass Pattern Primer
+ 
 ```bash
-compass create <MyProject> -r compass-pattern-primer -u compass-pattern-primer/static 
-```   
-This creates a SMACSS style scaffolding for your project. Instead of the `index.php` it includes `pattern-primer.html` a static html page where you can preview the style guide. You edit the html to add your own patterns.
+compass create <MyProject> -r compass-pattern-primer 
+```
+This creates a new Compass project using the compass standard scaffolding and adds `require 'compass-pattern-primer'` to the `config.rb`. However you won't get the base styles or pattern primer viewing page added to your project. This approach is __NOT__ recommended unless you know what your doing.
 
-#### Add Compass Pattern Primer to an existing project by adding the following to config.rb
+#### Add Compass Pattern Primer to an Existing Project
 
+Adding the following to `config.rb`   
 ```ruby
 require 'compass-pattern-primer'
 ```   
@@ -64,20 +71,17 @@ Then import the Compass Pattern Primer partial by adding at the top of your work
 ```scss
 @import "compass-pattern-primer";
 ```   
-**Note:** *You'll need to restart* `compass watch` *if it's running*
+However you won't get the base styles or pattern primer viewing page added to your project. This approach is __NOT__ recommended unless you know what your doing.   
+**Note:** *You'll need to restart* `compass watch` *if it's running*  
 
 ## Features in Compass Pattern Primer
 
-Compass Pattern Primer comes with a reset, base styles, and modules \(controls, feedback, options, pagination\). You can either bring everything into your project by adding `@import "compass-pattern-primer";` to the top of your file. You can also add the individual pieces by adding some (or all) of the following: 
+Compass Pattern Primer comes with a reset, base styles, and modules \(controls, feedback, options, pagination\). By using one of the scaffolding options listed above the base styles and modules will be added to your project. 
 
-```scss   
-@import "compass-pattern-primer/reset";   
-@import "compass-pattern-primer/base";   
-@import "compass-pattern-primer/modules";   
-```   
+You can bring in the reset files, the mixins, functions and extendables into your project by adding `@import "compass-pattern-primer";` to the top of your file. You can also add the individual pieces by adding some (or all) of the following: 
 
 ### Reset
-The Compass Pattern Primer Reset incorporates Normalize and Formalize libraries (using their compass gems) by default.
+The Compass Pattern Primer Reset incorporates Normalize and Formalize libraries (using their compass gems) by default. If you just want to use one of these libraries.
 
 __change__
 
@@ -115,55 +119,87 @@ $legacy-support-for-ie7: false;
 
 *In the Compass Pattern Primer SMACSS scaffolding you can change what browsers you support in `partials/browsers`.
 
-If you don't want to use any resets simply don't import it. You can import just the base and modules.
-
-```scss
-@import "compass-pattern-primer/base";
-@import "compass-pattern-primer/modules";
-```
+If you don't want to use any resets simply don't import it. 
 
 ### Base
-The Compass Pattern Primer Base contains partials for your base styles.
-You can add them all:
+When you use one of the 3 scaffolding options Compass Pattern Primer Base Style will be added to your project. Folders containing the base styles will be added to your sass folder.
 
-```scss
-@import "compass-pattern-primer/base";
-```    
-Or selectively, here's the full list you can select which parts:
+__SMACSS Scaffold__  
+The styles will be in your `sass/base` folder   
+```
+sass/   
+	base/   
+		buttons/
+		forms/
+		links/
+		page/
+		search/
+		typography/ 
+ ```
 
-```scss
-@import "compass-pattern-primer/base/_page";
-@import "compass-pattern-primer/base/_typography";
-@import "compass-pattern-primer/base/_links";
-@import "compass-pattern-primer/base/_forms";
-@import "compass-pattern-primer/base/_search";
-@import "compass-pattern-primer/base/_buttons";    
+   
+__Adactio Scaffold__   
+The styles will be in your `sass` folder
+
+```bash
+	sass/
+		buttons/
+		forms/
+		links/
+		page/
+		search/
+		typography/ 
 ```
 
 ### Modules
-Similarly the modules allow can be imported whole or selectively. 
+Similarly the modules are in different folders depending on your scaffolding setup.
 
-```scss
-@import "compass-pattern-primer/modules";
+__SMACSS Scaffold__  
+The styles will be in your `sass/base` folder   
+```
+sass/   
+	base/   
+		buttons/
+		forms/
+		links/
+		page/
+		search/
+		typography/ 
+ ```
+    
+__Adactio Scaffold__   
+The styles will be in your `sass` folder
+
+```bash
+	sass/
+		buttons/
+		forms/
+		links/
+		page/
+		search/
+		typography/ 
+```
+Each base and module folder will have a `_basename.scss` and a `_basename_variables.scss` file. It may also have a `_basename_mixins.scss` and a `_basename_extendables.scss`
+
+Here's an example from the buttons folder
+```bash
+_buttons.scss
+_buttons_extendables.scss
+_buttons_variables.scss
 ```   
-Or   
 
-```scss
-@import "compass-pattern-primer/modules/_control";
-@import "compass-pattern-primer/modules/_feedback";
-@import "compass-pattern-primer/modules/_options";
-@import "compass-pattern-primer/modules/_pagination";
-```    
-Styles for the modules can be changed using **overrides** and extended to other elements using **extendables**. 
+`_basename.scss` contains CSS that will be outputted. It also imports `_basename_variables.scss`. It will also import `_basename_extendables.scss` or `_basename_mixins.scss` if they exist   
+`_basename_variables.scss` contain all the default variables needed.
+`_basename_extendables.scss` contains silent extendables styles that are only used in the context.  
 
 ### Changing the default styles
-The Compass Pattern Primer is designed to allow nearly everything about the CSS to be overridden. The Sass contains variables that can be changed easily overridden.
+The Compass Pattern Primer is designed to allow nearly everything about the CSS to be overridden. Each base and module folder contains a sass file (`_basename_variables.scss`) with default variables that can be changed easily overridden.
  
-#### Overrides 
-In the SMACSS style scaffolding you can override any of the variables in `partials/variables/theme/_overrides`. It contains some example variables that are commented out.
+#### Overriding Values using the `_config` file 
+In the SMACSS style scaffolding you can override any of the  base or module variables in `_config.scss`. It contains some example variables that are commented out.
 
 #### Extendables
-Styles for the buttons, controls, options, and pagination are silent extendables. The extendables are in `partials/extendables`. This allows you to easily add a the button styles to another element.
+Styles for the buttons, controls, options, and pagination contain silent extendables files . For example the extendables for buttons are in `buttons/buttons_extendables.scss`. This allows you to easily add a the button styles to another element.
 
 In this example I am extending an `input` with the `id="reset"` to `%button-active` style.
 
@@ -180,8 +216,8 @@ Color Schemer is feature rich and allows you to generate color schemes using col
 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).
 
 ```scss
-$primary-color:  #57068c;
-$black-value: #333;
+$primary-color: #693 !default;
+$black-value: #333 !default;
 ```
 
 ```scss
@@ -199,27 +235,32 @@ $link-color: nth($primary, 1);
 $link-visited-link-color: nth($primary, 2);
 ```  
 
-## Features to be added
-#### ~~More scaffolding options.~~ DONE
-~~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.~~
+## Features that have been added
 
-~~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.~~
+#### ~~Move styles from compass gem to scaffold~~ DONE (v. 0.4beta)
+It made sense to move the base and module styles from the compass gem to the scaffolding. This added the styles to the project were they can be easily viewed and modified. Restructuring the SMACSS folders so that files pertaining to those styles were grouped together.   
 
-~~Another option could be to create a very basic scaffolding that doesn't use the SMACSS approach. So that you can use you own.~~
+Each base and module folder will have a `_basename.scss` and a `_basename_variables.scss` file. It may also have a `_basename_mixins.scss` and a `_basename_extendables.scss`
+
+#### ~~More scaffolding options.~~ DONE (v. 0.3beta)
+There was only one option to use my SMACSS scaffolding and a static HTML preview page. This worked for some use cases but didn't allow you to easily add patterns.
 
 There are now 3 [install options](#create-a-new-compass-project-using-compass-pattern-primer-scaffolding) for Compass Pattern Primer.
 	
 
-#### ~~Use existing Compass Reset gems~~ DONE
-~~I realized after the fact that all my reset's existed as compass gems. Doesn't seem like a good idea to duplicate code.
-- [Meyer Reset](https://github.com/adamstac/meyer-reset)
-- [Compass Normalize](https://github.com/ksmandersen/compass-normalize)
-- [Compass Formalize](https://github.com/pengwynn/compass_formalize)~~  
-I had to make some changes to [Compass Formalize](https://github.com/pengwynn/compass_formalize) to add `$legacy-support-for-ie6` and `$legacy-support-for-ie7` and they were accepted and pushed on in v. 0.0.5. I am now a committer on that project!
+#### ~~Use existing Compass Reset gems~~ DONE (v. 0.3beta)
+I realized after the fact that all my reset's existed as compass gems. Doesn't seem like a good idea to duplicate code.  
 
+These were added as dependencies:    
+* [Meyer Reset](https://github.com/adamstac/meyer-reset)  
+* [Compass Normalize](https://github.com/ksmandersen/compass-normalize)  
+* [Compass Formalize](https://github.com/pengwynn/compass_formalize)    
 
-#### ~~Simplify the `bounding-box` mixin~~ DONE
-~~At the moment `bounding-box` mixin handles `margin`, `padding`, and `border` styles. I am going to change this to just `margin` and `padding` and create a new mixing to handle `border` and expanded it to support `outline` as the have similar CSS output.~~  
+I had to make some changes to [Compass Formalize](https://github.com/pengwynn/compass_formalize) to add `$legacy-support-for-ie6` and `$legacy-support-for-ie7` and they were accepted and pushed on in v. 0.0.5. I am now a committer on that project!
+
+#### ~~Simplify the `bounding-box` mixin~~ DONE  (v 0.2.2)
+In v. 0.1-0.2.1 the `bounding-box` mixin handles `margin`, `padding`, and `border` styles. I changed this to just `margin` and `padding` and create a new mixin to handle `border` and expanded it to support `outline` as the have similar CSS output
+  
 Refactored `bounding-box` mixin (v0.2.2). It's now 2 mixins: `border-outline` and `margin-padding`. They handle borders and outlines, and margins and paddings. With the refactoring I was able to remove all `$*-border-pos` variables. The position of borders is handled through `$*-border-width` which takes up to 4 arguments in the following  clockwise order TRBL \(Top Right Bottom Left \). Similarly `$*-border-style` and `$*-border-color` can take up to 4 arguments. Outline ignores all but the 1st argument and can take an offset argument. There's an error check mixin `border-outline-check` that displays warnings if you add too many arguments of try to offset the border. 
 
 

data/lib/compass-pattern-primer.rb

@@ -18,8 +18,8 @@ Compass::Frameworks.register('compass-pattern-primer', :path => extension_path)
 #    a prerelease version
 #  Date is in the form of YYYY-MM-DD
 module Compass_Pattern_Primer
-  VERSION = "0.3.beta"
-  DATE = "2013-10-13"
+  VERSION = "0.4.beta"
+  DATE = "2013-10-21"
 end
 
 # This is where any custom SassScript should be placed. The functions will be  

data/stylesheets/compass-pattern-primer.scss

@@ -2,10 +2,4 @@
 
 @import "compass-pattern-primer/partials/_mixins";
 @import "compass-pattern-primer/partials/_functions";
-@import "compass-pattern-primer/partials/variables/_variables";
-@import "compass-pattern-primer/partials/_extendables";
-@import "compass-pattern-primer/partials/_colors";
-
-@import "compass-pattern-primer/base";
-@import "compass-pattern-primer/modules";
-
+@import "compass-pattern-primer/partials/_extendables";

data/stylesheets/compass-pattern-primer/_partials.scss

@@ -1,5 +1,3 @@
 @import "compass-pattern-primer/partials/_mixins";
 @import "compass-pattern-primer/partials/_functions";
-@import "compass-pattern-primer/partials/_variables";
-@import "compass-pattern-primer/partials/_extendables";
-@import "compass-pattern-primer/partials/_colors";
+@import "compass-pattern-primer/partials/_extendables";

data/stylesheets/compass-pattern-primer/partials/_extendables.scss

@@ -1,3 +1,4 @@
+// reworking of compass @incliude force-wrap
 %force-wrap {
   //@include force-wrap; // this is the output 
   white-space: pre;
@@ -9,191 +10,3 @@
   white-space: -hp-pre-wrap;
   word-wrap: break-word; 
 }
-%formstyle {
-  background-color: $forms-background-color;
-  width: $forms-input-width;
-  font-family: inherit;
-  font-size: inherit;
-  @include margin-padding(padding, $forms-padding);
-  @include border-outline(border, $forms-border-width, $forms-border-style, $forms-border-color);
-  @include border-radius($forms-border-radius);
-  &:focus {
-    border-color: $forms-focus-border-color;
-  }
-}
-%btn-all {
-  width: auto;
-  text-align: center;
-  font-family: $button-font-family;
-  font-size: inherit;
-  font-weight: normal;
-  font-style: normal;
-  @include border-outline(border, $button-border-width, $button-border-style, $button-border-color);
-  cursor: pointer;
-  @include margin-padding(padding, $button-padding);
-  line-height: 1;
-  @include border-radius($button-border-radius);
-}
-
-%button {
-  @extend %btn-all;
-  @include simple-background-gradient($button-color, $button-gradient-pos, $button-gradient-stop-1, $button-gradient-stop-2);
-  @include text-shadow($button-text-shadow);
-  &:hover,
-  &:focus {
-    @include text-shadow($button-hover-text-shadow);
-    @include simple-background-gradient($button-hover-color, $button-hover-gradient-pos, $button-hover-gradient-stop-1, $button-hover-gradient-stop-2);
-  }  
-  &:active {
-    @include text-shadow($button-active-text-shadow);
-    @include simple-background-gradient($button-active-color, $button-active-gradient-pos, $button-active-gradient-stop-1, $button-active-gradient-stop-2);
-  }
-}
-
-%button-active {
-  @extend %btn-all;
-  @include text-shadow($button-action-text-shadow);
-  @include simple-background-gradient($button-action-color, $button-action-gradient-pos, $button-action-gradient-stop-1, $button-action-gradient-stop-2);
-  &:hover,
-  &:focus {
-    @include text-shadow($button-action-hover-text-shadow);
-    @include simple-background-gradient($button-action-hover-color, $button-action-hover-gradient-pos, $button-action-hover-gradient-stop-1, $button-action-hover-gradient-stop-2);
-  }
-  &:active {
-    @include text-shadow($button-action-active-text-shadow);
-    @include simple-background-gradient($button-action-active-color, $button-action-active-gradient-pos, $button-action-active-gradient-stop-1, $button-action-active-gradient-stop-2);
-  }
-}
-
-%button-cancel {
-  @extend %btn-all;
-  @include text-shadow($button-cancel-text-shadow);
-  @include simple-background-gradient($button-cancel-color, $button-cancel-gradient-pos, $button-cancel-gradient-stop-1, $button-cancel-gradient-stop-2);
-  &:hover,
-  &:focus {
-    @include text-shadow($button-cancel-hover-text-shadow);
-    @include simple-background-gradient($button-cancel-hover-color, $button-cancel-hover-gradient-pos, $button-cancel-hover-gradient-stop-1, $button-cancel-hover-gradient-stop-2);
-  }
-  &:active {
-    @include text-shadow($button-cancel-active-text-shadow);
-    @include simple-background-gradient($button-cancel-active-color, $button-cancel-active-gradient-pos, $button-cancel-active-gradient-stop-1, $button-cancel-active-gradient-stop-2);
-  }
-}
-
-%button-disabled {
-  @extend %btn-all;
-  @include text-shadow($button-disabled-text-shadow);
-  opacity: $button-disabled-opacity;
-  @include simple-background-gradient($button-disabled-color, $button-disabled-gradient-pos, $button-disabled-gradient-stop-1, $button-disabled-gradient-stop-2);
-  &:hover,
-  &:focus,
-  &:active {
-    @extend %button-disabled;
-  } 
-}
-
-%controls {
-  font-family: $controls-font-family;
-  display: inline-block;
-  font-size: $controls-font-size;
-  @include margin-padding(padding, $controls-padding);
-  line-height: 1;
-  @include border-outline(border, $controls-border-width, $controls-border-style, $controls-border-color);
-  @include border-radius($controls-border-radius);
-  background-clip: padding-box;
-  &:link,
-  &:visited {
-    @include simple-background-gradient($controls-visited-color, $controls-visited-gradient-pos, $controls-visited-gradient-stop-1, $controls-visited-gradient-stop-2);
-  }
-  &:hover,
-  &:focus {
-    outline: none;
-    @include simple-background-gradient($controls-hover-color, $controls-hover-gradient-pos, $controls-hover-gradient-stop-1, $controls-hover-gradient-stop-2);
-  }
-  &:active {
-    @include simple-background-gradient($controls-active-color, $controls-active-gradient-pos, $controls-active-gradient-stop-1, $controls-active-gradient-stop-2);
-  }
-}
-
-%feedback {
-  @include margin-padding(padding, $feedback-padding);
-  @include margin-padding(margin, $feedback-margin);
-  color: $feedback-color;
-  background-color: $feedback-background;
-  @include border-outline(border, $feedback-border-width, $feedback-border-style, $feedback-border-color);
-  @include border-radius($feedback-border-radius);
-  background-clip: padding-box;
-  a {
-    color: $feedback-color;
-    @include bold-italic-uppercase-variant($feedback-a-font-bold, $feedback-a-font-italic, $feedback-a-font-uppercase, $feedback-a-font-variant);
-  }
-}
-
-%error {
-  background-color: $feedback-error-background;
-  color: $feedback-error-color;
-  border-color: $feedback-error-border-color;
-  a {
-    color: $feedback-error-color;
-  }
-}
-
-%warning {
-  background-color: $feedback-warning-background;
-  color: $feedback-warning-color;
-  border-color: $feedback-warning-border-color;
-  a {
-    color: $feedback-warning-color;
-  }
-}
-
-%options {
-  list-style: $options-list-style;
-  @include border-outline(border, $options-border-width, $options-border-style, $options-border-color);
-  li {
-    text-indent: $options-li-text-indent;
-    font-family: $options-li-font-family;
-    text-transform: $options-li-text-transform;
-    letter-spacing: $options-li-letter-spacing;
-    font-weight: $options-li-font-weight;
-    @include margin-padding(margin, $options-li-margin);
-    @include margin-padding(padding, $options-li-padding);
-    @include border-outline(border, $options-li-border-width, $options-li-border-style, $options-li-border-color);
-  }
-  a {
-    display: block;
-    @include border-outline(border, $options-a-border-width, $options-a-border-style, $options-a-border-color);
-  }
-}
-
-%pagination {
-  font-family: $pagination-font-family;
-  li {
-    display: $pagination-li-display;
-    @include margin-padding(margin, $pagination-li-margin, $pagination-li-margin-pos);
-    text-indent: $pagination-text-indent;
-  }
-  a {
-    display: $pagination-a-display;
-    @include margin-padding(padding, $pagination-a-padding);
-    line-height: $pagination-a-line-height;
-    @include margin-padding(margin, $pagination-a-margin);
-    @include border-outline(border, $pagination-a-border-width, $pagination-a-border-style, $pagination-a-border-color);
-    @include border-radius($pagination-a-border-radius);
-    background-clip: padding-box;
-    &:link,
-    &:visited {
-      color: $pagination-link-color;
-      background-color: $pagination-link-background-color;
-    }
-    &[href]:hover,
-    &[href]:focus {
-      color: $pagination-link-hover-color;
-      background-color: $pagination-link-hover-background-color;
-    }
-    &:active {
-      color: $pagination-link-active-color;
-      background-color: $pagination-link-active-background-color;
-    }
-  }
-}