Can you have you own custom css stylesheet with semantic ui? - semantic-ui

I am on cloud 9 and I am trying to use semantic ui with my nodejs app using ejs I want to style the body tag from my own custom css but it won't work. How do I do it?

Related

Html Theme Integration in Vuetify

Can I import CSS and JavaScript files to Vuetify for importing some components? Or Can I put an entire theme that would be a basic HTML theme?
For example, I found a tool that is needed in the project can I integrate it with Vuetify such as Datatables, JS validation Plugins, or some statistical widgets, even an entire theme?
Vuetify is a UI CSS framework.
So it will grant you some CSS components.
You can add pretty much what you want to it. It will have the issue of needing an overwrite in specific places (CSS cascade/specificity mainly).
But otherwise, nothing special will block you from using it alongside other things.

How should I handle css in react app, when there is custom css retrieved in runtime?

I am working on ReactJS app (with Webpack) for webshop. This app retrieves some shop config from backend (as JSON object). This config contains customCss property that should override css of my webshop app. I am using css modules, but i think it is not easy to override css this way, so my question is what would be the bast way to handle css in my app, and override css with this property in the runtime?
React: css is Js
this the great idea you can go throw it for more guidance
https://speakerdeck.com/vjeux/react-css-in-js

How to inject the style of Vue components into iframe?

How to inject the style of Vue components into the iframe. (for both standard components and async compoents)
I'm making an vue app which is a html5 widget load with js.
In my app, most of js and css are using in iframes, and they rely on the parent window's objects.
Unlike most iframe apps, It dose not load with an url but is made by vue components (just like this forum thread https://forum.vuejs.org/t/render-inside-iframe/6419)
I'm using some workarounds such as cssinjs, inject raw css into iframe within js logic. It should split styles to a single out of .vue file in my way.
Is there a proper way to to that?
Some relates:
https://github.com/webpack-contrib/style-loader/pull/146
https://forum.vuejs.org/t/render-inside-iframe/6419

UI Skinning : Is it possible to support multiple skins in Angular 4 with View Encapsulation & Shadow DOM?

Since Angular uses view encapsulation is it possible to support multiple themes in Angular 2? I mean the user should be able to click on a button and change the color theming of the whole application.
PS: I am using Angular 4 with angular-cli with SASS support.
Currently I am able to generate static themes with a _variable.scss file which is imported in each component's sass based stylesheet.
But, my requirement is end user should be able to choose his own color theme.
Ideally in non-angular websites I would just add a new compiled css file to the <head> tag using javascript. Since shadow DOM generates separate style for each component and adds them in to the <head> how I change the style for each component dynamically?
you can try the css method var(), for more details can read this blog

Dynamic styles with bootstrap and css modules

I have a React project that is using CSS modules (for components) + React-Bootstrap with CDN-hosted CSS.
I have a requirement that when my app loads (per user), I make a call to an endpoint to get a dynamic style guide.
For simplicity, it would be something like this:
{
"color_background": "#edeae3",
"color_error": "#9e2d2d",
"color_highlight": "#69b5ce",
"color_success": "#498e49",
}
The app should then be rendered in those colors. I know there is the ability to customize static Bootstrap styling (e.g. http://getbootstrap.com/customize/), but I'm not sure how to do it dynamically.
Any guidance would be appreciated.

Resources