Skip to content

Instantly share code, notes, and snippets.

@tomhodgins

tomhodgins/procss.html

Last active November 3, 2015 05:42
Show Gist options
  • Save tomhodgins/034b3876b9bd87813b15 to your computer and use it in GitHub Desktop.
Save tomhodgins/034b3876b9bd87813b15 to your computer and use it in GitHub Desktop.
Download ZIP
This pen compiles CSS with variables stored in JavaScript. Then a simple JavaScript function performs a search & replace for each instance of a variable in the source CSS and replaces it with the value of the variable stored in JavaScript. http://staticresource.com/procss.html
Raw
procss.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
<link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Source+Code+Pro:300,400,500,600,700,900" rel="stylesheet" type="text/css">
<title>ProCSS: The CSS Pro-Processor</title>
<link href="http://staticresource.com/data-buttons.css" rel="stylesheet" type="text/css">
<style>
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-kerning: auto;
}
html {
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
padding: 30px 15px;
font-size: 12pt;
line-height: 1.4;
font-weight: 400;
font-family: 'Open Sans', 'Source Sans Pro', Roboto, 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', 'Myriad Pro', 'Segoe UI', Myriad, Helvetica, 'Lucida Grande', 'DejaVu Sans Condensed', 'Liberation Sans', 'Nimbus Sans L', Tahoma, Geneva, Arial, sans-serif;
}
textarea, #meta {
-webkit-appearance: none;
appearance: none;
display: block;
width: 100%;
background: white;
border: 1px solid rgba(0,0,0,.15);
border-radius: 3px;
white-space:pre-wrap;
padding: .5em;
font-size: 10pt;
font-family: 'Source Code Pro', Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;
min-height: 200px;
overflow-y: scroll;
resize: vertical;
}
h1, h2 {
font-weight: 700;
line-height: 1.2;
margin: .5em 0;
letter-spacing: -.02em;
}
h1 {
text-align: center;
}
h1 small {
display: block;
color: #999;
font-weight: 400;
font-size: 70%;
letter-spacing: 0;
}
hr {
border: none;
background: transparent;
clear: both;
}
#input {
margin-top: 15px;
}
[data-button] {
display: block;
margin: .5em auto;
}
@media (min-width: 600px) {
#meta, #input {
width: calc(50% - 7.5px);
float: left;
}
#input {
margin-top: 0;
margin-left: 15px;
}
}
</style>
</head>
<body>
<h1>ProCSS<small>The CSS Pro-Processor</small></h1>
<h2>Pre-Processed CSS</h2>
<textarea id=meta contenteditable>/* JavaScript Variables */
var data = {
brandOrange: '#f60',
brandBlue: '#07f',
brandFont: 'Source Sans Pro',
totalHeight: window.innerHeight+'px',
date: new Date()
}</textarea>
<textarea id=input contenteditable>/* CSS */
/* Generated date */
div {
color: brandBlue;
background: white;
border: 1px solid brandOrange;
font-family: "brandFont";
font-weight: 400;
height: totalHeight;
}</textarea>
<hr>
<h2>ProCSS Output</h2>
<textarea id=output></textarea>
<input data-button=green type=button value=ProCSS onclick=proCSS()>
<script>
var input = document.getElementById('input'),
meta = document.getElementById('meta'),
output = document.getElementById('output')
function proCSS(){
var css = input.value
eval(meta.value)
for(var variable in data){
css = css.replace(variable,data[variable])
}
output.value = css
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment