Skip to content

Commit 25e3ed1

Browse files
author
Jeff Escalante
committed
Merge pull request #190 from jenius/rem-and-quantity
Rem calculator and quantity queries
2 parents a196b2f + ec97244 commit 25e3ed1

File tree

7 files changed

+132
-1
lines changed

7 files changed

+132
-1
lines changed

‎axis/utilities.styl

Lines changed: 47 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ border-box-html()
212212
html
213213
box-sizing: border-box
214214

215-
*,
215+
*,
216216
*:before,
217217
*:after
218218
box-sizing: inherit
@@ -426,3 +426,49 @@ cache-images()
426426
body:after
427427
display: none
428428
content: background-images
429+
430+
// Mixin: Rem Calculator
431+
//
432+
// Calculates and returns the rem value based on px input. Default base font
433+
// size is 16px, but can be changed with base-font-size.
434+
//
435+
// ex : rem(30px) or rem(30)
436+
// returns : 1.875rem
437+
438+
rem(value)
439+
base-font-size ?= 16px
440+
type = unit(value)
441+
if type == px
442+
return unit(value / base-font-size, 'rem')
443+
else
444+
return unit(value, type)
445+
446+
// Block Mixin: Quantity Queries
447+
//
448+
// Set rules for a selector based on a specific sibling count.
449+
// via: https://github.com/pascalduez/postcss-quantity-queries
450+
//
451+
// ex. +quantity-at-least(6)
452+
// ex. +quantity-at-most(12, div)
453+
// ex. +quantity-between(0, 8, span)
454+
// ex. +quantity-exactly(5)
455+
456+
quantity-at-least(count=4, selector=li)
457+
& > {selector}:nth-last-child(n+{count})
458+
& > {selector}:nth-last-child(n+{count}) ~ {selector}
459+
{block}
460+
461+
quantity-at-most(count=4, selector=li)
462+
& > {selector}:nth-last-child(-n+{count}):first-child
463+
& > {selector}:nth-last-child(-n+{count}):first-child ~ {selector}
464+
{block}
465+
466+
quantity-between(start=0, end=10, selector=li)
467+
& > {selector}:nth-last-child(n+{start}):nth-last-child(-n+{end}):first-child
468+
& > {selector}:nth-last-child(n+{start}):nth-last-child(-n+{end}):first-child ~ {selector}
469+
{block}
470+
471+
quantity-exactly(count=4, selector=li)
472+
& > {selector}:nth-last-child({count}):first-child
473+
& > {selector}:nth-last-child({count}):first-child ~ {selector}
474+
{block}

‎test/fixtures/utilities/quantity-queries.css

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
.least > li:nth-last-child(n+2),
2+
.least > li:nth-last-child(n+2) ~ li {
3+
border: 1px solid #09f;
4+
}
5+
.between > div:nth-last-child(n+0):nth-last-child(-n+20):first-child,
6+
.between > div:nth-last-child(n+0):nth-last-child(-n+20):first-child ~ div {
7+
border: 1px solid #f90;
8+
}
9+
.most > li:nth-last-child(-n+7):first-child,
10+
.most > li:nth-last-child(-n+7):first-child ~ li {
11+
background: #e35;
12+
color: #fff;
13+
}
14+
.exactly > li:nth-last-child(5):first-child,
15+
.exactly > li:nth-last-child(5):first-child ~ li {
16+
border: 1px solid #0c5;
17+
}

‎test/fixtures/utilities/quantity-queries.styl

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.least
2+
+quantity-at-least(2)
3+
border: 1px solid #0099ff
4+
5+
.between
6+
+quantity-between(0, 20, div)
7+
border: 1px solid #ff9900
8+
9+
.most
10+
+quantity-at-most(7)
11+
background: #ee3355
12+
color: white
13+
14+
.exactly
15+
+quantity-exactly(5)
16+
border: 1px solid #00cc55

‎test/fixtures/utilities/rem-calculator.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.rem-calculator{
2+
font-size: 1.875rem;
3+
}

‎test/fixtures/utilities/rem-calculator.styl

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
.rem-calculator
2+
font-size: rem(30px)

‎test/test.coffee

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -255,6 +255,9 @@ describe 'utilities', ->
255255
it 'media', (done) ->
256256
compile_and_match(path.join(@path, 'media.styl'), done)
257257

258+
it 'quantity-queries', (done) ->
259+
compile_and_match(path.join(@path, 'quantity-queries.styl'), done)
260+
258261
it 'ratio-box', (done) ->
259262
compile_and_match(path.join(@path, 'ratio-box.styl'), done)
260263

@@ -264,6 +267,9 @@ describe 'utilities', ->
264267
it 'raquo', (done) ->
265268
compile_and_match(path.join(@path, 'raquo.styl'), done)
266269

270+
it 'rem-calculator', (done) ->
271+
compile_and_match(path.join(@path, 'rem-calculator.styl'), done)
272+
267273
it 'rounded', (done) ->
268274
compile_and_match(path.join(@path, 'rounded.styl'), done)
269275

‎test/visual.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,9 +75,11 @@
7575
<link rel='stylesheet' href='fixtures/utilities/image-replace.css' >
7676
<link rel='stylesheet' href='fixtures/utilities/inline-block.css' >
7777
<link rel='stylesheet' href='fixtures/utilities/media.css' >
78+
<link rel='stylesheet' href='fixtures/utilities/quantity-queries.css' >
7879
<link rel='stylesheet' href='fixtures/utilities/ratio-box.css' >
7980
<link rel='stylesheet' href='fixtures/utilities/no-select.css' >
8081
<link rel='stylesheet' href='fixtures/utilities/raquo.css' >
82+
<link rel='stylesheet' href='fixtures/utilities/rem-calculator.css' >
8183
<link rel='stylesheet' href='fixtures/utilities/rounded.css' >
8284
<link rel='stylesheet' href='fixtures/utilities/sprite.css' >
8385
<link rel='stylesheet' href='fixtures/utilities/triangle.css' >
@@ -392,6 +394,41 @@ <h1>utilities</h1>
392394
<p>comment</p>
393395
</div>
394396

397+
<div class="quantity-queries">
398+
h4>Add blue border of there are at least 2 lis:</h4>
399+
<ul class="least">
400+
<li>i'm one</li>
401+
<li>two</li>
402+
<li>tres</li>
403+
<li>four</li>
404+
<li>five </li>
405+
</ul>
406+
<h4>Add orange border if between 0 and 20 elments:</h4>
407+
<article class="between">
408+
<div>i'm one</div>
409+
<div>two</div>
410+
<div>tres</div>
411+
<div>four</div>
412+
<div>five </div>
413+
</article>
414+
<h4>Pink background if there are at most 9</h4>
415+
<ul class="most">
416+
<li>i'm one</li>
417+
<li>two</li>
418+
<li>tres</li>
419+
<li>four</li>
420+
<li>five </li>
421+
</ul>
422+
<h4>Green border if exactly 5:</h4>
423+
<ul class="exactly">
424+
<li>i'm one</li>
425+
<li>two</li>
426+
<li>tres</li>
427+
<li>four</li>
428+
<li>five </li>
429+
</ul>
430+
</div>
431+
395432
<div class="ratio-box">
396433
<iframe width="1280" height="720" src="https://www.youtube.com/embed/o0xr1JRZOb4" frameborder="0" allowfullscreen></iframe>
397434
</div>
@@ -400,6 +437,10 @@ <h1>utilities</h1>
400437

401438
<p class="raquo">look at this</p>
402439

440+
441+
<h5 class="rem-calculator">Font-size is set as 30px but the browser see it as 1.875rem</h5>
442+
443+
403444
<div class="button rounded">look im rounded</div>
404445

405446
<div class="tri"></div>

0 commit comments

Comments
 (0)