3 ms·

I tried like every CSS framework/library out there and eventually I always come back to Tachyons. If you don’t know it, try it out! With all its great aspects,

by cygned 8y ago

I tried like every CSS framework/library out there and eventually I always come back to Tachyons. If you don’t know it, try it out! With all its great aspects, I still want to point two things that constantly annoy me; the default breakpoints are - imho - not enough for complicated responsive layouts; and when you start to use custom classes, you will find yourself in situations where breakpoint overrides don’t work properly anymore. I have yet to find a scalable solution for both.

mcrittenden 8y ago
I'm curious why you don't use Tailwind, which seems basically like Tachyons except with configuration for things like breakpoints?
- cygned 8y ago
  Basically because I haven’t looked that much into Tailwind yet. Maybe I should do so.
Kagerjay 8y ago
Here you go, these are IMO the best 3 sass mixins everyone should know for responsive web queries. I didn't find any articles on it its just the ones I found to be most useful. Use the mixins I defined below, I usually compact them, and use a macro to automatically paste it. mixin# is what I type. Add your custom classes needed for responsive layouts. My breakpoint defaults are based on bootstrap 4, with some added ones for larger desktop screens. 320px, 576px, 768px, 992px, 1200px, 1400px, 1600px You can pick any breakpoint you want, it largely depends on what content your dealing with. Sometimes I swap 576px for 600px, just be consistent. If you use tachyons, continue using tachyons first and foremost. But when it doesn't give you everything you need, put a custom CSS class on those HTML element(s) and define your own custom CSS as outlined below. ------------------------------------------------------------------ These mixins are for specifying the following - Anything above a certain screen width mobile-first-design - Anything below a certain screen width desktop-first-design - Anything inbetween two values hybrid I pick one approach for each component I work with, but generally speaking I use almost all mobile-first-designs media queries and maybe 1 desktop-first-design media query per given CSS class. I rarely use the hybrid approach, because it just means you should have used CSS grid over flexbox etc ------------------------------------------------------------------ @mixin screen-min($min) { @media (min-width: $min) { @content } }; @mixin screen-max($max) { @media (max-width: $max - 1) { @content } }; @mixin screen-minmax($min, $max){ @media (min-width: $min) and (max-width: $max - 1){ @content } }; ------------------------------------------------------------------ // USING THE MIXINS // Example - Writing a custom bootstrap-like container from scratch ------------------------------------------------------------------ .container { margin: 0 auto; width: 100%; @include screen-min(768px){max-width: 750px;} @include screen-min(992px){max-width: 970px;} @include screen-min(1200px){max-width: 1170px;} @include screen-min(1400px){max-width: 1370px;} @include screen-min(1600px){max-width: 1570px;} }

by cygned 8y ago

mcrittenden 8y ago

I'm curious why you don't use Tailwind, which seems basically like Tachyons except with configuration for things like breakpoints?

cygned 8y ago
Basically because I haven’t looked that much into Tailwind yet. Maybe I should do so.

Kagerjay 8y ago

Here you go, these are IMO the best 3 sass mixins everyone should know for responsive web queries. I didn't find any articles on it its just the ones I found to be most useful. Use the mixins I defined below, I usually compact them, and use a macro to automatically paste it. mixin# is what I type. Add your custom classes needed for responsive layouts. My breakpoint defaults are based on bootstrap 4, with some added ones for larger desktop screens. 320px, 576px, 768px, 992px, 1200px, 1400px, 1600px You can pick any breakpoint you want, it largely depends on what content your dealing with. Sometimes I swap 576px for 600px, just be consistent. If you use tachyons, continue using tachyons first and foremost. But when it doesn't give you everything you need, put a custom CSS class on those HTML element(s) and define your own custom CSS as outlined below. ------------------------------------------------------------------ These mixins are for specifying the following - Anything above a certain screen width mobile-first-design - Anything below a certain screen width desktop-first-design - Anything inbetween two values hybrid I pick one approach for each component I work with, but generally speaking I use almost all mobile-first-designs media queries and maybe 1 desktop-first-design media query per given CSS class. I rarely use the hybrid approach, because it just means you should have used CSS grid over flexbox etc ------------------------------------------------------------------ @mixin screen-min($min) { @media (min-width: $min) { @content } }; @mixin screen-max($max) { @media (max-width: $max - 1) { @content } }; @mixin screen-minmax($min, $max){ @media (min-width: $min) and (max-width: $max - 1){ @content } }; ------------------------------------------------------------------ // USING THE MIXINS // Example - Writing a custom bootstrap-like container from scratch ------------------------------------------------------------------ .container { margin: 0 auto; width: 100%; @include screen-min(768px){max-width: 750px;} @include screen-min(992px){max-width: 970px;} @include screen-min(1200px){max-width: 1170px;} @include screen-min(1400px){max-width: 1370px;} @include screen-min(1600px){max-width: 1570px;} }