Permalink
Browse files

Changed js file name and added more to README

  • Loading branch information...
1 parent ea2fa65 commit b2bbcd2eb1c98f4c578591d56c2fb7711757e63c Nathan Ford committed Jul 14, 2014
Showing with 56 additions and 3 deletions.
  1. +39 −0 README.md
  2. +1 −1 demo.html
  3. +16 −2 js/{typography.js → mm-fontsize.js}
View
@@ -2,3 +2,42 @@ min-max-font-size
=================
Using vw or vh CSS units? Set a min or max font-size for your type.
+
+## Setup
+
+Add `mm-fontsize.js` at the end of your HTML page, just before the closing `body` tag.
+
+```HTML
+ …
+
+ <script src="./path-to-js/mm-fontsize.js" type="text/javascript"></script>
+
+</body>
+</html>
+```
+
+Now you can start manually adjusting kerning in your own CSS.
+
+## CSS Syntax
+
+To use the min-font-size or max-font-size propery, just write it in your CSS like any other property:
+
+```CSS
+h1 {
+ font-size: 4vw
+ max-font-size: 50px;
+ min-font-size: 20px;
+}
+```
+
+Notes:
+* This is only for when using vw or vh units for font size.
+* Right now, only px is the only unit accepted for min and max-font-size
+
+## This script is a Stylefill
+
+A ‘Stylefill’ is a way to create new CSS properties using JavaScript. Stylefills are similar in concept to a [polyfill](http://remysharp.com/2010/10/08/what-is-a-polyfill/), but are only focussed on extending CSS in new ways, and [Stylefill.js](https://github.com/nathanford/stylefill/) is a library to help make it much easier.
+
+## Support
+
+KerningPairs.js should work in all modern browsers, and IE9+.
View
@@ -89,7 +89,7 @@
</article>
- <script src="./js/typography.js" type="text/javascript"></script>
+ <script src="./js/mm-fontsize.js" type="text/javascript"></script>
</body>
</html>
@@ -1,6 +1,20 @@
-/* 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.
+mm-fontsize.js
+
+This script uses stylfill.js (https://github.com/nathanford/stylefill/) to allow properties to be written in the CSS.
+
+To use the min-font-size or max-font-size propery, just write it in your CSS like any other property:
+
+h1 {
+ font-size: 4vw
+ max-font-size: 50px;
+ min-font-size: 20px;
+}
+
+Notes:
+* This is only for when using vw or vh units for font size.
+* Right now, only px is the only unit accepted for min and max-font-size
*/

0 comments on commit b2bbcd2

Please sign in to comment.