I want to create app that have this usecases:
Load dynamically style from some theme.
End user can define some theme with html, css, ... and install on the app.
After some research for choosing best solution for this problem we find out for state management we need some library or framework like Redux or mobx. For dynamically styling we decide to use fela.
this is supposed to be a shop app that can have different themes. user can change the theme and customize it to some degree. that's why we need to have some sort of dynamic style loading. components are the same.
Related
I have attached an image of the demo that is displayed on the main page for Material UI. I really like this theme and I want to use one like it with MUI to create my web application. Is there any way that I can use this theme (style my components like this) or do I have to replicate it from scratch?
You can find the code for that theme here: https://github.com/mui/material-ui/blob/v5.8.0/docs/src/modules/brandingTheme.ts.
You can see it used here: https://github.com/mui/material-ui/blob/v5.8.0/docs/src/BrandingProvider.tsx#L23.
I've created a code sandbox that demonstrates using this theme: https://codesandbox.io/s/mui-docs-theme-example-0mys5d?file=/index.tsx. brandingTheme.ts in the sandbox is an exact copy of the file in GitHub. It is then used from within index.tsx in the sandbox. demo.tsx just shows a few different components in order to see the theme in action.
If you want to implement your own fancy theme, you can simply customize the MUI theme using theming or even modify components' style like this!.
Take a look at premium template if you want to buy something.
There are also a few free themes you may find just but googling like:
Free React Dashboard...
We have recently switched to a React SPA site. From the old site, we have some documents (invoices, quotes) that we generate as HTML files that we then print as PDFs. These templates are designed by a third party and have their own separate CSS files that have nothing to do with our React SPA's CSS. After the shift to React, I added some of the templates as React-friendly modules and converted their CSS to JSS. It worked but only partially as a lot of styles are overridden by the React SPA's CSS so the results are not consistent. We don't have the resources to redo all templates from scratch and this isn't something that we should be doing anyway - ideally, we want to be able to just load in the CSS that we get from the designer and only play around with the HTML/JSX (happy to use a tool to convert CSS to JSS but no custom editing). Is there a way to somehow ignore/unload all app CSS when loading a specific page, and only use a specific CSS/JSS file (in our case makeStyles), then bring it back to normal when another page is viewed?
I've built an Aurelia plugin and I'm using some styling there. My problem comes when I want to use this plugin in my existing Aurelia app. The styles are imported at the head so all my Aurelia application is using them.
I've seen the Shadow DOM functionality, the problem is I'm using Bulma so I need the individual components to get styles from Bulma, but at the same time, I don't want the rest of my Aurelia app to get those styles from Bulma.
I don't know what the best option is, so I'd appreciate some help here.
Thanks.
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.
I found this Bootstrap UI from http://startbootstrap.com/template-overviews/sb-admin-2/ and I would like that my Yii2 application would look like it.
How do I integrate that sb-admin-2 UI to my Yii2 application? I already have a UI and I have tinkered the html and css of my app but I still find it dry and boring. That's why I want to use the sb-admin-2 UI from Start Bootstrap but I have no idea how to start.
I have read the instructions at their GitHub page but I still have a hard time understanding it.
Your help would be of great help. Please let me know your thoughts.
I think that perhaps you are mis-understanding what a bootstrap theme is. It is simply a collection of css rules that you can apply to your content to make them look cool. You have to generate the content yourself. A bootstrap theme is not a module, or widget, or anything else like that.
To use it you just need to make sure to include the stylesheet, then apply the classes you want to the elements you have in your admin views. Have a look at the demo; it shows you all the different styles you can apply from the theme.
Yii have a guide to including css and js assets.
You can try Yii2 SB Admin 2
Installation
composer require nullref/yii2-sb-admin-2 "*"
For integration new Theme in Yii2 you must do:
create asset bundles for each functionality (forms, tables, wizards)
create extended widgets for theme
extend ActiveFileds - very complicated!!!
create layouts
All this pieces, theme (css, js, imiges ) include in new module like Theme[Name]
Also very nice, if implement theme in Gii templates.