First rough version.

Marc J. Schmidt · Marc J. Schmidt · commit e9b075625b43 · 2013-06-02T05:12:40.000+02:00
diff --git a/README.md b/README.md
@@ -0,0 +1,30 @@
+CSS Element Queries
+===================
+
+A proof-of-concept event-based CSS element dimension query with valid CSS selector syntax.
+
+This means:
+
+ - No interval/timeout detection. It's truly event-based.
+ - No CSS modifications.
+ - Valid CSS Syntax.
+ - All CSS selectors available. It used the normal attribute selector.
+ - Support for webkit/gecko/internet explorer.
+ - `min-width`, `min-height`, `max-width` and `max-height` are yet supported.
+
+Example
+-------
+
+```css
+    .widget-name {
+        padding: 25px;
+    }
+    .widget-name[max-width="200px"] {
+        padding: 0;
+    }
+    .widget-name[min-width="500px"] {
+        padding: 55px;
+    }
+```
+
+Info: This is a first very experimental version! You should not use it yet.
diff --git a/demo.html b/demo.html
@@ -0,0 +1,62 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>CSS Element Query</title>
+    <style>
+        body {
+            padding: 35px;
+            font-size: 12px;
+        }
+
+        .panel {
+            background-color: #eee;
+        }
+
+        .panel:hover {
+            padding: 0 150px;
+        }
+
+        .widget-1 {
+            border: 1px solid silver;
+            margin: 50px;
+            padding: 50px;
+        }
+
+        .widget-1[max-width='500px'] {
+            padding: 5px;
+        }
+
+        .widget-1[min-width~='500px'] {
+            text-align: center;
+            padding-left: 100px;
+            padding-right: 100px;
+            border: 1px solid blue;
+        }
+
+        .widget-1[min-width~='800px'] {
+            padding: 5px 300px;
+            border: 1px solid red;
+        }
+    </style>
+</head>
+<body>
+    <div class="panel">
+        <div class="widget-1">
+            <h2>Widget #1</h2>
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+            sed diam nonumy eirmod tempor invidunt ut labore et dolore
+            magna aliquyam erat, sed diam voluptua. At vero eos et accusam
+            et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+            no sea takimata sanctus est Lorem ipsum dolor sit amet.<br />
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr,
+            sed diam nonumy eirmod tempor invidunt ut labore et dolore
+            magna aliquyam erat, sed diam voluptua. At vero eos et accusam
+            et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+            no sea takimata sanctus est Lorem ipsum dolor sit amet.
+        </div>
+    </div>
+
+    <script src="src/ElementQueries.js"></script>
+</body>
+</html>
diff --git a/src/ElementQueries.js b/src/ElementQueries.js
