Commit 3ce26432 authored by Oskar Kalbag's avatar Oskar Kalbag
Browse files

Renamed to responsive pixels. Switched translated units to px from rem....

Renamed to responsive pixels. Switched translated units to px from rem. Started implementing test suite. Refactored mixins to use abstract base functions.
parent 60ece050
/* Margin */
/* Padding */
/* Border */
/* Relative and absolute positioning */
body {
border: 1px solid #000;
border: 0.0625rem solid #000;
div {
background-color: #eee;
width: 'width' 50%;
#test-margin-inherit {
margin: inherit;
#test-margin-horizontal-centering {
margin: 0 auto;
#test-margin-one-argument {
margin: 10px;
margin: 0.625rem;
#test-margin-two-arguments {
margin: 10px 20px;
margin: 0.625rem 1.25rem;
#test-margin-three-arguments {
margin: 10px 20px 30px;
margin: 0.625rem 1.25rem 1.875rem;
#test-margin-four-arguments {
margin: 10px 20px 30px 40px;
margin: 0.625rem 1.25rem 1.875rem 2.5rem;
#test-margin-top {
margin-top: 10px;
margin-top: 0.625rem;
#test-margin-right {
margin-right: 20px;
margin-right: 1.25rem;
#test-margin-bottom {
margin-bottom: 30px;
margin-bottom: 1.875rem;
#test-margin-left {
margin-left: 40px;
margin-left: 2.5rem;
#test-padding-one-argument {
padding: 10px;
padding: 0.625rem;
#test-padding-two-arguments {
padding: 10px 20px;
padding: 0.625rem 1.25rem;
#test-padding-three-arguments {
padding: 10px 20px 30px;
padding: 0.625rem 1.25rem 1.875rem;
#test-padding-four-arguments {
padding: 10px 20px 30px 40px;
padding: 0.625rem 1.25rem 1.875rem 2.5rem;
#test-padding-top {
padding-top: 10px;
padding-top: 0.625rem;
#test-padding-right {
padding-right: 20px;
padding-right: 1.25rem;
#test-padding-bottom {
padding-bottom: 30px;
padding-bottom: 1.875rem;
#test-padding-left {
padding-left: 40px;
padding-left: 2.5rem;
#test-font-size-inherit {
font-size: 'font-size' inherit;
#test-font-size {
font-size: 30px;
font-size: 1.875rem;
////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////
// //
// Pixel‐parity rem mixins for Stylus. // Responsive Pixels mixins for Stylus.
// ‘Because web design should not require a calculator.’
// //
// Copyright © 2012-2013 Aral Balkan. // Copyright © 2012-2013 Aral Balkan.
// Released under the MIT License. // Released under the MIT License.
// //
// Since some horrible browsers (e.g., on *spit* Android) don’t let you change the // Think in pixels; have them automatically translated to rems.
// root font size, and since browsers do not implement the minimum font size accessibility
// feature intelligently enough, we’re forced to leave the browser default of 16px
// as the base font size.
// These mixins do two things: firstly, they allow you to think in pixels but write in rems,
// doing the calculation (division by 16) for you (and hence the name, ‘pixel‐parity rems’),
// and, secondly, they automatically add the pixel fallbacks for you so that older
// browsers will use pixels.
// //
////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////
...@@ -101,7 +95,7 @@ showBaselineGrid(show = yes, baseFontSize = 16, showQuarterLineHeightMarks=no, s ...@@ -101,7 +95,7 @@ showBaselineGrid(show = yes, baseFontSize = 16, showQuarterLineHeightMarks=no, s
// //
// Show horizontal grid lines too. // Show horizontal grid lines too.
// //
if showQuarterLineHeightMarks == "no" if showQuarterLineHeightMarks == 'no'
// //
// Show horizontal grid, line-height, half-line-height marks. // Show horizontal grid, line-height, half-line-height marks.
// //
...@@ -141,7 +135,7 @@ showBaselineGrid(show = yes, baseFontSize = 16, showQuarterLineHeightMarks=no, s ...@@ -141,7 +135,7 @@ showBaselineGrid(show = yes, baseFontSize = 16, showQuarterLineHeightMarks=no, s
// (so divided by the default root font size of 16). // (so divided by the default root font size of 16).
// //
relative-line-height(h) relative-line-height(h)
if unit(h) == "rlh" if unit(h) == 'rlh'
relativeLineHeight = baseLineHeight * h / 16; relativeLineHeight = baseLineHeight * h / 16;
line-height unit(relativeLineHeight, 'rem') line-height unit(relativeLineHeight, 'rem')
...@@ -150,103 +144,102 @@ relative-line-height(h) ...@@ -150,103 +144,102 @@ relative-line-height(h)
// //
line-height(h) line-height(h)
if unit(h) == "rem" if unit(h) == 'px'
line-height unit(h, 'px') line-height unit(h, 'px')
line-height unit(h/16, 'rem') line-height unit(h/16, 'rem')
else else
line-height unit(h, unit(h)) line-height unit(h, unit(h))
/* Abstract shorthand for attributes that can have 1-4 arguments
(top, right, left, bottom) */
/* Margin */ abstract-shorthand(attr, originalArguments)
margin() if originalArguments[0] == 'inherit'
if unit(arguments[0]) == "rem"
{attr} originalArguments
else if unit(originalArguments[0]) == 'px'
t = arguments[0] t = originalArguments[0]
r = arguments[1] r = originalArguments[1]
b = arguments[2] b = originalArguments[2]
l = arguments[3] l = originalArguments[3]
if l if l
margin unit(t, 'px') unit(r, 'px') unit(b, 'px') unit(l, 'px') {attr} unit(t, 'px') unit(r, 'px') unit(b, 'px') unit(l, 'px')
margin unit(t/16, 'rem') unit(r/16, 'rem') unit(b/16, 'rem') unit(l/16, 'rem') {attr} unit(t/16, 'rem') unit(r/16, 'rem') unit(b/16, 'rem') unit(l/16, 'rem')
else if b else if b
margin unit(t, 'px') unit(r, 'px') unit(b, 'px') {attr} unit(t, 'px') unit(r, 'px') unit(b, 'px')
margin unit(t/16, 'rem') unit(r/16, 'rem') unit(b/16, 'rem') {attr} unit(t/16, 'rem') unit(r/16, 'rem') unit(b/16, 'rem')
else if r else if r
margin unit(t, 'px') unit(r, 'px') {attr} unit(t, 'px') unit(r, 'px')
margin unit(t/16, 'rem') unit(r/16, 'rem') {attr} unit(t/16, 'rem') unit(r/16, 'rem')
else if t else if t
margin unit(t, 'px') {attr} unit(t, 'px')
margin unit(t/16, 'rem') {attr} unit(t/16, 'rem')
else else
margin arguments {attr} originalArguments
margin-left(l) /* Abstract longhand for attributes that take a single value */
if l == auto
margin-left l abstract-longhand(attr, originalArguments)
else if unit(l) == "rem" or unit(l) == "" value = originalArguments[0]
margin-left: unit(l, 'px') if value == 'inherit'
margin-left: unit(l/16, 'rem') {attr} arguments
else if unit(value) == 'px'
{attr} unit(value, 'px')
{attr} unit(value/16, 'rem')
else else
margin-left: unit(l, unit(l)) {attr} arguments
if r == auto
margin-right r
margin-right: unit(r, 'px')
margin-right: unit(r/16, 'rem')
margin-top(t) /* Margin */
if t == auto
margin-top t
margin-top: unit(t, 'px')
margin-top: unit(t/16, 'rem')
margin-bottom(b) margin()
if b == auto abstract-shorthand('margin', arguments)
margin-bottom b
else margin-top()
margin-bottom: unit(b, 'px') abstract-longhand('margin-top', arguments)
margin-bottom: unit(b/16, 'rem')
abstract-longhand('margin-right', arguments)
abstract-longhand('margin-bottom', arguments)
abstract-longhand('margin-left', arguments)
/* Padding */ /* Padding */
padding(t, r, b, l) padding()
padding: unit(t, 'px') unit(r, 'px') unit(b, 'px') unit(l, 'px') abstract-shorthand('padding', arguments)
padding: unit(t/16, 'rem') unit(r/16, 'rem') unit(b/16, 'rem') unit(l/16, 'rem')
padding-left(l) padding-top()
padding-left: unit(l, 'px') abstract-longhand('padding-top', arguments)
padding-left: unit(l/16, 'rem')
padding-right(r) padding-right()
padding-right: unit(r, 'px') abstract-longhand('padding-right', arguments)
padding-right: unit(r/16, 'rem')
padding-top(t) padding-bottom()
padding-top: unit(t, 'px') abstract-longhand('padding-bottom', arguments)
padding-top: unit(t/16, 'rem')
padding-bottom(b) padding-left()
padding-bottom: unit(b, 'px') abstract-longhand('padding-left', arguments)
padding-bottom: unit(b/16, 'rem')
font-size(s) /* Font size */
if unit(s) == "rem"
font-size: unit(s, 'px')
font-size: unit(s/16, 'rem')
font-size: unit(s, unit(s))
max-width(w) font-size()
if unit(w) == "rem" or unit(w) == "" abstract-longhand('font-size', arguments)
max-width: unit(w, 'px')
max-width: unit(w/16, 'rem') /* Max width */
max-width: unit(w, unit(w)) max-width()
abstract-longhand('max-width', arguments)
abstract-longhand('max-height', arguments)
/* Border */ /* Border */
...@@ -254,12 +247,12 @@ abstract-border(borderType, borderArgs, originalArguments) ...@@ -254,12 +247,12 @@ abstract-border(borderType, borderArgs, originalArguments)
value = borderArgs[0]; value = borderArgs[0];
// Only 'none' // Only 'none'
if typeof(value) is "unit" if typeof(value) is 'unit'
style = borderArgs[1]; style = borderArgs[1];
color = borderArgs[2]; color = borderArgs[2];
if unit(value) == "rem" if unit(value) == 'px'
{borderType} unit(value, 'px') style color {borderType} unit(value, 'px') style color
{borderType} unit(value/16, 'rem') style color {borderType} unit(value/16, 'rem') style color
else else
...@@ -268,51 +261,42 @@ abstract-border(borderType, borderArgs, originalArguments) ...@@ -268,51 +261,42 @@ abstract-border(borderType, borderArgs, originalArguments)
{borderType} originalArguments {borderType} originalArguments
border(args...) border(args...)
abstract-border("border", args, arguments) abstract-border('border', args, arguments)
border-top(args...) border-top(args...)
abstract-border("border-top", args, arguments) abstract-border('border-top', args, arguments)
border-right(args...) border-right(args...)
abstract-border("border-right", args, arguments) abstract-border('border-right', args, arguments)
border-bottom(args...) border-bottom(args...)
abstract-border("border-bottom", args, arguments) abstract-border('border-bottom', args, arguments)
border-left(args...) border-left(args...)
abstract-border("border-left", args, arguments) abstract-border('border-left', args, arguments)
abstract-longhand('border-radius', arguments)
border-radius(r) /* Width */
border-radius: unit(r, 'px')
border-radius: unit(r/16, 'rem')
width(w) width(w)
if unit(w) == "rem" or unit(w) == "" abstract-longhand('width', arguments)
width: unit(w, 'px')
width: unit(w/16, 'rem')
width: unit(w, unit(w))
/* Relative and absolute positioning */ /* Relative and absolute positioning */
abstractPosition(positionType, value) top()
if unit(value) == "rem" abstract-longhand('top', arguments)
{positionType} unit(value, 'px')
{positionType} unit(value/16, 'rem')
{positionType} value
top(value) bottom()
abstractPosition("top", value) abstract-longhand('bottom', arguments)
bottom(value) left()
abstractPosition("bottom", value) abstract-longhand('left', arguments)
left(value) right()
abstractPosition("left", value) abstract-longhand('right', arguments)
abstractPosition("right", value)
// //
// Typography // Typography
<!doctype html>
<html lang='en'>
<title>Responsive Pixels Test Suite</title>
<link rel='stylesheet' href='css/tests.css'>
<!-- Centering / non-pixel value -->
<div id='test-margin-inherit'><code>margin inherit</code></div>
<div id='test-margin-horizontal-centering'><code>margin 0 auto</code></div>
<!-- Shorthand -->
<div id='test-margin-one-argument'><code>margin 10px</code></div>
<div id='test-margin-two-arguments'><code>margin 10px 20px</code></div>
<div id='test-margin-three-arguments'><code>margin 10px 20px 30px</code></div>
<div id='test-margin-four-arguments'><code>margin 10px 20px 30px 40px</code></div>
<!-- Longhand -->
<div id='test-margin-top'><code>margin-top 10px</code></div>
<div id='test-margin-right'><code>margin-right 20px</code></div>
<div id='test-margin-bottom'><code>margin-bottom 30px</code></div>
<div id='test-margin-left'><code>margin-left 40px</code></div>
<!-- Shorthand -->
<div id='test-padding-one-argument'><code>padding 10px</code></div>
<div id='test-padding-two-arguments'><code>padding 10px 20px</code></div>
<div id='test-padding-three-arguments'><code>padding 10px 20px 30px</code></div>
<div id='test-padding-four-arguments'><code>padding 10px 20px 30px 40px</code></div>
<!-- Longhand -->
<div id='test-padding-top'><code>padding-top 10px</code></div>
<div id='test-padding-right'><code>padding-right 20px</code></div>
<div id='test-padding-bottom'><code>padding-bottom 30px</code></div>
<div id='test-padding-left'><code>padding-left 40px</code></div>
<h2>Font size</h2>
<div id='test-font-size-inherit'><code>font-size inherit</code></div>
<div id='test-font-size'><code>font-size 30px</code></div>
\ No newline at end of file
@import index
border 1px solid black
background-color #eee
width 50%
// Margins
margin inherit
margin 0 auto
margin 10px
margin 10px 20px
margin 10px 20px 30px
margin 10px 20px 30px 40px
margin-top 10px
margin-right 20px
margin-bottom 30px
margin-left 40px
// Padding
padding 10px
padding 10px 20px
padding 10px 20px 30px
padding 10px 20px 30px 40px
padding-top 10px
padding-right 20px
padding-bottom 30px
padding-left 40px
// Font size
font-size inherit
font-size 30px
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment