]> git.ipfire.org Git - thirdparty/foundation/foundation-sites.git/commitdiff
adds comments for each relational mixin
authorRafiBomb <rafi@zurb.com>
Wed, 31 May 2017 15:01:28 +0000 (08:01 -0700)
committerRafiBomb <rafi@zurb.com>
Wed, 31 May 2017 15:01:28 +0000 (08:01 -0700)
docs/pages/prototyping-utils.md

index 45cd2c9b31b4ca6e5e378f0afb7e3890e7761339..cfc4c3f1b86c98eb3f70e39da5e6b9260f9e40aa 100644 (file)
@@ -738,55 +738,60 @@ This mixin helps you to easily create a square, rectangle or a circle. Sass Refe
 .foo {
        @include box(1rem, 2rem); // Rectangle
 }
+
 .bar {
        @include box(1rem); // Square
 }
+
 .baz {
        @include box(1rem, $circle: true); // Circle
 }
 ```
 
 ### Rotate Mixin
-These Rotate mixins lets you rotate an element to a certain degree.
+These Rotate mixins lets you rotate an element to a certain degree. Clockwise is the default direction but adding a `-` in front of the degrees will make it counter-clockwise.
 
 ```scss
 .foo {
        @include rotate(30); // 30 Degree
 }
+
 .bar {
        @include rotateX(60); // 60 Degree
 }
+
 .baz {
        @include rotateY(90); // 90 Degree
 }
+
 .shaz {
        @include rotateZ(120); // 120 Degree
 }
 ```
 
-### Relational Mixins
+### Relational Mixins (AKA: nth:child mixins)
 
 These relational mixins helps you to manage styling of :nth-child’ified elements through easy Sass mixins.
 
 ```scss
-@include first($num) {}
-@include first-child {}
-@include last($num) {}
-@include last-child {}
-@include every($num) {}
-@include first-last {}
-@include after-first($num) {}
-@include from-last($num) {}
-@include from-first-last($num) {}
-@include all-but($num) {}
-@include all-but-first-last($num) {}
-@include unique {}
-@include not-unique {}
+@include first($num) {} // applies style to first n children
+@include first-child {} // applies style to first child only
+@include last($num) {}  // applies style to last n children
+@include last-child {}  // applies style to first child only
+@include every($num) {} // applies style to every n children
+@include first-last {}  // applies style to first and last child only
+@include after-first($num) {} // applies style to all after nth child
+@include from-last($num) {} // applies style to all after and including nth child
+@include from-first-last($num) {} // applies style to nth child from first child and last child
+@include all-but($num) {} // applies style to all except nth child
+@include all-but-first-last($num) {} // applies style all except first and last child
+@include unique {} // applies style to a child who has no siblings
+@include not-unique {} // applies style to all children except a child who has no siblings
 @include between($first, $last) {}
-@include even {}
-@include even-between($first, $last) {}
-@include odd {}
-@include odd-between($first, $last) {}
-@include number-between($num, $first, $last) {}
+@include even {} // applies style to all even children
+@include even-between($first, $last) {} // applies style to all even children except first and last
+@include odd {} // applies style to all odd children
+@include odd-between($first, $last) {} // applies style to all odd children except first and last
+@include number-between($num, $first, $last) {} // applies style to every n children from first child and last child
 ```