Item: element queries concept
Rating: 3.4
Author: &#x2063;

0 Downloads
52 Views
Tweet
Download Now View Demo

HTML
CSS
JavaScript

    .wrapper
  h1 CSS element-queries
  h2 Introducing an awesome concept
  .wrapper4
    .element look at me change
  .wrapper2
    .element look at me change
  .wrapper3
    .element look at me change
  .wrapper1
    .element look at me change

  p ...with a really CSS-like syntax, works with plain CSS or SCSS
  p no media-query magic involved ;)
  h3 Here's how one would declare an element-query (actual code from this example)
  
  pre
    | .element {
    |   height: 20px;
    |   background: #F44336;
    |   color: #000;
    |   padding: 20px;
    | }
    | @element (max-width: 300px) {
    |   .element {
    |     background: #3F51B5;
    |     height: 50px;
    |     color: #fff;
    |   }
    | }
 
  .warning
    h2 !!!Warning
    p this is not a functional code it just works for this specific example. i will try to build a functional pluugin for this feature. Ideas are welcome.


/*Downloaded from https://www.codeseek.co/pixelass/element-queries-concept-JoEgpZ */
    @import url(https://fonts.googleapis.com/css?family=Source+Code+Pro|Roboto:400,700);
.element {
  height: 20px;
  background: #F44336;
  color: #000;
  padding: 20px;
}
@element (max-width: 300px) {
  .element {
    background: #3F51B5;
    height: 50px;
    color: #fff;
  }
}
.wrapper1 {
  width: 40%;
}
.wrapper2 {
  width: 30%;
}
.wrapper3 {
  width: 20%;
}
.wrapper4 {
  width: 10%;
}

.wrapper {
  margin: 50px;
}

.warning {
  background: #D32F2F;
  color: #fff;
  padding: 10px;
}

body {
  margin: 0;
  background: #FFD54F;
  color: #000;
  font-family: 'Roboto', sans-serif;
}

pre {
  background: #222;
  color: #ffa;
  margin: 10px 0;
  padding: 10px;
  font-size: 20px;
  font-family: 'Source Code Pro', monospace;
}


/*Downloaded from https://www.codeseek.co/pixelass/element-queries-concept-JoEgpZ */
    var stylesheet = document.querySelector('style').innerHTML;


var elementQuery = stylesheet.match(/@element[^\}]+/)[0];
var c = elementQuery.match(/\([a-z\- 0-9:]+\)/g)[0];
var d = elementQuery.replace(/@element[^\n]+/g, '');
var e = d.match(/[\.#][^\{]+/g)[0];

var el = document.querySelectorAll(e);
d = d.replace(/\n+/g,'').replace(/\s+/g,' ');
rule = d.match(/[a-z\-]+:.*;/g)[0];//.split(':');
rule = rule.split(';');
var rules = [];
[].forEach.call(rule, function(elm,i){
  var arr = elm.split(':');
  rules.push(arr);
});

function checkQuery(){
  [].forEach.call(el,function(elm,i){
    if(elm.clientWidth <= c.match(/\d+/)[0]){
      [].forEach.call(rules,function(r,idx){
        elm.style[r[0].trim()] = r[1];
      });
    } else {
      [].forEach.call(rules,function(r,idx){
        elm.style[r[0].trim()] = null;
      });   
    }    
  });
}


window.addEventListener('resize', checkQuery, false);

checkQuery();