diff --git a/css/styles.css b/css/styles.css
new file mode 100644
index 0000000..2bfe373
--- /dev/null
+++ b/css/styles.css
@@ -0,0 +1,19 @@
+/* Example CSS - external file */
+
+p {
+ min-font-size: 14px;
+}
+
+p, li, h3, dd {
+ font-size: 2vw;
+ max-width: 32em;
+ min-font-size: 12px;
+}
+
+p {
+ margin: 0;
+}
+
+p + p {
+ text-indent: 1em;
+}
\ No newline at end of file
diff --git a/demo.html b/demo.html
new file mode 100644
index 0000000..96a5f5c
--- /dev/null
+++ b/demo.html
@@ -0,0 +1,95 @@
+
+
+
+
+
+
+ A quick brown fox jumps over the lazy dog.
+
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
+
+ Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.
+
+ Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
+
+ Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
+
+ Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
+
+ Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
+
+ Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/js/typography.js b/js/typography.js
new file mode 100644
index 0000000..744b76b
--- /dev/null
+++ b/js/typography.js
@@ -0,0 +1,256 @@
+/* Stylefill.js – https://github.com/nathanford/stylefill
+
+This script acts as a bridge between your CSS and your JavaScript, allowing your scripts to read your invented CSS properties and then run whatever function using the assigned selector and property value.
+
+*/
+
+var stylefill = {
+
+ allRules : new Object(),
+
+ allFills : new Object(),
+
+ objSize : function(obj) {
+
+ var size = 0, key;
+
+ for (key in obj) {
+ if (obj.hasOwnProperty(key)) size++;
+ }
+
+ return size;
+
+ },
+
+ arraySliceShim : function () { // fixes Array.prototype.slice support for IE lt 9
+
+ 'use strict';
+ var _slice = Array.prototype.slice;
+
+ try {
+ _slice.call(document.documentElement);
+ }
+ catch (e) { // Fails in IE < 9
+
+ Array.prototype.slice = function (begin, end) {
+
+ var i, arrl = this.length, a = [];
+
+ if (this.charAt) {
+
+ for (i = 0; i < arrl; i++) {
+ a.push(this.charAt(i));
+ }
+
+ }
+ else {
+
+ for (i = 0; i < this.length; i++) {
+ a.push(this[i]);
+ }
+
+ }
+
+ return _slice.call(a, begin, end || a.length);
+
+ };
+
+ }
+
+ },
+
+ init : function (params) {
+
+ this.allFills = params;
+
+ this.getStyleSheet(params);
+
+ },
+
+ loadFile : function(params, url, scount) {
+
+ var req;
+
+ if (window.XMLHttpRequest) req = new XMLHttpRequest();
+ else req = new ActiveXObject("Microsoft.XMLHTTP");
+
+ req.open("GET", url, true);
+
+ req.onreadystatechange = function() {
+
+ if (this.readyState == 4 && this.status == 200) stylefill.findRules(params, this.responseText, scount);
+
+ };
+
+ req.send(null);
+
+ },
+
+ getStyleSheet : function (params) {
+
+ var sheetstext = new Array(),
+ sheets = Array.prototype.slice.call(document.getElementsByTagName('link')); // grab stylesheet links - not used yet
+
+ sheets.push(Array.prototype.slice.call(document.getElementsByTagName('style'))[0]); // add on page CSS
+
+ sheets.reverse();
+
+ var scount = this.objSize(sheets);
+
+ while (scount-- > 0) {
+
+ var sheet = sheets[scount];
+
+ if (sheet.innerHTML) this.findRules(params, sheet.innerHTML, scount);
+ else if (sheet.href.match(document.domain)) this.loadFile(params, sheet.href, scount);
+
+ }
+
+ },
+
+ checkRule : function (property) {
+
+ var propertyCamel = property.replace(/(^|-)([a-z])/g, function (m1, m2, m3) { return m3.toUpperCase(); });
+
+ if (('Webkit' + propertyCamel) in document.body.style
+ || ('Moz' + propertyCamel) in document.body.style
+ || ('O' + propertyCamel) in document.body.style
+ || property in document.body.style) return true;
+
+ else return false;
+
+ },
+
+ findRules : function (params, sheettext, scount) {
+
+ if (sheettext) {
+
+ var pcount = this.objSize(params);
+
+ for (property in params) {
+
+ var selreg = new RegExp('([^}{]+){([^}]+)?' + property.replace('-', '\\-') + '[\\s\\t]*:[\\s\\t]*([^;]+)', 'gi'),
+ selmatch,
+
+ support = stylefill.checkRule(property);
+
+ while (selmatch = selreg.exec(sheettext)) {
+
+ var sels = selmatch[1].replace(/^([\s\n\r\t]+|\/\*.*?\*\/)+/, '').replace(/[\s\n\r\t]+$/, ''),
+ val = selmatch[3];
+
+ sels = sels.split(',');
+
+ for (sel in sels) {
+
+ var s = sels[sel];
+
+ if (!stylefill.allRules[s]) stylefill.allRules[s] = new Object();
+ stylefill.allRules[s][property] = {
+ 'support': support,
+ 'value': val
+ };
+
+ }
+
+ }
+
+ }
+
+ if (scount == 1) this.runFills();
+
+ }
+
+ },
+
+ runFills : function () {
+
+ var allRules = stylefill.allRules,
+ allFills = stylefill.allFills;
+
+ for (i in allRules) {
+
+ var rules = allRules[i];
+
+ for (j in rules) {
+
+ var rule = rules[j],
+ func = allFills[j],
+
+ newrule = {
+
+ support : rule['support'],
+ selector: i,
+ property: j,
+ value: rule['value']
+
+ };
+
+ func(newrule);
+
+ }
+
+ }
+
+ },
+
+ binder : function (object, events, func) {
+
+ var events = events.split(','),
+ eventscount = events.length;
+
+ while (eventscount-- > 0) {
+
+ if (object.attachEvent) object.attachEvent('on' + events[eventscount].trim(), func);
+ else object.addEventListener(events[eventscount].trim(), func, false);
+
+ }
+
+ }
+
+};
+
+/* Begin min-max-font-size functions */
+
+var typo = {
+
+ minMaxFontSize : function (selector) {
+
+ var eles = document.querySelectorAll(selector),
+ elescount = eles.length;
+
+ while (elescount-- > 0) {
+
+ var ele = eles[elescount],
+
+ selRules = stylefill.allRules[selector],
+ max = selRules['max-font-size'] ? selRules['max-font-size']['value'] : false,
+ min = (selRules['min-font-size']) ? selRules['min-font-size']['value'] : false;
+
+ ele.style.fontSize = '';
+
+ var eleFontSize = parseFloat(window.getComputedStyle(ele, null).getPropertyValue('font-size'));
+
+ if (min && eleFontSize <= parseFloat(min)) ele.style.fontSize = min;
+ else if (max && eleFontSize >= parseFloat(max)) ele.style.fontSize = max;
+
+ }
+
+ }
+
+
+};
+
+typo.maxFontSize = typo.minFontSize = function (rule) {
+
+ typo.minMaxFontSize(rule.selector);
+
+ stylefill.binder(window, 'resize', function () { typo.minMaxFontSize(rule.selector); });
+
+};
+
+// assign the CSS property to the function
+stylefill.init({
+ 'max-font-size' : typo.maxFontSize,
+ 'min-font-size' : typo.minFontSize
+});
\ No newline at end of file