Replies: 1 comment
-
Hello @ameshkin! Thanks for reaching out. This is something you should be able to control in your USWDS settings configuration. To keep the compiled CSS small, USWDS does not output responsive variants for all of its utilities by default. You can find more information about the related responsive utility output in the responsive variants section of the display utility page. In the tables in that section, you can see that USWDS does not output responsive variants of However, you can turn both of these on in your USWDS settings configuration. The following settings should give you the output you are looking for: @use "uswds-core" with (
// Turn on responsive variants of .position- utility classes
$position-settings: (
responsive: true,
),
// Turn on the tablet-lg breakpoint for all responsive utility classes
$theme-utility-breakpoints: (
"tablet-lg": true,
),
); Can you try adding the code in the snippet above to your USWDS settings configuration to see if it creates the output you are looking for? Please let us know if you have any questions about this. Tip Please note that turning on "tablet-lg" breakpoint might have a large impact on your compiled CSS file. If you only need it for this one utility class, it might not be worth the performance impact of turning the breakpoint on. You can read more about optimizing your installation in the 3.0 migration guide. |
Beta Was this translation helpful? Give feedback.
-
When USWDS 2.0 compiled we had utility classes such as
tablet-lg:position-static
The responsive utility classes are missing, however, .position-static and other similar classes do exist in the compiled uswds file.
Were these responsive utility classes removed? Or is there something we could be doing wrong? I have made sure that the utilities is set to default so they should all be available.
Do I need manually include these types of utility classes?
Beta Was this translation helpful? Give feedback.
All reactions