I have a Gatsby project that uses Theme UI and Netlify CMS.
How can I style the Netlify CMS preview pane with my Theme UI styles?
Netlify CMS doesn't support CSS-in-JS libraries:
https://github.com/netlify/netlify-cms/issues/793
Unlike Styled Components, it doesn't seem possible to convince Emotion to inject its styles into the Netlify iframe, either. There does appear to be some support for injecting raw CSS into the preview iframe:
https://github.com/netlify/netlify-cms/pull/1162
But so far I can't seem to figure out how to make any of this work together on my own.
Related
I am using Vue 3 components purely as custom elements (in ASP.NET MVC views). When I view my site on localhost, after using vue-cli-service to make a non-prod build of the Vue components (all are .ce.vue), the Vue devtools icon "lights up" (in the browser's extensions icons toolbar) indicating that it detects Vue on the page--however, the Vue tab never appears in the Chrome dev tools.
Should the Vue devtools extension work with just Vue custom elements on a page? I tried the troubleshooting steps in the F.A.Q., but none seem to apply. (I also turned off all other extensions and restarted my browser.)
Note: I am using a 32" 4k monitor, so I am definitely seeing the full Chrome dev tools UI.
Note 2: I have tried using the Vue devtools with my custom element rendered in a shadow DOM and without one.
Without a shadow DOM:
With a shadow DOM
Here is a link to the Vue.js GitHub issue with a helpful comment for the PR for making the shadow DOM wrapper optional.
defineCustomElement without shadowDom #4314
We have used a custom theme which is not available in shopify theme store, We have used Help Center Faq app to display in front end, But the App css and functionality is not working and not even displaying the template selected in Help Center Faq app. Its displaying the custom theme functionality and css as Default Is there any way to override the custom theme css and functionality and to use the app css and functionality
The app should have a supported template list, contact the app support team.
Additionally, it seems your theme css it's overriding the app files. That's the reason why you shouldn't use unsupported themes unless you know what you are doing. Nevertheless, you can disable the theme css by creating a new layout file without the main css file in the header and only using the app css specific for that page.
I have developed a Vue 2.6 SPA using Vuetify and Material Design Icons that is included as described here, but some elements of the SPA (partially derived by a public template) use also "Material Design Iconic Font". I would like to host locally the "zmdi" icons, instead of using CDN, and following the instructions reported here I installed this additional icon pack using:
npm install material-design-iconic-font
I don't know how to correctly include "zmdi" icons into the VUE app.
Could anyone suggest the easiest way to host Material Design Iconic Font within the VUE SPA?
I finally solved using
import "material-design-iconic-font/dist/css/material-design-iconic-font.css";
into "main.js".
I have to include something else into "vue.config.js" to instruct webpack to correctly handle this css file?
I have a website based on Vue framework and webpack.
I came across this css framework developed by Google (Material Components Web) where you can directly get started using a cdn or an npm package. It worked extremely well for a simple html/javascript based website. But, I am having issues setting it up for the Vue project.
There are other wrappers available for Vue framework like Veutify and Vue Material. But, it comes with lot of additional stuff like the grid layout which I don't want the developers to follow as we are already using a flex layout. I only want the component library.
So, is there a way use the Material Components Web with the Vue framework?
I didn't get the Material Components Web working with the Vue framework. But I did found another light-weight material design framework i.e. Material Design Lite.
Note: It is not specific to any framework. It lets you add Material Design look to your website developed in any framework
You can easily get started with a wide variety of options like cdn, bower, npm or even by downloading the files.
Material Components Web has modular architecture. Each component or API is distributed as a separate package. It means that you can use them separately, although there are some dependencies.
Also there is "root" package - material-components-web, which just references all other packages.
By default, when you add a package, it will not be included in your app. You'll need to import component's SCSS and optionally JavaScript. Basically like you would use any other component.
Reference this Vue app template as an example. As you can see here, it references only subset of MDC's components/APIs.
I am pretty new to SPA. I'd like to known if it is possible to build a SPA with only Bootstrap or I have to use a framework like Jquery mobile or angular ?
Thanks
Bootstrap is CSS, HTML and JavaScript Framework which contains HTML- and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.
To Build a SPA application you have to use JavaScript libraries or Frameworks.
From http://tutorialzine.com/2015/02/single-page-app-without-a-framework/ you can get an idea of SPA without javascript frameworks.
There are a lot of open source JavaScript frameworks that help with building SPA, such as:
Angular
React
Ember
Aurelia
Vue.js
Cycle.js
Backbone
You have to use JS framework.
Bootstrap is only CSS framework. It makes your application looks better. Ok, you can use custom datepickers, modals etc, but usually this functionalities are implemented in CSS frameworks like Boostrap by jQuery. You can check this page to confirm it. You need JS framework for SPA (or create a new one).