typography-settings-breakpoints #156
Conversation
|
It makes sense! The only question is recipe to apply to existing projects, this changes breaking backward compatibility |
| /* stylelint-disable-next-line order/order */ | ||
| @media (min-width: 1921px) { | ||
| --site-max-width: 90.14rem; | ||
| --root-font-size: 21.3px; |
There was a problem hiding this comment.
this change depending on the project. It shouldn't be in kaizen-tg
| } | ||
| /* stylelint-disable-next-line order/order */ | ||
| @media (min-width: 1921px) { | ||
| --site-max-width: 90.14rem; |
There was a problem hiding this comment.
this change depending on the project. It shouldn't be in kaizen-tg
Moreover - you don't need to have rems in sources.
| */ | ||
| } | ||
| /* stylelint-disable-next-line order/order */ | ||
| @media (min-width: 1921px) { |
There was a problem hiding this comment.
You should use breakpoints from themename.libraries.yml file, but once again - it's a project specific change
| @db l { | ||
| --root-font-size: calc(16 * (1vw / 14.4)); |
There was a problem hiding this comment.
it's a project specific settings, shouldn't be here
|
|
||
| /* stylelint-disable-next-line order/order */ | ||
| @media all and (min-width: 376px) { | ||
| --root-font-size: 100%; |
There was a problem hiding this comment.
it's a project specific settings, shouldn't be here
| * Mobile design width is 375px, so everything below should be scaled proportionally | ||
| * font would be decreased | ||
| */ | ||
| --root-font-size: 4.278vw; |
There was a problem hiding this comment.
it's a project specific settings, shouldn't be here
There was a problem hiding this comment.
it is project specific.
but maybe move it all of this to separated css file.
and locate to kaizen-core.
it is very useful but should be optional.
| --outline-offset: var(--outline-size); | ||
|
|
||
| /* site sizes */ | ||
| --site-max-width: 1920px; |
There was a problem hiding this comment.
it's a project specific settings, shouldn't be here
There was a problem hiding this comment.
on my side it is like normal usual variable
|
|
||
| /* outline settings */ | ||
| --outline-color: blue; |
| --root-font-size: 2vw; | ||
| --base-font-size: 16px; | ||
| /* font-sizes */ | ||
| --font-size--xxxxxl: 48px; |
There was a problem hiding this comment.
All these custom font-sizes are project specific. Shouldn't be here
There was a problem hiding this comment.
maybe keep them. but they shouldn't be used by components.
and also reduce their amount.
There was a problem hiding this comment.
it is kind of every project starting settings. so few vars of that type can be here. just as boilerplate
artreaktor-niks
force-pushed
the
typography-settings-breakpoints
branch
from
383bf5b to
4d43b8a
Compare
|
Removed "start-kit" for variables and typography into another folder kaizen-basic-components |
artreaktor-niks
force-pushed
the
typography-settings-breakpoints
branch
from
4d43b8a to
c1575bc
Compare
This code contains default settings for the font size organization according to a lot of projects settings.
We can use this and edit it for our specific cases according to the design.