How to create responsive utility classes in SCSS like Tailwind/Bootstrap?
I am working on a CSS library for our Design System. It contains a wide set of utility classes, similar to those of Tailwind and Bootstrap.
We are using SCSS to manage our CSS, which is separated similarly to Kevin's Beyond CSS course.
I am stuck creating utility classes with a prefix to determine how they should be presented at specific breakpoints.
In this example, the display property would be flexbox up until the medium breakpoint, it then becomes a grid.
Tailwind Example: https://tailwindcss.com/docs/responsive-design
Bootstrap Example: https://tailwindcss.com/docs/responsive-design
Where I am stuck is how best to structure and use SCSS to consistently apply these to each of our properties?
We are using SCSS to manage our CSS, which is separated similarly to Kevin's Beyond CSS course.
I am stuck creating utility classes with a prefix to determine how they should be presented at specific breakpoints.
// Example
<div class=" display-flex md:display-grid">...</div>
In this example, the display property would be flexbox up until the medium breakpoint, it then becomes a grid.
Tailwind Example: https://tailwindcss.com/docs/responsive-design
Bootstrap Example: https://tailwindcss.com/docs/responsive-design
Where I am stuck is how best to structure and use SCSS to consistently apply these to each of our properties?
Using responsive utility variants to build adaptive user interfaces.
