diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..c2cdfb8 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,21 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + + +[*] + +# Change these settings to your own preference +indent_style = space +indent_size = 2 + +# We recommend you to keep these unchanged +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/CHANGELOG.md b/CHANGELOG.md index ec46445..120dd61 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # Toolkit +## v 2.7.0 + +* **New** Added the `set-multiple` mixin to allow multiple properties to be set to the same value (thanks [@Robovirtuoso](https://github.com/Robovirtuoso) + ## v2.0.0.alpha.7 ### January 29, 2014 diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 176dd5e..a132165 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -2,12 +2,13 @@ We love contributors! Yes we do! If you would like to contribute to Toolkit, please follow the following guidelines: +* Please ensure you have [EditorConfig](http://editorconfig.org/) installed in your editor of choice to ensure our condig standards are being followed. * Where possible, we would prefer to stay away from Ruby functionality. If something can be done entirely within Sass, it should be. * With limited exception, such as where Toolkit expands upon the functionality in a way that is not contribute-able back upstream, additions should non mimic functionality provided by Compass, other [@import](https://github.com/at-import) extensions, or any included Compass extension. Currently included Compass extensions are [Breakpoint](https://github.com/at-import/breakpoint), [Singularity](https://github.com/at-import/Singularity), [Color Schemer](https://github.com/at-import/color-schemer), and [Sassy Strings](https://github.com/Snugug/Sassy-Strings). * Toolkit is primarily a place for functionality, not components or UI elements. -* All functions and mixins that have defaulted arguments *must* provide globally configurable namespaced default variables for their defaults instead of only having them inside the mixin definition. This provides users with a great deal more flexibility and makes the tools in Toolkit more useful. -* When writing mixins that have no required input arguments, such as the [Clearfix](https://github.com/at-import/toolkit/blob/master/compass/stylesheets/toolkit/_clearfix.scss) mixin, also include sensible namespaced silent selectors to extend from, where applicable. When doing so, be sure to include an option in the mixin for using the extended version instead of writing the output of the mixin. This argument should be called `$extend` and, where appropriate, be defaulted to `true`. -* When writing mixins that have static properties that do not change based on user input, have those styles be included via an `@extend` with a silent selector. Be sure to provide separate mixins for the pieces that do change, so a user can easily override only the pieces that change. A good example can be found in use with [Intrinsic Ratios](https://github.com/at-import/toolkit/blob/master/compass/stylesheets/toolkit/_intrinsic-ratio.scss). The option to extend should be up to the user, and should use the `$extend` argument, where appropriate, defaulted to `true`. -* In any mixin that you have written includes an extend, be sure to provide a non-extend fallback within the same mixin. -* All new features require documentation the README file in order for them to be considered for inclusion. Documentation should follow the existing documentation standard as used in the README file. +* All functions and mixins that have defaulted arguments *must* provide globally configurable [settings](https://github.com/at-import/toolkit/blob/2.x.x/stylesheets/toolkit/_settings.scss) for their defaults instead of only having them inside the mixin definition. This provides users with a great deal more flexibility and makes the tools in Toolkit more useful. +* When writing mixins that have no required input arguments, such as the [Clearfix](https://github.com/at-import/toolkit/blob/2.x.x/stylesheets/toolkit/_clearfix.scss) mixin, also include sensible namespaced silent selectors to extend from, where applicable. When doing so, be sure to include an option in the mixin for using the extended version instead of writing the output of the mixin. This argument should be called `$extend` and, where appropriate, be defaulted to `true`. +* All mixins, where appropriate, should follow the [DRY mixin pattern](http://alistapart.com/article/dry-ing-out-your-sass-mixins). And example of this in practice is the [Intrinsic Ratio](https://github.com/at-import/toolkit/blob/2.x.x/stylesheets/toolkit/_intrinsic-ratio.scss) mixin. +* All new features require documentation in the README file in order for them to be considered for inclusion. Documentation should follow the existing documentation standard as used in the README file. +* All new features require passing tests to be written. Features that break existing test or fail or provide their own tests will not be considered. * Each individual feature you would like to add, or bug you would like to squash, should be an individual pull request. Each pull request should be from an individual feature branch to either the latest stable or development branch. **The current *stable* branch is 1.x.x. The current *development* branch is 2.x.x**. Contributions that are not in the form of a pull request will not be considered. If your pull request does not apply cleanly we will ask you to fix that before we will look into pulling it in. We may ask you to update or make changes to the code you've submitted, please don't take this the wrong way. If a pull request smells (such as if a large amount of code is all within a single commit, or the coding standards aren't in line with core Toolkit) we may ask you to rewrite your commit. diff --git a/LICENSE.txt b/LICENSE.txt index 4f9c7ef..3b54ec7 100644 --- a/LICENSE.txt +++ b/LICENSE.txt @@ -1,9 +1,3 @@ -Toolkit is dual licensed under the MIT and GPL licenses: - -GPL license: http://www.gnu.org/licenses/gpl.html - -MIT license: http://www.opensource.org/licenses/mit-license.php - Toolkit License: Copyright (C) 2011-2014 by Sam Richard diff --git a/README.md b/README.md index 342baf7..90bce9a 100644 --- a/README.md +++ b/README.md @@ -39,6 +39,7 @@ Think of Toolkit as your swiss army knife for Progressive Enhancement and Respon 1. [Viewport](#viewport) 1. [Underline](#underline) 1. [Target](#target) +1. [Set Multiple](#set-multiple) ## Basics @@ -191,7 +192,7 @@ Color scales allow you to step from one color to another in even steps. Color sc ## DRY Mixins -The pattern that inspired the [A List Apart](http://alistapart.com/) article [DRY-ing Out Your Sass Mixins](http://alistapart.com/article/dry-ing-out-your-sass-mixins), now availbale for you to use in your projects! The full writeup on the why can be found in the article, and examples can be found all throughout Toolkit. +The pattern that inspired the [A List Apart](http://alistapart.com/) article [DRY-ing Out Your Sass Mixins](http://alistapart.com/article/dry-ing-out-your-sass-mixins), now available for you to use in your projects! The full writeup on the why can be found in the article, and examples can be found all throughout Toolkit. #### @include dynamic-extend($id) { @content } @@ -309,7 +310,7 @@ This is easy with fixed widths because then we can just make the child the width The concept of the parallax effect is simple, things closer to the viewer move faster while things further away move slower. Leveraging 3D transforms, this effect can be implemented without any JavaScript. You need to initialize your parallax container before being able to parallax an item. By default iOS parallax is on but setting it to false will turn on smooth scrolling within that element and no parallax effect will be shown. -The parallax mixin puts elements into real perspective and scales them back down to 100% so images and text will not have any distortion. Items will shift both vertically and horizontally in layouts to achieve the appropriate perspective. With `init`, if `$element: this`, the current element will be initialized; if `$element: '.class'|'#id'`, the respective element will be placed at the root of the stylesheet (not nested under the current selector). `ini` can be called from the root of your stylesheet. +The parallax mixin puts elements into real perspective and scales them back down to 100% so images and text will not have any distortion. Items will shift both vertically and horizontally in layouts to achieve the appropriate perspective. With `@include init()`, if `$element: this`, the current element will be initialized; if `$element: '.class'|'#id'`, the respective element will be placed at the root of the stylesheet (not nested under the current selector). `@include init()` can be called from the root of your stylesheet. #### @include parallax-init([$perspective, $element, $parallax-ios]) @@ -522,8 +523,43 @@ Creates specially formatted comments for use with [gulp-css-target](https://gith #### @include target($target) { @content } -## License +## Set Multiple + +Applies the same property to multiple values. + +#### @include set-multiple($value, $property-list); -(c) Sam Richard, Scott Kellum 2012-2014 +```scss + .box { + @include set-multiple(50%, width height); + } +``` + +```css + .box { + width: 50%; + height: 50%; + } +``` + +## License -Toolkit is dual licensed under the [MIT](http://www.opensource.org/licenses/mit-license.php) and [GPL](http://www.gnu.org/licenses/gpl.html) Licenses. +Copyright (C) 2011-2014 by Sam Richard + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/stylesheets/toolkit/_colors.scss b/stylesheets/toolkit/_colors.scss index f30e55e..45d1586 100644 --- a/stylesheets/toolkit/_colors.scss +++ b/stylesheets/toolkit/_colors.scss @@ -110,7 +110,7 @@ // Color Scales ////////////////////////////// @function color-scale($main, $secondary, $steps: null) { - $steps: if($steps != null, $steps, toolkit-get('color scale steps'));; + $steps: if($steps != null, $steps, toolkit-get('color scale steps')); $list: $main; @@ -172,4 +172,5 @@ } @return $list; -} \ No newline at end of file +} + diff --git a/stylesheets/toolkit/_set-multiple.scss b/stylesheets/toolkit/_set-multiple.scss new file mode 100644 index 0000000..89e9e1e --- /dev/null +++ b/stylesheets/toolkit/_set-multiple.scss @@ -0,0 +1,20 @@ +@mixin set-multiple($value, $properties...) { + $property-length: length($properties); + $error-msg: "The `set-multiple` mixin requires you to pass in a list of properties as the second argument"; + + @if $property-length < 1 { + @if feature-exists(at-error) { + @error $error-msg; + } + @else { + @warn $error-msg; + } + } + + // If the first argument passed in is a white-spaced separated list. + $properties: if($property-length == 1, nth($properties, 1), $properties); + + @each $property in $properties { + #{$property}: $value + } +} diff --git a/tests/controls/17-set-multiple.css b/tests/controls/17-set-multiple.css new file mode 100644 index 0000000..b4ff6d5 --- /dev/null +++ b/tests/controls/17-set-multiple.css @@ -0,0 +1,14 @@ +/** + * Set Multiple +**/ +.property { + _test: "@include set-multiple(30px, margin-left margin-right);"; + margin-left: 30px; + margin-right: 30px; +} + +.property { + _test: "@include set-multiple(50%, width, height);"; + width: 50%; + height: 50%; +} diff --git a/tests/tests/17-set-multiple.scss b/tests/tests/17-set-multiple.scss new file mode 100644 index 0000000..e4dab60 --- /dev/null +++ b/tests/tests/17-set-multiple.scss @@ -0,0 +1,16 @@ +@import "toolkit"; + +/** + * Set Multiple +**/ + +.property { + _test: "@include set-multiple(30px, margin-left margin-right);"; + @include set-multiple(30px, margin-left margin-right); +} + +.property { + _test: "@include set-multiple(50%, width, height);"; + @include set-multiple(50%, width, height); +} +