Skip to content

GitLab

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
Show whitespace changes
Inline Side-by-side
css/index.css 0 → 100644
View file @ 3ce26432
/* Margin */
/* Padding */
/* Border */
/* Relative and absolute positioning */
css/tests.css 0 → 100644
View file @ 3ce26432
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;
}
index.styl
View file @ 3ce26432
//////////////////////////////////////////////////////////////////////////////////////////
//
// Pixel‐parity rem mixins for Stylus.
// Responsive Pixels mixins for Stylus.
//
// ‘Because web design should not require a calculator.’
//
// Copyright © 2012-2013 Aral Balkan.
// Released under the MIT License.
//
// Since some horrible browsers (e.g., on *spit* Android) don’t let you change the
// 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.
// Think in pixels; have them automatically translated to rems.
//
//////////////////////////////////////////////////////////////////////////////////////////
......@@ -101,7 +95,7 @@ showBaselineGrid(show = yes, baseFontSize = 16, showQuarterLineHeightMarks=no, s
//
// Show horizontal grid lines too.
//
if showQuarterLineHeightMarks == "no"
if showQuarterLineHeightMarks == 'no'
//
// Show horizontal grid, line-height, half-line-height marks.
//
......@@ -141,7 +135,7 @@ showBaselineGrid(show = yes, baseFontSize = 16, showQuarterLineHeightMarks=no, s
// (so divided by the default root font size of 16).
//
relative-line-height(h)
if unit(h) == "rlh"
if unit(h) == 'rlh'
relativeLineHeight = baseLineHeight * h / 16;
line-height unit(relativeLineHeight, 'rem')
......@@ -150,103 +144,102 @@ relative-line-height(h)
//
line-height(h)
if unit(h) == "rem"
if unit(h) == 'px'
line-height unit(h, 'px')
line-height unit(h/16, 'rem')
else
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 unit(arguments[0]) == "rem"
if originalArguments[0] == 'inherit'
t = arguments[0]
r = arguments[1]
b = arguments[2]
l = arguments[3]
{attr} originalArguments
else if unit(originalArguments[0]) == 'px'
t = originalArguments[0]
r = originalArguments[1]
b = originalArguments[2]
l = originalArguments[3]
if l
margin 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, 'px') unit(r, 'px') unit(b, 'px') unit(l, 'px')
{attr} unit(t/16, 'rem') unit(r/16, 'rem') unit(b/16, 'rem') unit(l/16, 'rem')
else if b
margin 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, 'px') unit(r, 'px') unit(b, 'px')
{attr} unit(t/16, 'rem') unit(r/16, 'rem') unit(b/16, 'rem')
else if r
margin unit(t, 'px') unit(r, 'px')
margin unit(t/16, 'rem') unit(r/16, 'rem')
{attr} unit(t, 'px') unit(r, 'px')
{attr} unit(t/16, 'rem') unit(r/16, 'rem')
else if t
margin unit(t, 'px')
margin unit(t/16, 'rem')
else
margin arguments
margin-left(l)
if l == auto
margin-left l
else if unit(l) == "rem" or unit(l) == ""
margin-left: unit(l, 'px')
margin-left: unit(l/16, 'rem')
{attr} unit(t, 'px')
{attr} unit(t/16, 'rem')
else
margin-left: unit(l, unit(l))
{attr} originalArguments
margin-right(r)
if r == auto
margin-right r
else
margin-right: unit(r, 'px')
margin-right: unit(r/16, 'rem')
/* Abstract longhand for attributes that take a single value */
margin-top(t)
if t == auto
margin-top t
abstract-longhand(attr, originalArguments)
value = originalArguments[0]
if value == 'inherit'
{attr} arguments
else if unit(value) == 'px'
{attr} unit(value, 'px')
{attr} unit(value/16, 'rem')
else
margin-top: unit(t, 'px')
margin-top: unit(t/16, 'rem')
{attr} arguments
margin-bottom(b)
if b == auto
margin-bottom b
else
margin-bottom: unit(b, 'px')
margin-bottom: unit(b/16, 'rem')
/* Margin */
margin()
abstract-shorthand('margin', arguments)
margin-top()
abstract-longhand('margin-top', arguments)
margin-right()
abstract-longhand('margin-right', arguments)
margin-bottom()
abstract-longhand('margin-bottom', arguments)
margin-left()
abstract-longhand('margin-left', arguments)
/* Padding */
padding(t, r, b, l)
padding: unit(t, 'px') unit(r, 'px') unit(b, 'px') unit(l, 'px')
padding: unit(t/16, 'rem') unit(r/16, 'rem') unit(b/16, 'rem') unit(l/16, 'rem')
padding()
abstract-shorthand('padding', arguments)
padding-left(l)
padding-left: unit(l, 'px')
padding-left: unit(l/16, 'rem')
padding-top()
abstract-longhand('padding-top', arguments)
padding-right(r)
padding-right: unit(r, 'px')
padding-right: unit(r/16, 'rem')
padding-right()
abstract-longhand('padding-right', arguments)
padding-top(t)
padding-top: unit(t, 'px')
padding-top: unit(t/16, 'rem')
padding-bottom()
abstract-longhand('padding-bottom', arguments)
padding-bottom(b)
padding-bottom: unit(b, 'px')
padding-bottom: unit(b/16, 'rem')
padding-left()
abstract-longhand('padding-left', arguments)
font-size(s)
if unit(s) == "rem"
font-size: unit(s, 'px')
font-size: unit(s/16, 'rem')
else
font-size: unit(s, unit(s))
/* Font size */
max-width(w)
if unit(w) == "rem" or unit(w) == ""
max-width: unit(w, 'px')
max-width: unit(w/16, 'rem')
else
max-width: unit(w, unit(w))
font-size()
abstract-longhand('font-size', arguments)
/* Max width */
max-width()
abstract-longhand('max-width', arguments)
max-height()
abstract-longhand('max-height', arguments)
/* Border */
......@@ -254,12 +247,12 @@ abstract-border(borderType, borderArgs, originalArguments)
value = borderArgs[0];
// Only 'none'
if typeof(value) is "unit"
if typeof(value) is 'unit'
style = borderArgs[1];
color = borderArgs[2];
if unit(value) == "rem"
if unit(value) == 'px'
{borderType} unit(value, 'px') style color
{borderType} unit(value/16, 'rem') style color
else
......@@ -268,51 +261,42 @@ abstract-border(borderType, borderArgs, originalArguments)
{borderType} originalArguments
border(args...)
abstract-border("border", args, arguments)
abstract-border('border', args, arguments)
border-top(args...)
abstract-border("border-top", args, arguments)
abstract-border('border-top', args, arguments)
border-right(args...)
abstract-border("border-right", args, arguments)
abstract-border('border-right', args, arguments)
border-bottom(args...)
abstract-border("border-bottom", args, arguments)
abstract-border('border-bottom', args, arguments)
border-left(args...)
abstract-border("border-left", args, arguments)
abstract-border('border-left', args, arguments)
border-radius(r)
border-radius: unit(r, 'px')
border-radius: unit(r/16, 'rem')
border-radius()
abstract-longhand('border-radius', arguments)
/* Width */
width(w)
if unit(w) == "rem" or unit(w) == ""
width: unit(w, 'px')
width: unit(w/16, 'rem')
else
width: unit(w, unit(w))
abstract-longhand('width', arguments)
/* Relative and absolute positioning */
abstractPosition(positionType, value)
if unit(value) == "rem"
{positionType} unit(value, 'px')
{positionType} unit(value/16, 'rem')
else
{positionType} value
top()
abstract-longhand('top', arguments)
top(value)
abstractPosition("top", value)
bottom()
abstract-longhand('bottom', arguments)
bottom(value)
abstractPosition("bottom", value)
left()
abstract-longhand('left', arguments)
left(value)
abstractPosition("left", value)
right()
abstract-longhand('right', arguments)
right(value)
abstractPosition("right", value)
//
// Typography
......
tests.html 0 → 100644
View file @ 3ce26432
<!doctype html>
<html lang='en'>
<head>
<title>Responsive Pixels Test Suite</title>
<link rel='stylesheet' href='css/tests.css'>
</head>
<body>
<h1>Tests</h1>
<section>
<h2>Margin</h2>
<!-- 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>
</section>
<section>
<h2>Padding</h2>
<!-- 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>
</section>
<section>
<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>
</section>
</body>
</html>
\ No newline at end of file
tests.styl 0 → 100644
View file @ 3ce26432
@import index
body
border 1px solid black
div
background-color #eee
width 50%
// Margins
#test-margin-inherit
margin inherit
#test-margin-horizontal-centering
margin 0 auto
#test-margin-one-argument
margin 10px
#test-margin-two-arguments
margin 10px 20px
#test-margin-three-arguments
margin 10px 20px 30px
#test-margin-four-arguments
margin 10px 20px 30px 40px
#test-margin-top
margin-top 10px
#test-margin-right
margin-right 20px
#test-margin-bottom
margin-bottom 30px
#test-margin-left
margin-left 40px
// Padding
#test-padding-one-argument
padding 10px
#test-padding-two-arguments
padding 10px 20px
#test-padding-three-arguments
padding 10px 20px 30px
#test-padding-four-arguments
padding 10px 20px 30px 40px
#test-padding-top
padding-top 10px
#test-padding-right
padding-right 20px
#test-padding-bottom
padding-bottom 30px
#test-padding-left
padding-left 40px
// Font size
#test-font-size-inherit
font-size inherit
#test-font-size
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

Like this? Fund us! Your patronage helps keep us independent and going.