V5 final final #705

mrmrs · 2022-08-15T06:07:12Z

v1-4 all had the goal of being as absolute light weight as possible. v5 adds a number of modules and a full color system
but still weighs in around 20kb gzipped. Given how much CSS has expanded over the last few years, this added file size I think is reasonable.

Major changes

All min-width breakpoints. No -ns scope anymore. Just s,m,l
Flipped scale direction for typography (1 is smallest)
Moved to x,y syntax instead of h,v
Expanded spacing scale
New support for CSS grid
New layered box shadows
New color system optimized for accessibility

TODO

These can likely be follow up minor bumps:

Make it easier to customize values
Generated gradients from color system
Utilities for text gradients
Additional shadow hovers
Add more options for grid-template-columns and flexible grids
Update docs (if only I could get them to build)

- New color system - New support for grid - Updated scales - New hover animations - Min width based media queries

dangayle

A lot of nice changes to bring things up to date. I question the mixture of modern CSS things along with remnants of IE support though.

dangayle · 2022-08-18T05:47:01Z

src/_border-colors.css

@@ -18,71 +18,8 @@

 */

-.b--black {        border-color: var(--black); }


What's the reason for removing all the border colors?

agreed – we use the border color classes often.

dangayle · 2022-08-18T05:47:59Z

src/_border-radius.css

@@ -51,12 +56,14 @@
  .br-initial { border-radius: initial; }
  .br-unset { border-radius: unset; }

-@media (--breakpoint-not-small) {
+@media (--breakpoint-small) {
  .br0-ns {     border-radius: 0; }


I thought you were removing all -ns styles

dangayle · 2022-08-18T05:50:22Z

src/_flexbox.css

   -m  = medium
   -l  = large

 */

-.flex { display: flex; }


moved to _display.css

dangayle · 2022-08-18T05:51:47Z

src/_floats.css

@@ -18,32 +18,32 @@
     n = none

   Media Query Extensions:
-     -ns = not-small
+     -ns = small
     -m  = medium
     -l  = large

 */





Maybe you should move the float clears here instead of removing them entirely?

dangayle · 2022-08-18T05:54:34Z

src/_images.css

@@ -5,7 +5,19 @@

 */

-/* Responsive images! */
+img { display: block; max-width: 100%; }


Do you think you should be changing a bare img tag like this? This could have unintended side-effects because the selector is too greedy

Agreed. I appreciate the principle of responsive by default, but this seems like overreach.
~~maybe it could be opt in? maybe .responsive-image to match the ones below??~~

dangayle · 2022-08-18T05:56:49Z

src/_normalize.css

@@ -24,6 +24,14 @@ body {
  margin: 0;
 }

+/**
+ * Render the `main` element consistently in IE.


You're adding all this grid stuff and aspect ratios, but still care about IE for this? Seems like you should just make a clean cutoff for the sake of consistency.

dangayle · 2022-08-18T05:58:10Z

src/_text-transform.css

@@ -13,7 +13,7 @@
     n = none

   Media Query Extensions:
-     -ns = not-small
+     -ns = small


missed an -s

dangayle · 2022-08-18T06:00:27Z

src/_type-scale.css

-  font-size: 5rem;
-}
-
-
 /* Type Scale */


Changing the type scale is the biggest breaking change in this PR, IMO. I hope this was well-considered. It makes sense though.

dangayle · 2022-08-18T06:03:38Z

src/_visibility.css

-@media (--breakpoint-not-small) {
-  .clip-ns {
+@media (--breakpoint-small) {
+  .clip-s {
    position: fixed !important;
    _position: absolute !important;


The underscore hack died with IE6, there's no reason that I'm aware of to keep this.

dangayle · 2022-08-18T06:06:01Z

src/_widths.css

@@ -51,23 +51,15 @@
 .w-10 {  width:  10%; }
 .w-20 {  width:  20%; }
 .w-25 {  width:  25%; }
-.w-30 {  width:  30%; }
-.w-33 {  width:  33%; }


Not a fan of removing thirds. At the Spokesman-Review, a ton of pages use three up layouts. The 30, 40, etc., are less important, but being able to have 33% is useful.

agreed. we use it a bit too.

srevenant · 2022-11-02T15:38:05Z

I love ALMOST everything but ... I think the switch from h,v to x,y is a mistake. Not only does it have a major impact on upgradability, it's largely a vanity change, without adding anything to usability (infact possibly removing some).

Just saying, as an avid fan of tachyons. I'll likely have to fork the branch to put it back for my project uses.

srevenant · 2022-11-02T15:39:33Z

Separately, what about 'row-gap' and 'col-gap' ? We've implemented this in our repo as gh and gv for col/row gaps, and ga for both.

matasaru · 2022-11-03T14:13:21Z

src/_border-radius.css

@@ -20,7 +21,7 @@
     -pill = 9999px

   Media Query Extensions:
-     -ns = small
+     -n = small


- Breaks align-items, align-self, flexbox, justify-self and order to separate files.

jzwood · 2022-12-22T16:29:25Z

src/_letter-spacing.css

@@ -4,7 +4,7 @@
   Docs: http://tachyons.io/docs/typography/tracking/

   Media Query Extensions:
-     -ns = not-small
+     -ns = small


Suggested change

-ns = small

-s = small

jzwood · 2022-12-22T16:58:10Z

src/_spacing.css

+     y = vertical
+     x = horizontal


h/v are great! I don't understand the motivation to change this 😢

PR to revert this notation change: #709

jzwood · 2022-12-22T18:47:40Z

src/_typography.css

@@ -4,27 +4,27 @@
   http://tachyons.io/docs/typography/measure/

   Media Query Extensions:
-     -ns = not-small
+     -ns = small


Suggested change

-ns = small

-s = small

jzwood · 2022-12-22T18:51:36Z

src/_utilities.css

@@ -3,7 +3,7 @@
   UTILITIES

   Media Query Extensions:
-     -ns = not-small
+     -ns = small


Suggested change

-ns = small

-s = small

jzwood · 2022-12-22T18:52:17Z

src/_utilities.css

@@ -22,7 +22,7 @@
 .mr-auto { margin-right: auto; }
 .ml-auto { margin-left:  auto; }

-@media (--breakpoint-not-small){
+@media (--breakpoint-small){
  .center-ns {


Suggested change

.center-ns {

.center-s {

jzwood · 2022-12-22T18:52:50Z

src/_white-space.css

@@ -3,7 +3,7 @@
   WHITE SPACE

   Media Query Extensions:
-     -ns = not-small
+     -ns = small


Suggested change

-ns = small

-s = small

jzwood · 2022-12-22T18:53:10Z

src/_widths.css

@@ -34,7 +34,7 @@


   Media Query Extensions:
-     -ns = not-small
+     -ns = small


Suggested change

-ns = small

-s = small

jzwood · 2022-12-22T18:56:49Z

src/_widths.css

 .w-100 { width: 100%; }

 .w-third { width: calc(100% / 3); }
 .w-two-thirds { width: calc(100% / 1.5); }
 .w-auto { width: auto; }

-@media (--breakpoint-not-small) {
+@media (--breakpoint-small) {


lots of -ns in this media query

jzwood · 2022-12-22T19:01:52Z

to summarize other comments -- ns is still erroneously present in many places.

➜  tachyons git:(v5-final-final) ag "\-ns" src
src/_white-space.css
6:     -ns = small

src/_typography.css
7:     -ns = small

src/_widths.css
37:     -ns = small
63:  .w1-ns {  width: 1rem; }
64:  .w2-ns {  width: 2rem; }
65:  .w3-ns {  width: 4rem; }
66:  .w4-ns {  width: 8rem; }
67:  .w5-ns {  width: 16rem; }
68:  .w-10-ns { width:  10%; }
69:  .w-20-ns { width:  20%; }
70:  .w-25-ns { width:  25%; }
71:  .w-50-ns { width:  50%; }
72:  .w-75-ns { width:  75%; }
73:  .w-100-ns { width: 100%; }
74:  .w-third-ns { width: calc(100% / 3); }
75:  .w-two-thirds-ns { width: calc(100% / 1.5); }
76:  .w-auto-ns { width: auto; }

src/_utilities.css
6:     -ns = small
26:  .center-ns {
30:  .mr-auto-ns { margin-right: auto; }
31:  .ml-auto-ns { margin-left:  auto; }

src/_text-transform.css
16:     -ns = small

src/_font-weight.css
21:     -ns = small

src/_floats.css
21:     -ns = small

src/_letter-spacing.css
7:     -ns = small

PR to fix these: #708

jzwood · 2022-12-22T19:26:37Z

This branch still has .cf { *zoom: 1; } and I'm pretty sure the original IE6 hack doesn't include an asterisk and can be removed? Thanks!! 😃

gobijan · 2023-07-04T08:44:25Z

I'd step up and be willing to fix this branch and also implement a darkmode. I already did this with my own "fork" of tachyons (darkmode and min-width-sizes). See it here: https://screenisland.com/assets/css/tachyons.css

I checked out the branch and found a few things that need work:

The index.html page for documentation needs to be adapted
Old ns class remains need to be removed and fixed (there is also a PR for this)
The compiled css (normal and minimized) do not include the color variables. I think they should be in there to make it easy to get going with just embedding the css file.

Is there something else that needs attention?
Can we bring tachyons back to life?

I often prefer to have a production ready single css file to drop in and forget about. Tailwinds toolchain is often too much.

Easily change grid cell size and color with --grid-color and --grid-size

Still want to tweak a few things here around configuring and scale structure.

Want to keep things very composable, flexible, and overrideable at multiple levels without bloating the library too to much. With variables I believe there is a lot of room for fun animations

gobijan · 2023-07-13T11:02:31Z

src/_variables.css

+  --gradient-color-15: var(--gold-0);
+  --gradient-color-16: var(--gold-5);
+  --gradient-color-17: var(--yellow-0);
+  --gradient-color-18: var(--yellow-5);;


The doubled semicolon needs to be removed.

Suggested change

--gradient-color-18: var(--yellow-5);;

--gradient-color-18: var(--yellow-5);

gobijan · 2023-07-13T11:04:25Z

src/_variables.css

+  --shadow-border-width: 1px;
+  --shadow-opacity: .25;
+
+  // Opacity scale


This is not a valid css comment (happens to me also way too often :D)

Suggested change

// Opacity scale

/* Opacity scale */

gobijan · 2023-07-14T12:53:15Z

There is currently a conflict with the .br class it is used for border-right and for border-radius.

0xdhrv · 2023-10-18T20:13:07Z

really looking forward this update <3

mrmrs added 3 commits August 14, 2022 22:09

Changes values and scales

87486e3

- New color system - New support for grid - Updated scales - New hover animations - Min width based media queries

Add compiled CSS

cd0b04c

Changes copy and updates color variable

7e1cf5a

dangayle reviewed Aug 18, 2022

View reviewed changes

This was referenced Aug 18, 2022

undefined media queries of screen size under 30em on tachyons.css #697

Open

[FEATURE REQUEST] Grid #692

Open

Fixes a few typos, corrects build order

b7fa28e

matasaru reviewed Nov 3, 2022

View reviewed changes

src/_border-radius.css

@@ -20,7 +21,7 @@

-pill = 9999px

Media Query Extensions:

-ns = small

-n = small

Copy link

matasaru Nov 3, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

-s ?

mrmrs added 5 commits November 8, 2022 13:36

Changes how flexbox properties are organized

0bcca0c

- Breaks align-items, align-self, flexbox, justify-self and order to separate files.

Changes to includes listed in main list

7892bbd

Adds partial for align content

9d60103

Adds new compiled source

a7d2dcd

Removes flex-direction from flexbox partial and adds to separate partial

bc56e32

jzwood reviewed Dec 22, 2022

View reviewed changes

src/_widths.css Outdated

@@ -34,7 +34,7 @@

Media Query Extensions:

-ns = not-small

-ns = small

Copy link

jzwood Dec 22, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

-ns = small

-s = small

jzwood reviewed Dec 22, 2022

View reviewed changes

jzwood mentioned this pull request Dec 23, 2022

Update file with flex direction reverse #656

Open

mrmrs added 3 commits July 10, 2023 11:17

Changes the grid to be configurable and use linear-gradient

8332d9a

Easily change grid cell size and color with --grid-color and --grid-size

Cleanup errant ns

fbd76e7

Changes the build to preserve CSS variables in compiled output

0cdc964

mrmrs added 11 commits July 12, 2023 13:34

Adds more transitions to links

c7bbfc6

Fixs typo in typography module

5d6e56f

moves variables to _variables

b535de2

Moves configuration to variables

a78e325

Comment out shadow-hover for now

2034ada

First pass at refactoring box shadows to use variables

57397aa

Still want to tweak a few things here around configuring and scale structure.

First pass at adding text-shadows

c97ceb6

Adds new gradients module. A few patterns to iron out still.

5324af7

Want to keep things very composable, flexible, and overrideable at multiple levels without bloating the library too to much. With variables I believe there is a lot of room for fun animations

Adds new manifest and output

591e63f

small box shadow tweaks

cc54682

Starting out on some quick docs

cf8f07b

gobijan reviewed Jul 13, 2023

View reviewed changes

mrmrs added 4 commits July 13, 2023 21:57

Adds a default configurable border-radius class

8c89990

Fixes comment breaking build

89edd4d

Adds configurable default border-width

bade6fd

Adds variables to outline module. Adds filter none to hovers.

5c2a4fa

mrmrs added 9 commits August 12, 2023 15:36

Adds gap column and gap row modules

f1e1fbf

Switch to container queries and a few other things

25e557f

Adds new module for all property

4af2f07

Adds new module for glass like effects

010de55

Adds new module for setting container-type

487d0b1

Adds scaffolding for backdrop filters module

6514f52

Design tweaks to values and scales

1971777

Add newly compiled CSS

3ff3dfb

Updates

6b8c744

mrkhdly merged commit 2486c58 into main Feb 12, 2024

mrkhdly mentioned this pull request Feb 12, 2024

Revert "V5 final final" #724

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

V5 final final #705

V5 final final #705

mrmrs commented Aug 15, 2022

dangayle left a comment

dangayle Aug 18, 2022

jzwood Dec 22, 2022

dangayle Aug 18, 2022

dangayle Aug 18, 2022

dangayle Aug 18, 2022

dangayle Aug 18, 2022

jzwood Dec 21, 2022 •

edited

Loading

dangayle Aug 18, 2022

dangayle Aug 18, 2022

dangayle Aug 18, 2022

dangayle Aug 18, 2022

dangayle Aug 18, 2022

srevenant Nov 2, 2022

srevenant commented Nov 2, 2022

srevenant commented Nov 2, 2022

matasaru Nov 3, 2022

jzwood Dec 22, 2022

jzwood Dec 22, 2022

jzwood Dec 22, 2022 •

edited

Loading

jzwood Dec 22, 2022

jzwood Dec 22, 2022

jzwood Dec 22, 2022

jzwood Dec 22, 2022

jzwood Dec 22, 2022

jzwood Dec 22, 2022

jzwood commented Dec 22, 2022 •

edited

Loading

jzwood commented Dec 22, 2022

gobijan commented Jul 4, 2023

gobijan Jul 13, 2023

gobijan Jul 13, 2023

gobijan commented Jul 14, 2023

0xdhrv commented Oct 18, 2023

		@@ -18,71 +18,8 @@

		*/

		.b--black { border-color: var(--black); }

	--gradient-color-18: var(--yellow-5);;
	--gradient-color-18: var(--yellow-5);

V5 final final #705

V5 final final #705

Conversation

mrmrs commented Aug 15, 2022

Major changes

TODO

dangayle left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jzwood Dec 21, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

srevenant commented Nov 2, 2022

srevenant commented Nov 2, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jzwood Dec 22, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jzwood commented Dec 22, 2022 • edited Loading

jzwood commented Dec 22, 2022

gobijan commented Jul 4, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gobijan commented Jul 14, 2023

0xdhrv commented Oct 18, 2023

jzwood Dec 21, 2022 •

edited

Loading

jzwood Dec 22, 2022 •

edited

Loading

jzwood commented Dec 22, 2022 •

edited

Loading