The biggest change for me in the past year has been shifting my thinking from the BEM and Bootstrappy ‘classy HTML’ toward a cleaner more ‘element-first’ approach. Here are some examples of things built in the past year using element queries thanks to the EQCSS plugin:
Great roundup, but you’re missing a key element query plugin: EQCSS
EQCSS looks like the most feature-complete of the Element Query plugins available right now, it currently supports:
- @min/max width@
- @min/max height@
- @min/max child elements@
- @min/max characters@
- @min/max lines of text@
- @min/max Y scroll position@
- @min/max X scroll position@
As well as introducing some other crucial features that make working with element queries manageable, like:
- scoped styles (using @$this@)
- a parent selector for CSS (using @$parent@)
- using values returned from JavaScript inside styles
- and more!
You can read more about how to use the EQCSS plugin here
The biggest change for me in the past year has been shifting my thinking from the BEM and Bootstrappy ‘classy HTML’ toward a cleaner more ‘element-first’ approach. Here are some examples of things built in the past year using element queries thanks to the EQCSS plugin:
- Blockquote Style
- Calendar
- Content Demo
- Counting Children Demo
- Date Demo
- Zastrow-style Element Query Demo Demo
- Flyout Demo
- Headline Demo
- Media Player Demo
- Message Style Demo
- Modal Demo
- Nav Demo
- Parent Selector Demo
- Pricing Chart Demo
- Responsive Tables Demo
- Scroll-triggered Blocker Demo
- Signup Form Demo
- Testimonials Block Demo
- Tweet-Counter Demo
- JS Variables Demo
- Responsive Scaling Demo
…I think it’s safe to say EQCSS is a working, viable answer to the question of Element Queries!