No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    tachyons

    Show & Tell
    4
    10
    2972
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • S
      smakinson last edited by

      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.

      1 Reply Last reply Reply Quote 2
      • S
        smakinson last edited by

        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!

        1 Reply Last reply Reply Quote 0
        • S
          spectrolite last edited by

          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.

          1 Reply Last reply Reply Quote 0
          • S
            spectrolite last edited by 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).

            1 Reply Last reply Reply Quote 0
            • S
              smakinson last edited by

              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!

              1 Reply Last reply Reply Quote 0
              • s.molinari
                s.molinari last edited by 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

                1 Reply Last reply Reply Quote 2
                • S
                  smakinson last edited by 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?

                  1 Reply Last reply Reply Quote 0
                  • S
                    smakinson last edited by

                    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.

                    1 Reply Last reply Reply Quote 0
                    • S
                      smakinson last edited by

                      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.

                      1 Reply Last reply Reply Quote 0
                      • rstoenescu
                        rstoenescu Admin last edited by

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

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post