Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clean up repo #39

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
# 0.1.1
- Clean up repo

# 0.1.0
- After some bug fixes it finally works down to IE5.5 on the desktop and Opera Mini on mobile!!
- Also, I removed the dependency on jQuery.
- Now resizes correctly right after page load.
- Media query support!! (rudimentary, but check out the new demo!)
- Right now, media queries only apply to rules with vw,vh/vmin units. Other rules won't be applied just yet. More to come...
3 changes: 1 addition & 2 deletions LICENSE
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
The MIT License

Copyright (c) 2010-2014 Sebastian E. Ferreyra Pons
Copyright (c) 2010-2016 Sebastian E. Ferreyra Pons

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand All @@ -19,4 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

50 changes: 16 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,40 +1,22 @@
vminpoly
========
<h1 align="center">vminpoly</h1>

A polyfill for CSS units vw, vh &amp; vmin.
<p align="center">
Viewport units for old browsers
</p>

Simple online [demo](http://saabi.github.com/vminpoly) right here. A more sophisticated [responsive demo](http://saabi.github.com/vminpoly/demo2.html) demonstrating vw/vh/vmin units along with *media queries*, working right down to IE5.5 on the desktop and Opera Mini on mobiles!! (In Opera Mini the browser must be refreshed after changing phone orientations as it appears it doesn't trigger the window resize event)
### Installation
Just include [vminpoly.dist.min.js](vminpoly.dist.min.js) before the `</body>` tag.

This is a working proof of concept right now. There's a lot of cleanup to do on the code.
### Bower
`bower install --save vminpoly`

Since most browsers ignore rules they don't understand, the code must load and parse the original CSS sourcecode. It does this using a javascript [CSS parser](https://github.com/tabatkins/css-parser). Once this is done, it filters the generated tree leaving only rules that use 'vh', 'vw' & 'vmin' units.
At window resize time, it generates CSS code for the 'px' equivalents and appends it in a 'style' element at the end of the 'head' element. The generated code respects media queries.
### Browser Support
- Modern browsers
- IE5.5+
- Opera Mini

As it is, it's fast enough for a lot of cases, but the code can still be optimized greatly, both in parsing and in resizing.
### Note
vminpoly requires a [tokenizer](vendor/tokenizer.js) and [parser](vendor/parser.js). Feel free to combine your own with [src/vminpoly.js](src/vminpoly.js).

Also, any suggestions on how to better organize the repo, specially with respect to third party code, is greatly appreciated.

Notes
-----
* It's working fine in IE5.5+, Firefox, Opera and even Opera Mini, which doesn't support any of the units or media queries. Chrome, Safari and the Firefox beta don't need it.
* Well... Chrome and Safari actually can benefit from it as they don't properly handle font-size natively while resizing the window.


TODO:
-----

* IE9 and IE10 support vw, vh & vm, so the code should only translate 'vmin' units to 'vm'
* Only linked stylesheets are being parsed right now but it's very easy to also parse 'style' elements.
* Also, recursively parse @import rules.
* Add some more examples of what can be achieved.

In short, the only browser with apparently full native support right now is Firefox beta (Aurora). The rest will benefit from this polyfill immediately, even without the badly needed code polishing.

Latest Changes:
---------------

* After some bug fixes it finally works down to **IE5.5 on the desktop** and **Opera Mini on mobile**!!
* Also, I removed the dependency on jQuery.
* Now resizes correctly right after page load.
* Media query support!! (rudimentary, but check out the [new demo!](http://saabi.github.com/vminpoly/demo2.html))
* Right now, media queries only apply to rules with vw,vh/vmin units. Other rules won't be applied just yet. More to come...
### Contribute
vminpoly works pretty well, but it could be **vastly optimized**. If you're pretty handy with JavaScript we'd love for you to pitch in!
6 changes: 3 additions & 3 deletions bower.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"name": "vminpoly",
"main": "vminpoly.js",
"version": "0.1.0",
"main": "dist/vminpoly.dist.js",
"homepage": "https://github.com/saabi/vminpoly",
"authors": [
"Sebastian Ferreyra <sebastian.ferreyra@infomerx.com>"
"Sebastian Ferreyra <sebastian.ferreyra@infomerx.com>",
"Cory Simmons"
],
"description": "A polyfill for CSS units vw, vh & vmin and now some media queries to boot.",
"keywords": [
Expand Down
57 changes: 0 additions & 57 deletions demo2.html

This file was deleted.

Loading