Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Nathan Ford
committed
Jul 14, 2014
1 parent
beb4a1f
commit ea2fa65
Showing
3 changed files
with
370 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
}); |