Merge pull request #190 from jenius/rem-and-quantity

Rem calculator and quantity queries

Author: Jeff Escalante

axis/utilities.styl

@@ -212,7 +212,7 @@ border-box-html()
   html
     box-sizing: border-box
 
-  *, 
+  *,
   *:before,
   *:after
     box-sizing: inherit
@@ -426,3 +426,49 @@ cache-images()
   body:after
     display: none
     content: background-images
+
+// Mixin: Rem Calculator
+//
+// Calculates and returns the rem value based on px input. Default base font
+// size is 16px, but can be changed with base-font-size.
+//
+// ex       : rem(30px) or rem(30)
+// returns  : 1.875rem
+
+rem(value)
+  base-font-size ?= 16px
+  type = unit(value)
+  if type == px
+    return unit(value / base-font-size, 'rem')
+  else
+    return unit(value, type)
+
+// Block Mixin: Quantity Queries
+//
+// Set rules for a selector based on a specific sibling count.
+// via: https://github.com/pascalduez/postcss-quantity-queries
+//
+// ex. +quantity-at-least(6)
+// ex. +quantity-at-most(12, div)
+// ex. +quantity-between(0, 8, span)
+// ex. +quantity-exactly(5)
+
+quantity-at-least(count=4, selector=li)
+  & > {selector}:nth-last-child(n+{count})
+  & > {selector}:nth-last-child(n+{count}) ~ {selector}
+    {block}
+
+quantity-at-most(count=4, selector=li)
+  & > {selector}:nth-last-child(-n+{count}):first-child
+  & > {selector}:nth-last-child(-n+{count}):first-child ~ {selector}
+    {block}
+
+quantity-between(start=0, end=10, selector=li)
+  & > {selector}:nth-last-child(n+{start}):nth-last-child(-n+{end}):first-child
+  & > {selector}:nth-last-child(n+{start}):nth-last-child(-n+{end}):first-child ~ {selector}
+    {block}
+
+quantity-exactly(count=4, selector=li)
+  & > {selector}:nth-last-child({count}):first-child
+  & > {selector}:nth-last-child({count}):first-child ~ {selector}
+    {block}

test/fixtures/utilities/quantity-queries.css

@@ -0,0 +1,17 @@
+.least > li:nth-last-child(n+2),
+.least > li:nth-last-child(n+2) ~ li {
+  border: 1px solid #09f;
+}
+.between > div:nth-last-child(n+0):nth-last-child(-n+20):first-child,
+.between > div:nth-last-child(n+0):nth-last-child(-n+20):first-child ~ div {
+  border: 1px solid #f90;
+}
+.most > li:nth-last-child(-n+7):first-child,
+.most > li:nth-last-child(-n+7):first-child ~ li {
+  background: #e35;
+  color: #fff;
+}
+.exactly > li:nth-last-child(5):first-child,
+.exactly > li:nth-last-child(5):first-child ~ li {
+  border: 1px solid #0c5;
+}

test/fixtures/utilities/quantity-queries.styl

@@ -0,0 +1,16 @@
+.least
+  +quantity-at-least(2)
+    border: 1px solid #0099ff
+
+.between
+  +quantity-between(0, 20, div)
+    border: 1px solid #ff9900
+
+.most
+  +quantity-at-most(7)
+    background: #ee3355
+    color: white
+
+.exactly
+  +quantity-exactly(5)
+    border: 1px solid #00cc55

test/fixtures/utilities/rem-calculator.css

@@ -0,0 +1,3 @@
+.rem-calculator{
+  font-size: 1.875rem;
+}

test/fixtures/utilities/rem-calculator.styl

@@ -0,0 +1,2 @@
+.rem-calculator
+  font-size: rem(30px)

test/test.coffee

@@ -255,6 +255,9 @@ describe 'utilities', ->
   it 'media', (done) ->
     compile_and_match(path.join(@path, 'media.styl'), done)
 
+  it 'quantity-queries', (done) ->
+    compile_and_match(path.join(@path, 'quantity-queries.styl'), done)
+
   it 'ratio-box', (done) ->
     compile_and_match(path.join(@path, 'ratio-box.styl'), done)
 
@@ -264,6 +267,9 @@ describe 'utilities', ->
   it 'raquo', (done) ->
     compile_and_match(path.join(@path, 'raquo.styl'), done)
 
+  it 'rem-calculator', (done) ->
+    compile_and_match(path.join(@path, 'rem-calculator.styl'), done)
+
   it 'rounded', (done) ->
     compile_and_match(path.join(@path, 'rounded.styl'), done)
 

test/visual.html

@@ -75,9 +75,11 @@
     <link rel='stylesheet' href='fixtures/utilities/image-replace.css' >
     <link rel='stylesheet' href='fixtures/utilities/inline-block.css' >
     <link rel='stylesheet' href='fixtures/utilities/media.css' >
+    <link rel='stylesheet' href='fixtures/utilities/quantity-queries.css' >    
     <link rel='stylesheet' href='fixtures/utilities/ratio-box.css' >
     <link rel='stylesheet' href='fixtures/utilities/no-select.css' >
     <link rel='stylesheet' href='fixtures/utilities/raquo.css' >
+    <link rel='stylesheet' href='fixtures/utilities/rem-calculator.css' >
     <link rel='stylesheet' href='fixtures/utilities/rounded.css' >
     <link rel='stylesheet' href='fixtures/utilities/sprite.css' >
     <link rel='stylesheet' href='fixtures/utilities/triangle.css' >
@@ -392,6 +394,41 @@ <h1>utilities</h1>
         <p>comment</p>
       </div>
 
+      <div class="quantity-queries">
+        h4>Add blue border of there are at least 2 lis:</h4>
+        <ul class="least">
+          <li>i'm one</li>
+          <li>two</li>
+          <li>tres</li>
+          <li>four</li>
+          <li>five  </li>
+        </ul>
+        <h4>Add orange border if between 0 and 20 elments:</h4>
+        <article class="between">
+          <div>i'm one</div>
+          <div>two</div>
+          <div>tres</div>
+          <div>four</div>
+          <div>five  </div>
+        </article>
+        <h4>Pink background if there are at most 9</h4>
+        <ul class="most">
+          <li>i'm one</li>
+          <li>two</li>
+          <li>tres</li>
+          <li>four</li>
+          <li>five    </li>
+        </ul>
+        <h4>Green border if exactly 5:</h4>
+        <ul class="exactly">
+          <li>i'm one</li>
+          <li>two</li>
+          <li>tres</li>
+          <li>four</li>
+          <li>five  </li>
+        </ul>
+      </div>
+
       <div class="ratio-box">
         <iframe width="1280" height="720" src="https://www.youtube.com/embed/o0xr1JRZOb4" frameborder="0" allowfullscreen></iframe>
       </div>
@@ -400,6 +437,10 @@ <h1>utilities</h1>
 
       <p class="raquo">look at this</p>
 
+
+      <h5 class="rem-calculator">Font-size is set as 30px but the browser see it as 1.875rem</h5>
+
+
       <div class="button rounded">look im rounded</div>
 
       <div class="tri"></div>