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/.npmignore b/.npmignore
new file mode 100644
index 0000000..4f29079
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,2 @@
+.idea
+tests
diff --git a/Gruntfile.js b/Gruntfile.js
deleted file mode 100644
index 265a0de..0000000
--- a/Gruntfile.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/* jshint node: true */
-module.exports = function(grunt) {
- 'use strict';
-
- grunt.loadNpmTasks('grunt-bump');
-
- grunt.initConfig({
- bump: {
- options: {
- files: ['package.json', 'bower.json'],
- commitFiles: ['package.json', 'bower.json'],
- pushTo: 'origin'
- }
- }
- });
-};
diff --git a/README.md b/README.md
index 8b361f5..61c88f5 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
-CSS Element Queries
-===================
+# CSS Element Queries
+
[](https://gitter.im/marcj/css-element-queries?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
@@ -13,45 +13,61 @@ Features:
- 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. No need to write rules in HTML.
- - supports and tested in webkit, gecko and IE(7/8/9/10/11).
+ - 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.
@@ -61,13 +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/.
+
+
+
+
+## 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();
+```
+
+## 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.
+## License
-License
--------
-MIT license. Copyright [Marc J. Schmidt](http://marcjschmidt.de/).
+MIT license. Copyright [Marc J. Schmidt](https://twitter.com/MarcJSchmidt).
diff --git a/bower.json b/bower.json
deleted file mode 100644
index b25b96f..0000000
--- a/bower.json
+++ /dev/null
@@ -1,19 +0,0 @@
-{
- "name": "css-element-queries",
- "version": "0.3.0",
- "main": [
- "./src/ElementQueries.js",
- "./src/ResizeSensor.js"
- ],
- "ignore": [
- "**/.*",
- "_*",
- "Gruntfile.js",
- "composer.json",
- "package.json",
- "*.html"
- ],
- "dependencies": {
- }
-}
-
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
index 4d7bd83..6f5145b 100644
--- a/index.js
+++ b/index.js
@@ -1,2 +1,4 @@
-require('./src/ResizeSensor');
-require('./src/ElementQueries');
+module.exports = {
+ ResizeSensor: require('./src/ResizeSensor'),
+ ElementQueries: require('./src/ElementQueries')
+};
diff --git a/package.json b/package.json
index ec54cf1..964230f 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,9 @@
{
"name": "css-element-queries",
- "version": "0.3.0",
- "description": "CSS-Element-Queries Polyfill. proof-of-concept for high-speed element dimension/media queries in valid css.",
+ "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"
},
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
index 2e4b566..4fe4298 100755
--- a/src/ElementQueries.js
+++ b/src/ElementQueries.js
@@ -1,19 +1,35 @@
+'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() {
+(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 () {
+ //
-
-
- Drag the gray line at the right to see it in action.
-
-
-
-
Demo 1
- This is content from the first responsive demo without media queries. It uses the element queries provided by this library.
-
-
-
-
-
Demo 2
-
- Box
-
-
- First 1/2 box
-
-
- Second 1/2 box
-
-
-
-
-
-
-
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.
-