I want to use the Bootstrap theme with paper elements in a Polymer project.
Can I still use the paper elements but turn off their (Material Design) styling globally?
I don't think it's paper-friendly to do that: you should see paper as a bootstrap-like implementation of material design in polymer.
Why don't you simply use custom native elements with polymer and style them as you wish (bootstraporwhatever) ?
Related
I am relatively new to using angular material and it has taken a bit more work to use than I have faced using some other css frameworks like PrimeNG, Fomantic/Semantic UI. Most recently I have used PrimeNG which optionally comes with its own suite of utility classes in the form of the primeflex package. It does not appear that material has this (due to them leaving it up to you to decide i suppose) and I am therefore opting to use primeflex WITH angular material components. Is there an existing suite of material css classes that i can use instead, like simple classes that just give flex styles, height: 100%, etc.
My other problem is that I would like to tap into material in order to give my components background/font color styling relative to the current theme but I have not been able to find a 'helper class' that applies the current primary/accent/warn color to an element given the current theme. Any references to documentation are highly appreciated.
I assumed it would look something similar to:
// my-theme.css
#use '#angular/material' as mat;
.my-primary-text-class {
color: mat.$primary-text-color
}
or something similar?
I'm new to Material UI. When should I use props (in the .jsx script itself) and CSS (separate CSS stylesheet) to style MUI elements? Do I still need to use the CSS stylesheets for MUI elements at all, e.g. use CSS or sx={{}} prop? Or should it be left for non-MUI elements only?
While I understand MUI provides us with the template to make style changes using props, I also understand that we should typically follow a separation of concerns, hence the question.
Thanks a lot!
So you can check this out in their docs below.
https://mui.com/material-ui/customization/how-to-customize/#2-reusable-component
I personally wouldn't use CSS with MUI. You can use either CSS or the sx prop to override styles, however it feels like sx is the preferred method. Using CSS requires targeting the specific classname and nesting your classes which I find is quite a lot of work for what is meant to be one-off customizations.
If you wanted to change specific MUI components, I still wouldn't use CSS as you can just create your own themes with the ThemeProvider.
The idea behind MUI is a CSS-in-JS solution so you're sort of doing away with the concept of the traditional "separation of concerns". If you prefer to set up your projects that way, things like Tailwind or SASS/SCSS are more suited to that.
So in summary, yeah I'd only use CSS with the non-MUI components, sx prop for quick style overrides, and the ThemeProvider for global style changes.
I am currently developing a web-application with Vaadin. Vaadin components are using the web-components standard, so the components DOM is capsuled in a shadow dom.
Now I would like to apply a custom style for all the scrollbars in the application.
This is possible using the CSS ::-webkit-scrollbar selectors (if the browser supports it).
However, this styles don't apply to the shadowDOM, so if one of the web-components shows a scrollbar (for example the vaadin-grid), that scrollbar does not use my custom style.
Is there a way to apply this style to all scrollbars on the page without adding the custom style to the shadow dom of every web-component?
Is there a way to apply this style to all scrollbars on the page without adding the custom style to the shadow dom of every web-component?
No, there is no way do that. That is specifically what web components are purposed to do. I.e. to protect internals from the direct access. So customization of protected elements is possible only when the web component offers some sort of API for that.
In Vaadin the typical approach is themable mixins / style modules which you can import for components in format like below
#CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-grid")
As pointed out by Jouni, you can register a style sheet that applies to all Vaadin components, with themeFor="vaadin-*"
#CssImport(value = "./styles/my-styles.css", themeFor = "vaadin-*")
Which helps the burden.
I am new to Tailwind CSS and stumbled across the tailwindcss-forms plugin.
Why exactly do we need that? Does it just provide new classes that I have to apply manually or does it by default apply some classes to forms?
Can't I just apply classes from the regular Tailwind CSS to my forms?
What's the difference to e.g. tailwindcss-custom-forms?
Tailwind CSS is not exactly providing solutions for form elements like Select-tags and co. that work on all major browsers.
If you apply those from Tailwind CSS, you may either add your own elements (e.g. arrows) for a Select tag, inputs, and co. or work with CSS. You can also look on how developers solved these issues with examples from Tailwind Components.
Tailwind CSS Forms was made to make this possible and it works with Tailwind CSS 2 while Tailwind CSS Custom Form is deprecated.
I am using Primefaces 5.0.I want to use or bootstrap css to Primefaces custom components like List, table, selectOneListbox.
I am to apply css to normal component like button, link etc.
It's possible, but due to reason that a internal structure of Primefaces's components are different from a plain HTML components with which Bootstrap supposed to work you will need to make hard job to accomplish that. You will need to debug every Primefaces component to see its internal structure and change Bootstrap's css file that it will correspond to internal classes of Primefaces's component.
Actually you have three alternatives (maybe more):
Like BalusC mentioned, Primefaces has its own implementation of Bootstrap theme: you can see it here: http://www.primefaces.org/themes IMHO, best option
Use Bootfaces JSF library: http://www.bootsfaces.net/ Pay attention that it's pretty new library and possible buggy. There isn't big community support like for Primefaces library.
Make you own Composite (or Custom) Components with desired structure and styling.