tachyons

smakinson

Hi all,

I am just working on my first Quasar project ( and its turning out nicely ). I thought I’d share this incase it is useful to anyone. I have been using tachyons for most of the styling:

http://tachyons.io

and I have found it to be quite nice for layout in most cases. I notice Quasar has a few css items that would be duplication such as some colors, etc. I thought I’d share it incase it might be useful as an addition to the framework or to others for their layout.

smakinson

I have a follow up thought on this that I’d appreciate some input on. I like using tachyons so I am trying to determine the best way to integrate it and also take advantage of some Quasar css tools. I’d also like to if at all possible not change the webpack, build, etc details from the quasar template for this.

Areas I am thinking about:

tachyons has the small/medium/large breakpoints
tachyons has some colors that are similar but do not match up to the palette in Quasar.

I think the other portions of tachyons have no conflicts, though I have come across some instances when they don’t take precedence over an existing style if used on a component, at least in 0.13.9.

What I am thinking of is taking advantage of having access to a bunch of stylus variables in Quasar but still use tachyons for most/all of the layout or perhaps use the Quasar flex-css rows/cols.

I’d appreciate some feedback on this set of steps:

Find the closest colors in the Quasar palette to the ones in tachyons and change the tachyons colors to the Quasar values.
In src/themes/app.variables.styl make the following overrides:
- Set $breakpoint-sm, $breakpoint-md, $breakpoint-lg to match tachyons
- Adjust $breakpoint-xs to some reasonably value lower than $breakpoint-sm

My thinking is to get the breakpoints matching up so things are consistent when they adjust as well as to allow the use of the stylus variables in my own styles.

I do frequently find a breakpoint can be useful a bit between the small and medium in tachyons for some designs, so if any new stylus vars can be defined in the overrides file I could add those there as well. I assume they can, but I haven’t tried it as of yet. Or I am somewhat tempted to consider using $breakpoint-xs as the tachyons small and making the $breakpoint-sm be my in-between breakpoint, but the inconsistency may or may not get in the way.

Anyway, I think thats the bulk of it. Not much really, but I’d appreciate any input on potential side effects I may not be thinking about. Thank you!

spectrolite

The less you change/rely on quasar’s setup the better, on so many levels. I would try and adapt tachyons if possible, esp. regarding breakpoints.

spectrolite

If modifying tachyons is too messy or undesired for some other reason, something that has this effect would probably work great as a bridging tool:
$tachyon-breakpoint-small = $breakpoint-xs
$tachyon-breakpoint-medium = $breakpoint-sm
$tachyon-breakpoint-large = $breakpoint-xl (or md or lg depending on your use case)
and then always use quasar breakpoints when needed explicitly, to avoid confusion.
Maybe I’m missing something but I hope this point of view will help you. (And btw this above was pseudo-code just to illustrate my point, but I’m sure you got that).

smakinson

Thank you for the input. The top goal for sure is to not mess with quasars setup so its easier to handle updates, etc. I have started to do this a bit and as I was trying to match colors and realized some just don’t really match I realized that I should probably just add the tachyons colors to quasar, I can even just use the same names since the only ones that conflict are black and white and those are well, just black and white

If I don’t match up all the breakpoints I think there will be some awkward times with the sizing changes. For the most part the sm/med/lg of tachyons works well, I seem to wish I had an in-between sm/med for more interesting design and if I am trying not to use a hamburger menu. The thing I’m wondering is how many tachyons components the break points affect. I assume, the layout, flex-css, tool bars.

Also since the css is run through purify-css in 0.14 I am assuming that so long as I bring it in like the them in main.js all the unused tachyons stuff will get ripped out. Woo!

s.molinari

Out of curiosity, what else is it that tachyons has, that is missing for you in Quasar?

You mentioned these

tachyons has the small/medium/large breakpoints
tachyons has some colors that are similar but do not match up to the palette in Quasar.

Which Quasar has or offers ways to get around itself.

Breakpoints: http://beta.quasar-framework.org/components/flex-css.html#Responsive-Design
Theming your own colors: http://beta.quasar-framework.org/guide/quasar-theming.html

Scott

smakinson

The things I mentioned above are the overlap. I like all the short classes for adding padding, margin, font weights, etc. It allows a lot of layout without writing any additional styles.

For example: http://tachyons.io/docs/layout/spacing/

I went ahead and started to copy the colors over and just allow myself both sets of variables since there is no harm, but trying to override the breakpoints to match up in app.variables.styl they don’t seem to be actually overriding the defaults. I could go the other direction I suppose and change the tachyons breakpoints to match quasar, maybe that is better anyway. Do you know if there is an issues in 0.14 with the overriding of the stylus vars?

smakinson

I do get the breakpoint var with my new value if I import it into a vue file, but it doesn’t seem to be picked up by the flex-css styles.

smakinson

Here is what I am going to experiment with on the break points. I won’t be able to tell for sure if I like the way it works out until I build with it, but it seems reasonable I think.

I went ahead and moved the closest breakpoints from quasar into tachyons and added this to app.variables.styl

// Media queries matching the quasar breakpoint adjusted tachyons.
// --------------------------------------------------
// The default tachyons small is close to the quasar xs so its used for the -ns suffix.
$media-query-ns = s('screen and (min-width: %s)', $breakpoint-xs)

// The quasar small can serve as an in-between for custom css.
// Its suffixed as sm-md to indicate its in between.
// No tachyons class names available for this one.
$media-query-sm-md = s('screen and (min-width: %s) and (max-width: %s)', $breakpoint-sm, $breakpoint-md)

$media-query-m = s('screen and (min-width: %s) and (max-width: %s)', $breakpoint-xs, $breakpoint-md)
$media-query-l = s('screen and (min-width: %s)', $breakpoint-md)

// Add an extra large to match quasar.
// No tachyons class names available for this one.
$media-query-xl = s('screen and (min-width: %s)', $breakpoint-lg)

And then where @import '~variables’ is used I can for example:

@media $media-query-large
   .some-class
      color: #fff

One downside is if I use flex-css for my grid I need to keep in mind the missing tachyons equivalents on the -sm & -xl class names and that the tachyons small corresponds to the -xs flex-css class names.

I hope you all don’t mind me thinking publicly here Comments are welcome.

rstoenescu

Did you take into consideration point #2 in http://beta.quasar-framework.org/guide/quasar-theming.html#Build ?