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.
Related
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?
New user to 3rd party bootstrap templates for Ember and need help.
I purchased the INSPINIA admin template from www.wrapbootstrap.com. The download comes with multiple pre-created projects with INSPINIA built in (e.g., Angular, Rails, etc.) but not for Ember. I reached out to the creator to see if they could include a project for Ember and they said no.
So, I am curious, does anyone know how to add INSPINIA to an Ember web application? Is it as simple as ember install bootstrap and then copy the *.css file? Note: the INSPINIA template comes with way more files than just a *.css, and I am using ASP.NET CORE 2.2 for the web API.
Any help is appreciated.
When I did the same thing a few years ago, I bought the theme just for the themed css. I used their less and integrated that into my existing ember build. Nowadays I'd use the scss but it's unimportant.
What is important is understanding that bootstrap js components will not simply work in the context of your ember application. If you want callbacks, events, binding, etc to exist in the context of ember (ie within ember's runloop and lifecycle), you will need to wrap each individual component. Luckily, ember-boostrap does exactly that for you. This addon provides the easiest way for you to pull in your bootstrap scss. This addon also does not use bootstrap's js, but rather is a full implementation of the bootstrap component's in a way that is ember-aware.
ember-bootstrap deliberately excludes bootstrap.js
because the jQuery and Ember ways of control flow and animation
sometimes don't play well together, causing unpredictable results.
This is the main motivation behind ember-bootstrap. It is possible to
import bootstrap.js from bower_components or the vendor folder. This
is NOT recommended or supported, and you will be on your own. You have
been warned!
Once you've gotten the scss preprocessing properly set up in your ember-cli-build.js file, you should be able to use their markup more or less directly. You will need to have some understanding, though, of when you're encountering bootstrap markup (stuff with data classes that will be handled by bootstrap's js). In moments like that, you simply use ember-bootstrap components instead
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.
Is it possible to specify the css rules for only the angular-bootstrap modules that I'm using in my application? For example I'm only using the dropdown, datepicker and tooltip modules from angular bootstrap. However the entire bootstrap css file is required for these three modules. I'm not using bootstraps css in the rest of my application so I think importing the entire css file is overkill.
Webpack has a built in treeshaking function, which will be the easiest option if your project is already done or way ahead in development.
I have also found this treeshaking that manually compiles Bootstrap and uses Gulp to do the treeshaking in the mean time. I found it to be way harder and possibly outputing the same result, but make yourself comfortable.
i'm busy with a Nativescript app, i'm using the core dark theme but would like to add some font-awesome glyphicons and custom css. I import the core dark theme in my global app.css but don't seem to be able to do anything more in that file after importing the theme... I've tried to add page-specific css by adding a component-common.css to a specific page but when I add the styleUrls: [...] declaration to the component declaration I always get a runtime error... Is it possible at all to use custom css ontop of the core Nativescript theme? If so how would I go about it (using css files not inline in the xml)?
Yes, it is possible to use both a theme and custom CSS files.
For example, check this sample where in the same time theme has been applied to the top CSS file.
Better check (and/or post) your runtime error - it might show you the reason why the app is throwing. Perhaps due to non-existing paths for your styleeUrls !?