Permalink
Browse files

First commit.

  • Loading branch information...
PaulAdamDavis committed Jun 7, 2012
0 parents commit 96ea533ce246dd76871b970bb26b64eed5d83ccc
Showing with 1,584 additions and 0 deletions.
  1. +114 −0 index.html
  2. +104 −0 js/scripts.js
  3. +18 −0 readme.md
  4. BIN styles/.DS_Store
  5. +870 −0 styles/css/app.css
  6. +188 −0 styles/less/_lesslib.less
  7. +290 −0 styles/less/app.less
@@ -0,0 +1,114 @@
<!DOCTYPE html>
<html>
<head>
<title>PixelPerc - A simple tool to help build responsive websites</title>
<meta name="description" content="A simple tool to help you create responsive websites from desktop-sized designs." />
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="styles/css/app.css?1234">
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20924453-4']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>

<script type="text/javascript" src="http://use.typekit.com/cls1lyg.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<!--
.z/`mu xF
.d`` uL .. x88> 98N xF
@8Ne. .u .@88b @88R 888> 988E xF
%8888:u@88N '"Y888k/"*P 888> 988F xF
`888I 888. Y888L `88> 98% xF
888I 888I 8888 ^~-"` xF u>=x.
888I 888I `888N xF :@8> 98i
uW888L 888' .u./"888& xF 888> 988k
'*88888Nu88P d888" Y888*" xF 888> 988E
~ '88888F` ` "Y Y" xF "88> 988
888 ^ xF "=-*"
*8E
'8>
"
-->

</head>
<body>

<div class="wrapper">

<h1 class="logo"><span>Pixel</span>Perc</h1>
<h5 class="tagline"><span>Pixel</span> to <span>Perc</span>ent Converter</h5>

<p>Just a little tool to help you convert fixed pixel widths to percentages. Useful if you're given desktop-sized mockups but the site needs to be responsive. A little time saver. See updates and stuff at <a href="http://twitter.com/pixelperc" class="text">@PixelPerc</a></p>

<ol>
<li>Give it your pixel-width columns</li>
<li>Press convert and get precentage widths</li>
<li>Be all responsive and enjoy a better life</li>
</ol>

<form id="widths">

<div class="number_wrapper pair pair_1">
<input type="text" class="number" value="500" />
</div>

<div class="operator pair pair_2">+</div>
<div class="number_wrapper pair pair_2">
<a href="#" class="minus" data-pair="2">&#9587;</a>
<input type="text" class="number" value="80" />
</div>

<div class="operator pair pair_3">+</div>
<div class="number_wrapper pair pair_3">
<a href="#" class="minus" data-pair="3">&#9587;</a>
<input type="text" class="number" value="250" />
</div>

<div class="operator equals">=</div>

<div class="number_wrapper">
<input type="text" class="total" name="total_width" disabled="disabled" />
</div>

<div class="operator">
<a href="#" class="plus" id="add_el">+</a>
</div>

<button>Convert</button>

</form>

<div id="example"></div>

<div class="extras">

<p><b>Note:</b> There's a well known rounding bug in JavaScript that means the total of all percentages might be <em>slightly</em> off, typically by something like 0.00001%. Don't worry, you won't see it on yor site, but it's worth you knowing.</p>

</div>

<div class="footer_push"></div>

</div><!-- end .wrapper -->

<footer class="animated bounceInUp">
<p>A thing by <b><a href="http://codebymonkey.com" class="text">Paul Adam Davis</a> and others</b> &mdash; Version 0.2</p>
</footer>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/scripts.js?1234"></script>

</body>
</html>
@@ -0,0 +1,104 @@
function roundNumber(num, dec) {
var result = Math.round(num*Math.pow(10,dec))/Math.pow(10,dec);
return result;
}

function random_color() {
var ranges = [
[20,220],
[20, 220],
[20, 220]
];
var colour_part = function() {
var range = ranges.splice(Math.floor(Math.random()*ranges.length), 1)[0];
return Math.floor(Math.random() * (range[1] - range[0])) + range[0];
}
return "rgb(" + colour_part() + "," + colour_part() + "," + colour_part() +")";
}

$(function(){

// Build an array from the number inputs
function array_from_inputs() {
var form = $("#widths"),
inputs = form.find("input.number"),
widths = [];
$.each(inputs, function(i, input) {
var value = ~~($(input).val());
widths.push(value);
});
return widths;
}

// Add all the column widths and return total.
function get_total_width() {
var widths = array_from_inputs(),
total_width = 0;
$.each(widths, function(i, value) {
total_width = ~~(total_width + value);
});
return total_width;
}

// Update the last inout, which is the total width. Should be the same as the wrapper.
function update_total_input() {
$("#widths input[name='total_width']").attr('value', get_total_width());
$("#widths input.number").bind("change blur keyup", function(){
$("#widths input[name='total_width']").attr('value', get_total_width());
});
}

// Remove a column
function remove_number() {
$(".minus").bind("click", function(){
var elem = $(this),
pair = elem.attr("data-pair");
$(".pair_" + pair).remove();
update_total_input();
return false;
});
}

// Update shit on click
$("#widths button").on("click", function(){

var total = get_total_width(),
widths = array_from_inputs();

// If total is 0, throw error
if (total === 0) {
$("#widths input.number").addClass("error");
return false;
} else {
$("#widths input.number").removeClass("error");
}

// Loop through the remaining inouts and give a % width
$("#example").html('');
$.each(widths, function(i, value) {
var value = value,
real_perc_width = 100 * parseFloat(value) / parseFloat(total),
nice_width = roundNumber(real_perc_width , 5 ); // 100 times by element width (600px) devided by total width (950px)
$("#example").append('<div class="example_column" style="width: ' + nice_width + '%; background: ' + random_color() + ';"><span class="values">' + nice_width + '% <br><span class="pixels">(was ' + value + 'px)</span></span></div>');
});

return false;
});

// Add element
$("#add_el").on("click", function(){
var num = $("#widths .number_wrapper").length;
$("#widths .equals").before('<div class="operator pair pair_' + num +'">+</div><div class="number_wrapper pair_' + num +'"><a href="#" class="minus" data-pair="' + num + '">&#9587;</a><input type="text" class="number" /></div>');
$("#widths input.number:last").focus();
update_total_input();
remove_number();
return false;
});


// Run functions
update_total_input();
remove_number();


});
@@ -0,0 +1,18 @@
# PixelPerc
### A simple tool to help build responsive websites

This is a simple tool to help developers convert fixed pixel widths to percentages. A use-case would be, being handed a typical desktop-sized design, but being told it should be responsive and fluid. Put in the widths of the main columns into the app and get back the percentages.

## Notes

* It's entirely client-side, other than setting `index.html` as the 404 page to internal linking can wotk with JavaScript.
* CSS was done in LESS. I'll convert it to raw CSS soon so it's easy to add to and work on.
* It's fully responsive, naturally.
* Proxima Nova is served from my Typekit account. It will only work with `pixelperc.com` and `pixelperc.dev`.
* I've added crude timestamps onto the CSS and JS refrences for cache busting. Better techniques welcome.
* Only needs to support good browsers. I'm not bothered about IE, I'm sure developers won't be IE users anyway.

## Todo

* Convert LESS to CSS
* Clean up (hasitlly written) JavaScript
BIN +6 KB styles/.DS_Store
Binary file not shown.
Oops, something went wrong.

0 comments on commit 96ea533

Please sign in to comment.