Enjoy the well deserved vacation!!
Posts made by 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.
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?
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!
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!
Breadcrumbs and text when small
I noticed that if you goto: http://beta.quasar-framework.org/components/breadcrumb.html
and drag your mouse to highlight the breadcrumbs in the phone on the right, the text that appears to be hidden ( because it is white ) is actually there. Is this a bug that I should file? I assume it should be clipped.