zicht / zss Goto Github PK

u-z--0 is missing and could come in handy for resetting the stacking order

Given the following config:

$zss--breakpoints: ();

the expected column width classes are not generated. For example, o-grid__col--12 is missing.

Cards with equal height et cetera.

Inspiration: https://zeit.co/blog/err-sh

Provide a simple implementation of the CSS Grid module to replace the flex grid.

• Move the current flex grid to a separate package, for backwards compatibility.
• Mark the flex grid as obsolete using @warn
• Refactor current grid classes to use CSS Grid.
• Consider extra util classes for columns and rows.

Column classes

CSS Grid is so powerful that ZSS would need to contain an enormous amount of CSS to harness all that power. So I'm thinking of providing just a few basic classes that can be used to setup a quick grid similar to our current grid. (They can even be placed in a separate SCSS file so they're entirely optional.) For custom grids, it's probably best to write a few classes in the project itself.

Possible options:

• Provide a few classes for an automatic responsive grid. For example, .o-grid--auto--3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } is enough for a responsive grid that has 4 columns on desktop. You don't need to use any extra row or column elements:

<div class="o-grid  o-grid--auto--3">
   <!-- Add cards here -->
</div>

• Add utility classes to position rows and columns on specific tracks. Something like this:

.o-grid__col--1/5 { grid-column: 1 / 5; }
.o-grid__col--2/end { grid-column: 2 / -1; }
.o-grid__row--2/4 { grid-row: 2 / 4; }

Sometimes there is the need to have a little whitespace on the left, following the flow of the columns. SO it would be handy if something like o-grid__col--offset--1 or o-grid__col--1--offset can be used.

Add documentation for all classes.

vertical-align: baseline;

The utility color uses: 'u-white'. with one dash, while the utility background-color uses a modifier-style dash: 'u-bg--white'.
Solving this will introduce backwards compatibility issues's, but maybe for a new release version?

e.g. margin-top ➡️ u-margin--t1.

Are the limits within these checks outdated? Perhaps these days we need more values (we have more devices and screen sizes than before).

Also, at first, I did not have a clue where these warnings during an NPM build were coming from. I Googled them and, of course, did not find anything. Maybe Zicht ZSS should be included in the description somewhere (for instance WARNING [Zicht ZSS]: ...)

And... The link to the details does not exist anymore because we've removed all the release/z.y.x branches.

WARNING: `$zss--spacing-scale` contains more than 8 values.        This is a design smell that should probably be fixed.        More details: https://github.com/zicht/zss/blob/release/2.1.x/errors/too-many-values.md
         on line 47 of node_modules/zss/src/dev/_strict.scss
         from line 143 of stdin

WARNING: $zss--border-radius-scale` contains more than 5 values.        This is a design smell that should probably be fixed.        More details: https://github.com/zicht/zss/blob/release/2.1.x/errors/too-many-values.md
         on line 138 of node_modules/zss/src/dev/_strict.scss
         from line 143 of stdin

$zss--breakpoints: (
   xs: 0,
   sm: 480px
);

This config should not output responsive utility classes with an @xs suffix.

Would like to have several transition classes that work in conjunction with the u-hidden class.

Current behavior:
Toggling the u-hidden class on an element will hide or show it, without any animation.

Requested behavior:
Toggling the u-hidden class on an element that also has a c-transition--slide will hide or show it, with a slide animation.

Perhaps it is possible to combine multiple transitions, i.e. c-transition--slide and c-transition--fade etc...

Some things should be configurable per project, for example how fast the animations should be.

This now only works on Firefox and Chrome, but not on Safari, iOS Safari and Chrome and not on Internet Explorer / Edge.

margin-top: auto, margin-bottom: auto, margin-y: auto

Resulting in multiple declarations.
This one can be placed outside the margin-loop :)

u-italic or something like it.. :)

Especially useful when uppercasing occurs on lower breakpoints; u-upper@xs isn't resettable on @md for instance.

The order in the outputted CSS of margins and paddings is not in order of specificity

<example follows>

So all ZSS-classes are available for print too.
Maybe something based on:

From: https://css-tricks.com/approaches-media-queries-sass/