-
Notifications
You must be signed in to change notification settings - Fork 677
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
v5 Suggestions #211
Comments
I would love to see more components. Ideally we could build out the components so that we have nice libraries to use with React, Ember and other libraries as well. |
Related: tachyons-css/tachyons-lists#3 |
@lachlanjc not really the type of thing I am interested in for v5. More interested in pushing forward documentation, performance, and making sure the design system is as cohesive as possible. Class names are quite trivial and can be customized by end users to fit their needs if they don't work for them. |
@mrmrs Agreed, they are pretty trivial (just wanted to mention it as a possible breaking change). Sorry I haven't been able to work on the new docs recently…I'll be getting back to it. |
Some things I think we could look at for v5/beyond Docs & guides
Modules
Misc
Kind of a long list…let me know whatever your thoughts @mrmrs 😀 |
agreeing garrensmith and lachlanjc:
|
translucent -> opaque hovers (opposite of dim): e.g. .hover-o-10 { opacity: .1 }
.hover-o-10:hover { opacity: 1 } etc |
@kentor will add something along those lines for 4.5.0 |
@lachlanjc I agree with your reco to apply breakpoints more sparingly. An alternative for the |
I would like to propose dropping the It is easier to quickly parse and understand a string of
The only potential downside that I can see is that we would have to escape the
|
@btnwtn Thanks for the suggestion, I'm glad you're having success with this with your team. Understand why some people like this but I think the downside you mentioned is quite significant and goes against some core Tachyons principles. Because of this, we won't be adding any class names that contain characters that need to be escaped. |
@btnwtn I actually really like that idea. While it makes sense for mrmrs to not incorporate it, I think it would be possible to create a fork with just that change that is always updated with the newest release of Tachyons. I'll edit this when I have a working fork with the "@" in . |
For the breakpoint nomenclature, I'd suggest: Knowing the media queries are mobile-first, you'd know that "-a" is a bottom-up query which can be overridden by -s, -m or -l. Although you'd never explicitly use the "-a" class, it creates context for understanding the other three classes. |
@billaddison thanks for the suggestion. We won't be changing these extensions as that would be a breaking change. For v5, we'll be dropping -ns and moving -m to a min-width only query. |
@mrmrs does dropping |
@dfosco nope, -m would then be equivalent to what -ns is now. |
@mrmrs I guess that makes a lot of sense (especially if you haven't grown very used to the 'previous' method). My only concern would be that it'd take a while for some to change all their |
.f7 {
font-size: 0.75rem;
} Thank you. UPDATE: it's in 4.7, woop woop. |
@sebastienbarre have been debating adding it as it seems heavily used. |
Maybe add media queries for viewport/screen aspect ratios? Say I build a full-bleed cover page (aka |
@sebastienbarre Think that should be handled with custom css. Adds too much weight to account for orientation queries and last I checked (although could be incorrect now) they aren't as reliable as queries based on widths. |
I don't know if this is the right place to say it but thank you for making this awesome project. I'm purely a developer with zero design skills. At day work, I usually work with designers and I admire them. I tried to mess With CSSand designing but it was bad. I learnt about tachyons about a month ago and it literally changed my life. I'm now don't have to touch a single css line but stills produce decent looking product. Thank you so much. But as a developer whi are obcessed with speed, embeding the whole tachyons stylesheet is kind of redundant when you are only use a portion of it. So I challenge myself to build a build system to reduce the size of tachyons based on each project. Here is my ideas:
No working version yet but I want to give a head up first. |
@thangngoc89 That's great to hear! Thanks for posting. If you'd like, you can join our Slack team to chat with other users/contributors: http://tachyons-slack-invite.herokuapp.com/ 💬 Also, there's an open PR for a custom build tool already in progress over here: tachyons-css/tachyons-css.github.io#46 It's not finished, but if you want to, maybe you could contribute there? 🛠 |
@lachlanjc I think that's not what I'm having in mind. My goal is to export css that tailored for each project. Only used selector will be included. For ex: if you only use "red" in you site, the other colors would be discarded. |
@thangngoc89 Depending on your build process purifycss might be what you are looking for. |
@subic thanks.I'll look into it |
Thanks so much for Tachyons! It's awesome. One addition I'd love to see are the "flex-grow", "flex-shrink" and "flex-basis" properties. Sometimes it would be useful to set them differently than the included ".flex-auto" and ".flex-none" allow. For example, when using ".justify-between" with three flex items, it would be helpful to be able to set the flex-basis of each item to zero so that differences in the widths of each item don't throw off the centering of the middle item. |
@ooloth there are some suggestions already http://codepen.io/dangayle/pen/NbmWza As I have read in every flexbox tutorial, you should not specify "flex-grow", "flex-shrink" and "flex-basis" seperately, just use the "flex" shorthand syntax. It shorter (for sure) and less error-prone since "flex" will override all of those 3 properties. |
@thangngoc89 it should be worth noting that |
@thangngoc89 If you only want to send necessary css/styles down the wire - I have found a declarative approach to be better suited for that. Removing unused css can be brittle in my experience. And it seems like kind of an anti-pattern anyways. If you are using react / jsx it's pretty easy to use something that allows you to keep a design system like the one in tachyons, while also allowing you to only declare needed styles for a given component / view. http://github.com/jxnblk/cxs is my favorite but aphrodite, stylematic, and many others will allow for comparable solutions. Tachyons is great but if you do want the absolute minimum of css - I'd suggest using a css in js solution. |
@NanaLan Hey! I see what you're going for, but I'm not convinced that using characters that need to be (very confusingly, in the case of Feel free to fork with that method (we encourage all kinds of variants!), or just use those extensions in your own projects, but I don't think we should add those to Tachyons. @mrmrs? |
I am seeing a bit of discussion here talking about improving the docs. I am thinking back to when I first started using Tachyons and what would have helped me get into it more.
Something else I would love to see more of is the incorporation of design into Tachyons. I am a developer at heart but I have learned design concepts and have become a much better designer because of Tachyons. Having Tachyons provide design best practices is awesome. The docs having some design concepts built in is awesome. If there are ways we can help devs and designers become better designers, that would be pretty amazing of an accomplishment. You have already done it for me. I am wondering how we can do that for others. Along with that, how can we make devs and designers better at accessibility? Contrast in a site is an example. A few other random notes.
|
Will v5 be backwrds compatible with v4 ? and will we have to do a lot of refactoring if we want to upgrade to v5 ? |
Here are some small classes I've had to add to my tachyons project that I think would be beneficial for the library: .overflow-scrolling-touch { -webkit-overflow-scrolling: touch; }
.b--currentColor { border-color: currentColor; }
.bg-currentColor { background-color: currentColor; }
.touch-action-none { touch-action: none; }
.top-100 { top: 100%; }
.right-100 { right: 100%; }
.bottom-100 { bottom: 100%; }
.left-100 { left: 100%; } I'm especially interested in the |
Some additions that I found useful for my project: // RESIZE
// Useful for textarea
.resize-h { resize: horizontal; }
.resize-v { resize: vertical; }
.resize-none { resize: none; }
// SVG
// Mix with tachyons color you can apply tachyons color to svg
.fill {
fill: currentColor;
}
// OVERFLOW WRAP
// Very useful when you deal with a lot of text
.overflow-wrap {
overflow-wrap: break-word;
word-wrap: break-word;
}
// WHITE-SPACE
// Very useful when you deal with a lot of text
.pre-wrap {
white-space: pre-wrap;
}
.pre-line {
white-space: pre-line;
}
// ABSOLUTE POSITION 100%
.top-100 { top: 100%; }
.right-100 { right: 100%; }
.bottom-100 { bottom: 100%; }
.left-100 { left: 100%; }
// ABSOLUTE POSITION 50%
.top-50 { top: 50%; }
.right-50 { right: 50%; }
.bottom-50 { bottom: 50%; }
.left-50 { left: 50%; }
// BORDER-ONLY
// Useful to create separator or material design input like
@mixin generate_border_only($name, $position) {
$positions: "top", "right", "bottom", "left";
.b#{$name}--only {
@each $p in $positions {
@if($p == $position) {
border-#{$p}-style: solid;
border-#{$p}-width: 1px;
} @else {
border-#{$p}-style: none;
border-#{$p}-width: 0;
}
}
}
}
@include generate_border_only("t", "top")
@include generate_border_only("r", "right")
@include generate_border_only("b", "bottom")
@include generate_border_only("l", "left")
// VISIBILITY
.v-hidden { visibility: hidden; }
// POINTER EVENTS
.pe-none { pointer-events: none; }
I do not understand clearly the naming convention but you can pick whatever you like |
Currently, Also, for In fact, would be nice if we had |
Here's my take on responsive:
with |
Better |
what's the fuss about tailwindcss? it's ugly and hard. |
Support -xl for logical resolution of 67.5em aka 1080px (width) and common screen width. |
@proyb6 Since |
This is going to cause some people to freak out probably as there is an old guard defensiveness about this, but I would suggest breakpoints should actually be migrated to be |
@onetrev safari 10 usage is just 0.09%. Even ie8 has more. |
Sorry @luizbills, I was more so suggesting a move to px based breakpoints (combined with explicit root px size) because it's just a better and more modern way now that all browsers support zoom properly (not because of Safari 10 support). Using 'em' is just a hold over habit from the old days. So you see new projects like Tailwind use px instead of em. It's kinda odd and much less clear to say you want a break point at 67.5em, when what you actually want is to break at exactly 1080px. |
@onetrev I read the article before. That’s not a major effort to change with the generator you can customise to your needs and serve a compressed static file in brotli to improve user experience. |
Is there any update on when v5 might be available? Thanks! :) |
Any interest in fluid / responsive typography? |
More granular flex grow, shrink and basis would be awesome! |
Proposal: Add classes to help standardize class namesGenerally, Tachyons class names include:
For example:
and
This is a good thing. With standard conventions, classes are easier to learn and remember. However, some classes are confusing because their names do not follow the general pattern:
Solution:Add new Tachyons classes. The new classes will use a naming scheme that is consistent with the rest of Tachyons, and will replace certain inconsistently named existing classes. Details:First, replace the numbered
Also, rename the
Finally, to ensure that prefixes are consistent, make these replacements as well:
Result:
Each new class name is different from all existing class names, so there are no conflicts with existing Tachyons code. For backwards compatibility, the old classes would remain available. However, they would be deprecated and possibly removed in a later version. |
Proposed changes submitted as a PR. Expanded type scale for
Expanded scale for
New names for
And finally, new names for
Thus, in new class names, the prefix The new classes all have different names from Tachyons v4 classes, so they would not conflict with existing code. PR: #636 |
would like to have dn-s for display none on small/mobile screen |
I vote to remove IE specific hacks, e.g.
|
After so much time on v4 I have a fairly good idea of what I want to do with version 5, but I'm open to suggestions as well. This is an issue to track said suggestions from the community.
The text was updated successfully, but these errors were encountered: