4 ms·

Wait, I'm really curious about your plugin. Do you have a public repo somewhere? Writing JS in CSS, on the face of it, sounds, well, kinda perverse. I'm pict

by skewart 11y ago

Wait, I'm really curious about your plugin. Do you have a public repo somewhere? Writing JS in CSS, on the face of it, sounds, well, kinda perverse. I'm picturing something where you apply "float": "left" to a JS function, and every line where that function is called is moved to the top of its containing block. I'm joking. I actually think the idea of incorporating a simple subset of JS functionality into CSS could be super powerful. There are lots of times when you want a little JS to help with styling, or maybe even basic data fetching and binding. It would be a lot simpler to just keep it in your CSS files. I'd love to hear more about what you're working on.

err4nt 11y ago
The plugin, demos, examples, and more can be found at http://elementqueries.com http://elementqueries.com I've been using this for the past year and its been a life saver! Dont picture it being gross, picture it like this: http://codepen.io/tomhodgins/pen/RrEpjo http://codepen.io/tomhodgins/pen/RrEpjo This CSS gives you a sticky header, a page with a min-height of 100% - whatever the footer happens to be, and then if the page expands it just pushes the footer out of the way. Normally you would either need to know the exact height of the footer in CSS, or you would need to write a little bit of JavaScript to measure the height of the footer. But keep in mind that if youve got a lot lf content in your footer, its probably going to get very tall at phone width, medium height for tablet users, and be the shortest for desktop users. So now, how can we write CSS that is able to use this changing value of the footer height on the page? The simplest way is to allow CSS to access the measurement of that element as it has rendered on the page.
- skewart 11y ago
  That's very cool! Nice work.
  - err4nt 11y ago
    Thanks, I just came up with a syntax that solved the problems I had with CSS and hired a brilliant JavaScript programmer, Maxime Euziere, to build me a plugin so I could use these features in my work :) If this plugin can help others too, that makes it all the more worthwhile!

by skewart 11y ago

err4nt 11y ago

The plugin, demos, examples, and more can be found at http://elementqueries.com http://elementqueries.com I've been using this for the past year and its been a life saver! Dont picture it being gross, picture it like this: http://codepen.io/tomhodgins/pen/RrEpjo http://codepen.io/tomhodgins/pen/RrEpjo This CSS gives you a sticky header, a page with a min-height of 100% - whatever the footer happens to be, and then if the page expands it just pushes the footer out of the way. Normally you would either need to know the exact height of the footer in CSS, or you would need to write a little bit of JavaScript to measure the height of the footer. But keep in mind that if youve got a lot lf content in your footer, its probably going to get very tall at phone width, medium height for tablet users, and be the shortest for desktop users. So now, how can we write CSS that is able to use this changing value of the footer height on the page? The simplest way is to allow CSS to access the measurement of that element as it has rendered on the page.

skewart 11y ago
That's very cool! Nice work.
- err4nt 11y ago
  Thanks, I just came up with a syntax that solved the problems I had with CSS and hired a brilliant JavaScript programmer, Maxime Euziere, to build me a plugin so I could use these features in my work :) If this plugin can help others too, that makes it all the more worthwhile!