diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 0000000..7e45dcf
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1 @@
+github: marcj
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..c2658d7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules/
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..4f29079
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,2 @@
+.idea
+tests
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..4de61dc
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,19 @@
+Copyright (c) 2013 Marc J. Schmidt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+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.
diff --git a/README.md b/README.md
index a92b0fc..61c88f5 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,9 @@
-CSS Element Queries
-===================
+# CSS Element Queries
-Element Queries is a polyfill adding support for element based media-queries to all new browsers (incl. IE8+).
+
+[](https://gitter.im/marcj/css-element-queries?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
+
+Element Queries is a polyfill adding support for element based media-queries to all new browsers (incl. IE7+).
It allows not only to define media-queries based on window-size but also adds 'media-queries' functionality depending on element (any selector supported)
size while not causing performance lags due to event based implementation.
@@ -9,47 +11,63 @@ It's a proof-of-concept event-based CSS element dimension query with valid CSS s
Features:
- - no performance issues
- - no interval/timeout detection. Truly event-based
+ - no performance issues since it listens only on size changes of elements that have element query rules defined through css. Other element query polifills only listen on `window.onresize` which causes performance issues and allows only to detect changes via window.resize event and not inside layout changes like css3 animation, :hover, DOM changes etc.
+ - no interval/timeout detection. Truly event-based through integrated ResizeSensor class.
+ - automatically discovers new DOM elements. No need to call javascript manually.
- no CSS modifications. Valid CSS Syntax
- - all CSS selectors available. Uses regular attribute selector
- - supports and tested in webkit, gecko and IE(8/9/10).
+ - all CSS selectors available. Uses regular attribute selector. No need to write rules in HTML/JS.
+ - supports and tested in webkit, gecko and IE(10+)
- `min-width`, `min-height`, `max-width` and `max-height` are supported so far
- works with any layout modifications: HTML (innerHTML etc), inline styles, DOM mutation, CSS3 transitions, fluid layout changes (also percent changes), pseudo classes (:hover etc.), window resizes and more
- no Javascript-Framework dependency (works with jQuery, Mootools, etc.)
+ - Works beautiful for responsive images without FOUC
More demos and information: http://marcj.github.io/css-element-queries/
-Example
--------
+## Examples
+
+### Element Query
```css
-.widget-name {
- padding: 25px;
+.widget-name h2 {
+ font-size: 12px;
}
-.widget-name[max-width="200px"] {
- padding: 0;
+
+.widget-name[min-width~="400px"] h2 {
+ font-size: 18px;
}
-.widget-name[min-width="500px"] {
+
+.widget-name[min-width~="600px"] h2 {
padding: 55px;
+ text-align: center;
+ font-size: 24px;
}
-/* responsive images /*
-.responsive-image img {
- width: 100%;
+.widget-name[min-width~="700px"] h2 {
+ font-size: 34px;
+ color: red;
}
+```
-.responsive-image[max-width^='400px'] img {
- content: url(demo/image-400px.jpg);
-}
+As you can see we use the `~=` [attribute selector](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors).
+Since this css-element-queries polyfill adds new element attributes on the DOM element
+(``) depending on your actual CSS and element's dimension,
+you should always use this attribute selector (especially if you have several element query rules on the same element).
-.responsive-image[max-width^='1000px'] img {
- content: url(demo/image-1000px.jpg);
-}
+```html
+
```
Include the javascript files at the bottom and you're good to go. No custom javascript calls needed.
@@ -59,15 +77,36 @@ Include the javascript files at the bottom and you're good to go. No custom java
```
-Issues
-------
+## See it in action:
+
+Here live http://marcj.github.io/css-element-queries/.
+
+
+
- - So far does not work on `img` tags. Wrapping with a `div` works fine though (See demo).
- - [only non-IE]: Adds additional hidden element into selected target element and forces target element to be relative or absolute.
-
+## Module Loader
+
+If you're using a module loader you need to trigger the event listening or initialization yourself:
+
+```javascript
+var ElementQueries = require('css-element-queries/src/ElementQueries');
+
+ //attaches to DOMLoadContent
+ElementQueries.listen();
+
+//or if you want to trigger it yourself.
+// Parse all available CSS and attach ResizeSensor to those elements which have rules attached
+// (make sure this is called after 'load' event, because CSS files are not ready when domReady is fired.
+ElementQueries.init();
+```
-Event-Based resize detection inspired by [backalleycoder.com](http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/) <3
+## Issues
+ - So far does not work on `img` and other elements that can't contain other elements. Wrapping with a `div` works fine though (See demo).
+ - Adds additional hidden elements into selected target element and forces target element to be relative or absolute.
+ - Local stylesheets do not work (using `file://` protocol).
+ - If you have rules on an element that has a css animation, also add `element-queries`. E.g. `.widget-name { animation: 2sec my-animation, 1s element-queries;}`. We use this to detect new added DOM elements automatically.
-[](https://bitdeli.com/free "Bitdeli Badge")
+## License
+MIT license. Copyright [Marc J. Schmidt](https://twitter.com/MarcJSchmidt).
diff --git a/css-element-queries.d.ts b/css-element-queries.d.ts
new file mode 100644
index 0000000..3fe0706
--- /dev/null
+++ b/css-element-queries.d.ts
@@ -0,0 +1,2 @@
+export { ResizeSensor, ResizeSensorCallback, Size } from "./src/ResizeSensor";
+export { ElementQueries } from './src/ElementQueries';
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..6f5145b
--- /dev/null
+++ b/index.js
@@ -0,0 +1,4 @@
+module.exports = {
+ ResizeSensor: require('./src/ResizeSensor'),
+ ElementQueries: require('./src/ElementQueries')
+};
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..964230f
--- /dev/null
+++ b/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "css-element-queries",
+ "version": "1.2.3",
+ "description": "CSS-Element-Queries Polyfill. Proof-of-concept for high-speed element dimension/media queries in valid css.",
+ "main": "index.js",
+ "typings": "css-element-queries.d.ts",
+ "directories": {
+ "test": "test"
+ },
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git@github.com:marcj/css-element-queries.git"
+ },
+ "author": "Marc J. Schmidt",
+ "license": "MIT",
+ "bugs": {
+ "url": "https://github.com/marcj/css-element-queries/issues"
+ },
+ "homepage": "https://github.com/marcj/css-element-queries",
+ "devDependencies": {
+ "grunt": "^0.4.5",
+ "grunt-bump": "^0.3.1"
+ }
+}
diff --git a/src/ElementQueries.d.ts b/src/ElementQueries.d.ts
new file mode 100644
index 0000000..00c5d93
--- /dev/null
+++ b/src/ElementQueries.d.ts
@@ -0,0 +1,14 @@
+export declare class ElementQueries {
+ /**
+ * Attaches to DOMLoadContent
+ */
+ static listen(): void;
+
+ /**
+ * Parses all available CSS and attach ResizeSensor to those elements which have rules attached.
+ * Make sure this is called after 'load' event, because CSS files are not ready when domReady is fired.
+ */
+ static init(): void;
+}
+
+export default ElementQueries;
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
old mode 100644
new mode 100755
index 2efe47c..4fe4298
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -1,11 +1,36 @@
-;
-(function() {
+'use strict';
+
+/**
+ * Copyright Marc J. Schmidt. See the LICENSE file at the top-level
+ * directory of this distribution and at
+ * https://github.com/marcj/css-element-queries/blob/master/LICENSE.
+ */
+(function (root, factory) {
+ if (typeof define === "function" && define.amd) {
+ define(['./ResizeSensor.js'], factory);
+ } else if (typeof exports === "object") {
+ module.exports = factory(require('./ResizeSensor.js'));
+ } else {
+ root.ElementQueries = factory(root.ResizeSensor);
+ root.ElementQueries.listen();
+ }
+}(typeof window !== 'undefined' ? window : this, function (ResizeSensor) {
+
/**
*
* @type {Function}
* @constructor
*/
- var ElementQueries = this.ElementQueries = function() {
+ var ElementQueries = function () {
+ //
+
+
+
+
+
+
+
+
Examples
+
+ Drag the gray line at the right to see it in action.
+
+
+
+
+
+
Responsive Text
+
+
+
+
Element responsiveness FTW!
+
+
+
Element started display: none
+
+
+
+
+
+
Element detachable
+
+
+
+
+
+
Dynamic element {{id}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Responsive Image
+
+
+
+
+
+
+
+
+ The image above has a default of 700px. Shrink or expend the container too see responsive image
+ working.
+ Thanks @placehold.it
+
+
+
+
+
+
+
+
+
Responsive Widget
+
+
+
Demo 1
+ This is content from the first responsive demo without media queries. It uses the element
+ queries
+ provided by this library.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Responsive Layout
+
+
+
Demo 2
+
+ Box
+
+
+ First 1/2 box
+
+
+ Second 1/2 box
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Responsive Animation
+
+
+
Demo 3 - width
+
+
+
+ This box is animated through css transitions.
+ We attached a resize-listener to this box. See below.
+
+
+ No changes.
+
+
+
+
+
+
Demo 4 - height
+
+
+
+ This box is animated through css transitions.
+ We attached a resize-listener to this box. See below.
+
+
+ No changes.
+
+
+
+
+
+
+
ResizeSensor Demo
+
+
+
+ 0 changes
+
+
+
+
+ CSS-Element-Queries comes with a Javascript ResizeSensor class you can use in Javascript directly.
+