Some of Vuetify's display helpers (https://vuetifyjs.com/en/styles/display/#display) collide with Tailwind classes.
In Bootstrap, fore example, there's a way to disable (=not include) utility classes in a custom build.
Searched in the docs and in vuetify-loader's docs for a way to do it, couldn't find one - is it possible?
I found this article that helped me remove some of the Display helpers (utility classes) from Vuetify. Over here you can see all the available utilities you can disable.
While I'm not aware of any way to disable Vuetify's Display Helpers, it is possible to prevent collision by prefixing Tailwind's classes. You can read about it in this thread on Tailwind's GitHub.
Related
I am trying to find an answer several days but not able to.
How can I add custom styles just like in Ckeditor 4 (For example, using CKEDITOR.stylesSet.add) ?
Thanks
Edit the CkEditor css file in its entirety, that can be found at This guide
From the page:
By default, content styles are loaded by the editor JavaScript which makes them only present
when users edit their content and this, in turn, usually takes place in the back–end of an application. If you want to use the same styles in the front–end, you may find yourself in a situation that requires you to load CKEditor just for that purpose, which is (performance–wise) not the best idea.
To avoid unnecessary dependencies in your front–end, use a stylesheet with a complete list of CKEditor 5 content styles used by all editor features. There are two ways to obtain it:
By taking it directly from this guide and saving it as a static resource in your application (e.g. content-styles.css) (recommended).
By generating it using a dedicated script. Learn more in the Development environment guide.
Load the content-styles.css file in your application by adding the following code to the template:
I am new to Spartacus and I am trying to add more elements to the component AddedToCartDialogComponent. Not sure how I can customise/extend this component.
I need to extend the typescript and also the template which is the view for this component.
Probably, your best bet is reading through the Spartacus docs about customizing components here. Also try to find your answer in other places in our docs.
If your question was about extending components from Angular perspective, you should probably first read Angular docs
I'm developing a Vue app using UI Kit which implies using various custom attributes like uk-grid, uk-icon, uk-navbar etc (in Vue single file components' templates). For each one, IntelliJ gives me a warning like
Warning:(7, 52) Attribute uk-icon is not allowed here
How can I tell IntelliJ not to do this? Googling the warning haven't brought any sane results which makes me think there's no ready-to-use package for this (for this particular UI Kit), so the question is: how to make Idea not to warn about a custom list of attributes? But I'll be glad to be wrong and if there is a better solution, please let me know.
Update: like lena has suggested, pressing alt+enter suggests helpful options, including adding attribute to the list of custom attributes. However, wildcard suggestion didn't work for me: the below screenshot illustrates settings that make v-localize attrbute be recognized, but uk--prefixed attribute are still highlighted with warning:
You can add uk-* attributes to Custom HTML tag attributes list in HTML | Unknown HTML tag attribute inspection; the easiest way to do this is using Add to custom HTML attributes quickfix available on Alt+Enter:
Note that IDEA recognizes Vuikit components and directives out of the box - did you consider using it instead of pure UIKit?
I've started a Microsoft fabric-react, using the Typescript-React-Started provided by Microsoft here.
Although the excellent Fabric-react documentation available here, i wasn't able to find any documentation on how to style the fabric-react components.
For example, the Microsoft documentation for the Commandbar component is available here.
The default theme renders the Commandbar background with a gray color, with blue command buttons.
From what i could understand, Microsoft provides a Themes/Styling system.
Unfortunately, i wasn't able to find any start-to-end example, on how to change the default theme, or create a custom theme.
So, my questions are:
How can i change the default theme, and apply a specific theme on a fabric-react component?
How can i create a custom theme?
Thanks for using Office UI Fabric React! Have you had a chance to read these wiki pages regarding styling and applying a theme to components?
https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling
https://github.com/OfficeDev/office-ui-fabric-react/wiki/Theming
https://developer.microsoft.com/en-us/fabric#/components/themes
You can also generate your theme via https://developer.microsoft.com/en-us/fabric#/styles/themegenerator then apply it using the method described in the page(s) above.
This is a copy of Microsoft response on Github, so the merit is not mine :)
Current
Use loadTheme to provide component wide colors and fonts.
Use styles prop for components for one-off tweaks.
If you'd like to provide a standard styles override for a specific component type, you can use Customizer to provide scopedSettings to pipe in standard overrides. (Not this is experimental and will likely change.)
Legacy className / global css support still works, which is to use className to provide your own class overrides, and to reference global class names as needed. Though this is an option, this is is not recommended, as it's very fragile and suffers from numerous issues (selector specificity, no build time validation, easy to break, etc.) We're considering removing the global class names completely in a future major release.
In progress
Our goal is to move all customization into the theme; this lets you rev your design over time. We are tracking a bunch of work here: https://github.com/OfficeDev/office-ui-fabric-react/projects/26
The problems we've recognized
Customizer for providing contextual overrides is too generalized, and doesn't allow us to have theme-specific logic like caching themes.
ITheme should be expanded to allow you to pipe in component-specific overrides, in addition to other site-wide settings like sizing, shadowing, and animations.
Passing in styles is not a good contract; you need to know which component parts to target for the styling (sometimes multiple parts) and sometimes which selectors to override (do i use a pseudo element here? is my selector not specific enough?)
No support for color schemes (think the "dark header", where the Toggle should look different than in the "light content area".
Solutions to shortcomings
Expose a dedicated ThemeProvider component. We will still have loadTheme for providing the default theme, while ThemeProvider can switch out scheme, or even theme in a box.
Add support for color schemes.
Introduce style variables, which abstract the common knobs from full styles definitions. This lets you not worry about parts or selectors, and simply focus abstractly on what the component should look like. We have this experimentally in our Button and Toggle refactors in experiments.
I am currently building a WP site with the Optimizer theme. It's an academy website, using the Sensei plugin. I am having an issue with the wrappers, and although they wrote this article on how to fix it, I can't figure it out.
Hopefully I'm saying this right.
Wordpress hooks are triggers that allows you to manipulate a theme or plugin. You can remove, add or replace code on certain Worpress events/calls, without changing the original code.
There are two kind of hooks. Action hooks to manipulate the Worpdress code. Filter hooks to manipulate the output of Wordpress (text, data, links etc.)
You can use hooks by creating Your own functions in the functions.php file of your theme.
The Sensei article:
Your theme creates a wrapper with html divs around the content. The opening divs are after "getheader();" The closing divs are before "getsidebar();", if there is no sidebar then before "getfooter();"
Sensei puts a wrapper around his content as well. This can mess up your theme wrapper.
To fix this: Sensei has actions hooks to replace the wrapper of Sensei by your own theme wrapper.