Applying classes from another stylesheet

[ArnoBuschmann]

Right now, in an element query, we define styles and I wonder: is there a way to apply classes from another stylesheet instead?

So let's say instead of:

@element ".minwidthpixels" and (min-width: 500px) {
  .minwidthpixels {
    background: gold;
  }
}

do something like:

@element ".minwidthpixels" and (min-width: 500px) {
  /* apply classes from another styles.css, for example .goldbackground*/
}

[Tommy Hodgins]

Hi @ArnoBuschmann

Currently all of the styles (CSS or otherwise) that you want to apply inside the element query needs to be present at the time the plugin loads the code. We haven't experimented with CSS @import but I don't believe the plugin would read styles from a stylesheet another stylesheet has imported anyway.

About the closest thing I could think of would be if inside an element query you wrote some JS that had a way to reading more than the sum of its parts. For example, for fun I wrote a tiny little element query that will parse class names written a special way and apply styles based on the class names:

@element '*' {
  eval('
    c = classList;
    for (i=0; i<c.length; i++) {
      p = c[i].split("-")[0];
      u = c[i].split("-")[1];
      u = ~~u ? u+"px" : u;
      style[p] = u;
    }
  ')
}

And a demo here: http://codepen.io/tomhodgins/pen/ggGYZJ

Hopefully that inspires you to build something :)

[ArnoBuschmann]

Hi @tomhodgins

Thanks for your quick reply :)

Interesting, I haven't known Quark before but the background of my question was indeed, if I would be able to combine http://www.tachyons.io classes (which they mention on the Quark page) with element queries.

[ArnoBuschmann]

@tomhodgins Ooops, haha, just realized, that you wrote Quark, so sorry mentioning "them as they". And also let me say, Quark itself is a very creative idea, congrats on that! :)

[Tommy Hodgins]

Hey @ArnoBuschmann no worries :D If you were trying to use a Tachyons-like set of class names, but relative to element-level breakpoints I think you'd need to take the Tachyon's classes that are normally inside media queries and convert those to element queries.

For example:

@media (min-width: 500px) {
  .small { width: 50%; }
}

Could be converted by replacing @media with @element '.container' and to produce:

@element ".container" and (min-width: 500px) {
  $this .small { width: 50%; }
}

With the $this present it will scope the rule for the .small to only affect those .small elements within a .container that matches the condition (in this case (min-width: 500px)).

If you want an example of what a set of CSS classes that normally might use media query breakpoints looks like when converted to element queries, check out the Element Query Grid classes I've made here for an example of how the breakpoints work: http://codepen.io/tomhodgins/pen/redKmW

Also, check out this video where I convert existing CSS using media queries to element query breakpoints - a similar process could be done on Tachyons CSS that contains media queries to 'liberate' the breakpoints from the browser's dimensions and tie them to an element's dimensions on the page instead: https://www.youtube.com/watch?v=ybCrzsglqXM

Hopefully these help point you in the right direction!

[ArnoBuschmann]

Thanks, @tomhodgins for your detailed explanations. Yes, that was my thought as well converting Tachyon classes to element queries and now with your hints it is perfectly clear how to do so :)

I checked the Tachyons css modules and obviously I have to modify just a few of them selectively, such as spacing (padding, margins), widths and so on.

So combining Tachyons and Eqcss looks like a great thing. Honestly, having a solution for element queries is so important, I am surprised, that there are no native css implementations yet. People in charge of the CSS specification should have been thinking about this years ago already.

I am going to experiment with Eqcss now further and hope especially for two things going well: one is the effect on server side rendering working out for SEO (I depend on isomporhic/universal apps), the other is render performance still being good (I read Eqcss can cause performance issues?).

But again, your work is groundbreaking, thanks for sharing it! :)

[Tommy Hodgins]

Thanks so much @ArnoBuschmann! I hope you have fun playing around with EQCSS. Feel free to join us in the Gitter chat room if you have questions using it, or want to share stuff you're working on :)

https://gitter.im/eqcss/eqcss

As for the performance issues - the performance hinges on how many elements are being affected by how many queries. Most devices and browsers (including mobile devices) can handle quite a bit before performance becomes an issue - but it's definitely something you'll want to test each time on actual hardware to see how fast it runs. Hopefully in the future we'll be able to leverage better things in the browser to write faster plugins, and also in the meantime I'm curious if you could compile EQCSS syntax to equivalent JavaScript.

It wouldn't be possible to 'flatten' EQCSS to CSS, but maybe you could compile to JavaScript that did the same thing. I've started this experiment by making an EQCSS compiler here, but it's still just a proof of concept, and I'm not sure the resulting JavaScript would run any more efficiently in the browser than EQCSS being interpreted in realtime by a JS plugin: https://github.com/tomhodgins/eqcss-compiler

Happy Hacking!