Permalink
Browse files

First commit

  • Loading branch information...
1 parent beb4a1f commit ea2fa655330b4902f45e182d4fe4360c2fd7c951 Nathan Ford committed Jul 14, 2014
Showing with 370 additions and 0 deletions.
  1. +19 −0 css/styles.css
  2. +95 −0 demo.html
  3. +256 −0 js/typography.js
View
@@ -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;
+}
View
@@ -0,0 +1,95 @@
+<!DOCTYPE html>
+<html>
+<head>
+
+<meta charset=utf-8 />
+<meta name="author" content="Nathan Ford" />
+<meta name="description" content="Min-Max-Font-Size demo.html" />
+
+<title>Min-Max-Font-Size Demo</title>
+
+<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
+<link href='./css/styles.css' rel='stylesheet' type='text/css'>
+
+<style type="text/css">
+
+ body {
+ padding: 5% 10% 10%;
+ font-family: 'Droid Sans', 'Lucida Sans', sans-serif;
+ font-size: 18px;
+ line-height: 1.6;
+ }
+
+ h1 {
+ font-size: 3em;
+ font-size: 4vw;
+ max-font-size: 50px;
+ min-font-size: 20px;
+ margin: 0 0 1em;
+ line-height: 1.2;
+ }
+
+ h2 {
+ font-size: 1.5em;
+ margin: 1em 0 1em;
+ max-width: 20em;
+ }
+
+ h3 {
+ font-size: 1em;
+ margin: 1em 0 0;
+ }
+
+ h4 {
+ margin: 1em 0 2em;
+ font-weight: 400;
+ font-style: italic;
+ }
+
+ p, li, h3, dd {
+ max-font-size: 18px;
+ }
+
+ a {
+ text-decoration: underline;
+ }
+
+ li {
+ margin-bottom: 1ex;
+ }
+
+ blockquote {
+ margin: 1em;
+ font-style: italic;
+ }
+
+</style>
+
+</head>
+<body id="index">
+
+ <article>
+
+ <h1>A quick brown fox jumps over the lazy dog.</h1>
+
+ <p>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.</p>
+
+ <p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
+
+ <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
+
+ <p>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.</p>
+
+ <p>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.</p>
+
+ <p>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p>
+
+ <p>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna.</p>
+
+
+ </article>
+
+ <script src="./js/typography.js" type="text/javascript"></script>
+
+</body>
+</html>
View
@@ -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
+});

0 comments on commit ea2fa65

Please sign in to comment.