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.
// 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?Responsive Design - Tailwind CSS
Using responsive utility variants to build adaptive user interfaces.
1 Reply
i will give you a list of some steps you can follow:
- define what is the size for all devices:
null, xs, md, l, xl, xxl or something
- define which properties you want
- loop through the sizes
- set the property inside a @ media query
that should get you something sorta configurable that is pretty rigit, but usable enough