Problem
Võtsime kasutusele breakpointide mixinid TEDIst(näiteks balticagro/projects/common-lib/angular/assets/styles/_flex.scss#65)
@each $key in map-keys(variables.$grid-breakpoints) { @include breakpoints.media-breakpoint-up($key) { .flex-#{$key}-row { flex-direction: row; } }}tulemus:.flex-xs-row { flex-direction: row}@media (min-width: 576px) { .flex-sm-row { flex-direction:row }}@media (min-width: 768px) { .flex-md-row { flex-direction:row }}
TEDIs on endas ka tooling olemas mis neid klasse teeb, aga need panevad kõigile !important taha mis ei tundu mõistlikKüsimus tekib seoses .flex-xs-row klassiga. Kuna selle min-width on 0 siis @media queryt ei tekija selle sisu on sama nagu olemasolev .flex-row (tegelt seda pole kuna see on default aga .flex-column ja teiste puhul kehtib sama)Siis tundub loogiline et kaotaks ilma laiuseta klassid ära (nt .flex-column) ja kasutaks nende asemel.flex-xs-column ka tavaolukorras, kus eri laiustel ei ole erinevaid layoute
Solution
Examples and information
Project
Baltic Agro
Problem
Võtsime kasutusele breakpointide mixinid TEDIst(näiteks balticagro/projects/common-lib/angular/assets/styles/_flex.scss#65)
TEDIs on endas ka tooling olemas mis neid klasse teeb, aga need panevad kõigile !important taha mis ei tundu mõistlikKüsimus tekib seoses .flex-xs-row klassiga. Kuna selle min-width on 0 siis @media queryt ei tekija selle sisu on sama nagu olemasolev .flex-row (tegelt seda pole kuna see on default aga .flex-column ja teiste puhul kehtib sama)Siis tundub loogiline et kaotaks ilma laiuseta klassid ära (nt .flex-column) ja kasutaks nende asemel.flex-xs-column ka tavaolukorras, kus eri laiustel ei ole erinevaid layoute
Solution
Examples and information
Project
Baltic Agro