I am new in ReactJs and I've created a front end website using html template. Now I want to merge it with admin panel, I've downloaded html template and tried to combine with Front end website. But Admin's CSS are clashing with front end's CSS files
One solution is to implement CSS Modules, with the help of Webpack or Browserify.
CSS Modules allows the scoping of CSS by automatically creating a unique classname of the format [filename]_[classname]__[hash].
Implementing CSS Modules either in the admin panel or the front would remove the CSS style conflicts.
Related
I have a question.
I am making an Universal React App and I understand the concept.
We take the best of the CSR and the SSR method to make a commun code for the front-end and the back-end.
We also split the element of a web page (HTML, CSS and JS) to the side who manage it the best.
So I did like this: the HTML is rendered by the back end and the CSS and JS by the front end on the browser.
That is on development mode because i use Webpack for bundle management and on this mode, i use a plugin to inject the css directly to the DOM by style markup (style-loader for HMR support)
But here's the trick, Webpack recommend extracting the css files to separates files on production mode. (by html-webpack-plugin and mini-css-extract-plugin)
So I need to inject the separate css files to the DOM by the link markup.
My question is doesn't it break the whole concept of Universal (Isomorphic) app by giving the CSS to the back end?
What is the configuration of an Universal React App on production mode?
Thanks in advance for your response.
I have been an Angular1 developer and recently considering using Angular4 for a new web application project.
With Angular1, I used to purchase an 'Bootstrap Admin Theme' which came with well done and consistent CSS and a lot of JS plugins put together which allowed me to focus on the application itself. I used to insert Angular1 code into it in the areas where there was data manipulation and I enjoyed doing that. So I had the best of both worlds.
Is there any way, this could be achieved in Angular2/Angular4, 1) without really missing out the JS plugins the Theme offers and 2) without having to copy the CSS everywhere ?
Yes it is possible but you will have to do 'some' tweaking.
Template
First of all import all your js plug-ins through npm
npm install (plug in) --save
Then you will have to edit your angular-cli.json to include js plug-ins (js & css)
"styles": ["styles.css"],
"scripts": [],
Put the path to styles & scripts in to array
Then you should add main template css file in to predefined styles.css
Next you should break up your pages in to components (view components and 'tag' components).
Now about custom app dev:
Add your custom
- js in to *.component.js
- css in to *.component.css
- html in to *.component.html
(* stands for component name)
et voila...
I'm using bootstrap 1.3.2 in an angular web application. I'm using only the js library, not the css as I'm providing my own styles to the app. But in the resulting web application there are a few elements in the with css data which I did not insert.
I checked the bootstrap library and just at the end there are some lines similar to this.
angular.module('ui.bootstrap.carousel').run(function() {
!angular.$$csp().noInlineStyle && !angular.$$uibCarouselCss && angular.element(document).find('head').prepend('<style type="text/css">.ng-animate.item:not(.left):not(.right){-webkit-transition:0s ease-in-out left;transition:0s ease-in-out left}</style>');
angular.$$uibCarouselCss = true;
});
As you can see, this is inserting some css in my web page. I can just comment these lines, but I wonder, why is bootstrap doing something like this? is this some 'core' css for the component which should not be removed?
I commented those lines and everything seems to be working fine.
Thanks
Those styles are there to support certain behaviors in the directives, here is a link to the carousel css in source. You should leave those styles in your page.
In my Extjs app I have kept custom.css file in the resources folder of the root for testing and in the build- resources folder. And add the css path to two both index.html files(test and build). But whenever I make it to convert to build production, index.html file overwrites and custom.css file finds missing. Somewhat problematic it is. I know that this is because I add this file externally. But Is there any permanent solutions to fix this, without violating the Extjs app structure ??
You can add your custom styles via scss. There are several articles around the web about styling your ExtJS app.
http://docs.sencha.com/extjs/5.0.0/core_concepts/theming.html
http://www.rallydev.com/community/engineering/guide-custom-themes-extjs-4 [dead link]
If you only want to add your single custom css file - which i do not recommend - you can do things like that:
Include an existing CSS file in custom extjs theme
http://www.sencha.com/forum/showthread.php?270694-How-to-include-custom-components-CSS-in-build-CSS
I have to create a custom stylesheet for my ExtJS application. I have created it using sencha command and by modifying Package/MyCustomTheme/sass/etc/all.scss file. It has changed the base colors etc of the application and panels. When I am including a combobox on my page, it does not seem to have any style applied to it. What variables I need to include in the .scss file for combobox? What is the correct way to change the style of all the components used in the application?
If you have a custom theme, built with secha app build, and then you add a new component that needs extra css rules, you have to rebuild your app before the css for that component gets included in the css of your custom theme.
I'm not sure if I'm clear:
Build your app with custom theme with sencha app build
Include a new component class (Ext.form.field.ComboBox in your case).
Now the css file of your custom theme will miss the combobox css rules.
Rebuild your app with sencha app build
Your css theme files are now complete and everything's OK.