search

vmware-archive / clarity

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.
http://clarity.design
MIT License
6.43k stars 762 forks source link

Document how to import only part of Clarity SCSS into a project #87

Closed JohannesRudolph closed 6 years ago

JohannesRudolph commented 7 years ago 
[ ] bug
[ ] feature request
[x] enhancement

Expected behavior

Users of clarity should only have to pull in the css they need (e.g. that of components actually used). This improves page load times and reduces parsing overhead.

Actual behavior

Current setup instructions say we should include the full clarity-ui.min.css @ ~800kb IIRC. Source: https://vmware.github.io/clarity/get-started/index.html#howToUse , section 2b.

I'm not sure this would be easily doable, but using SCSS @imports the clarity-ng components could reference the corresponding clarity-ui scss files.

mathisscott commented 7 years ago

A few challenges here:

• Many of the SCSS files are dependent on other files, so delivering them as individual files may bloat the resulting deliverable • Breaking up the generated CSS may make using our HTML/CSS deliverable prohibitively painful

The minified CSS is a convenience for those who either do not want or cannot build their own minified CSS from SASS. If users wanted to customize the baseline, font, color scheme, or any number of variables included in the Clarity SASS, they could do so by not depending on the clarity-ui.min.css package and building their own CSS from the included Clarity UI source files.

The way the Clarity scss is packaged, it should be pretty easy to pull in, say, just the dropdowns.clarity.scss file and it will then pull in its own dependencies and load them if they have not already been loaded.

Maybe instead of breaking everything up we should include more documentation on custom implementations (overrides and building with only a portion of the SASS/SCSS files)?

kevyworks commented 7 years ago

I was asking my self the same way.. I wish clarity had choosen vanila javascript to it though. But its quite clean.

getcodenow commented 7 years ago

I would appreciate having more documentation on custom implementations for overriding the default SCSS files.

My use case is that I generally like the default styles but I want to be able to easily customize the styles and then rebuild my app reflecting my customization. I tried doing a full copy and rebuilding all the dependencies, but I started running into issues with getting bootstrap-scss dependencies working.

What is your recommendation on the best way to override the default styles to customize my app?

jaffoneh commented 7 years ago

@getcodenow that's a pretty good suggestion and something we've been considering for a while. We do have the ability to override those styles when needed, we just need to document them/better. CC @mathisscott as we consider this.

getcodenow commented 7 years ago

@jaffoneh Great to hear. I'll keep a look out. Thank you for the feedback.

Shijir commented 6 years ago

Closing this issue now as we document this issue in the Theming section of our webstite. https://vmware.github.io/clarity/documentation/v0.11/themes

github-actions[bot] commented 4 years ago

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.