CODEWITHSUNDEEP
angularbreakpointsvmware-clarity
Peter Speltz
Peter Speltz

Reputation: 11

How do i change the responsive breakpoints in my angular clarity ui app?

I have searched and cannot find a definitive guide on how to do this .. I have a plain angular 5 app that uses VMware clarity ui and I generated it with angular-cli and use css. I want to change the responsive breakpoints in the grid here: https://vmware.github.io/clarity/documentation/v0.13/grid

I thought this would be a common task documented on VMware's clarity website but I have not had any luck with piecing together how to do this.

My .angular-cli.json styles section looks like this: 

"styles": [
        "../node_modules/@clr/icons/clr-icons.min.css",
        "../node_modules/@clr/ui/clr-ui.min.css",
        "../node_modules/nouislider/distribute/nouislider.min.css",
        "styles.css"
      ],

It works fine. But now i need to override the responsive breakpoints.

I've tried to add a main.scss and istalled node-sass and follow the guide here to override : https://vmware.github.io/clarity/documentation/v0.11/themes#examples

However, my app will not compile and I am not even sure if this is the correct approach. The error is : @import "~bootstrap/scss/normalize"; ^ File to import not found or unreadable: ~bootstrap/scss/normalize

Thanks for any help pointing me in the correct direction.

Upvotes: 1

Views: 523

Answers (1)

Jeremy Wilken
Jeremy Wilken

Reputation: 6974

You might be looking at different versions of the documentation, as 0.11 and 0.13 have different theme guidelines. Make sure you are using the same version of the documentation as you have in your code. 0.12+ only supports Angular 6.

If you just want to modify the breakpoints for the Datagrid only, I recommend just writing CSS that sets new breakpoints rather than trying to build the whole Clarity CSS. This becomes more difficult to maintain for just one override. I'm not sure what exactly you need to override, but best to use devtools to find the selectors that are modifying layouts based on media queries.

Upvotes: 0

Related Questions