What is the best way to apply some CSS styling on third party Angular components, for example ones of Material or ngx-datatable? I can think of 2 ways already:
Override specific 3rd party component's CSS classes. Disadvantage I can think of is styling might break once we upgrade component to a newer version, as we stick to inner implementation (class names, etc).
Cloning whole code base of 3rd party component and updating CSS directly on that. Might be quite an amount of source code to maintain, and will need some merging if we decide to upgrade the version.
Any thoughts why one is better and what consequences it can lead to are appreciated.
You can override the css in your styles.css file, not in the css file of the librairy. Add the css selector on your file, and start adding your style here, maybe with an !important mark to trully override style.
This way you don't have to worry about future updates of the lib
Forking for little styling purposes is not an option ! This is very hard to maintain
Forking the lib only to override style code is not an option, you have to override the css on your styles.css file !
Related
I am currently implementing a plugin that gets dynamically incrusted into a DIV (not an iframe) and am currently using Bulma as my CSS framework. The issue I am having is that since this plugin is going to be integrated into many sites, it will also inherit the styles applied to the parent website.
Due to many of the classes being a standard name in many frameworks, such as column, button, form, and others, this is creating a conflict.
I have been reviewing a couple of packages that either add a prefix to these classes as well as use a namespace.
Namespace:
The namespace route does not work since this does avoid our plugin from not interfering with any of the other sites' styles, the site's styles still affect ours.
Prefix Packages:
https://www.npmjs.com/package/gulp-class-prefix
The other route I was researching ways to add a prefix to all the classes from our plugin, such as -column, but I understand that this will output a CSS library with all the classes with the prefix but not my HTML files which have the class="column".
I am hoping to find a solution for this, as I would think this is, although not common, a recurring issue/question and I just haven't found the proper solution for this.
Any advice would be appreciated.
You can use the #layer css rule:
The #layer at-rule allows authors to explicitly layer their styles in the cascade, before specificity and order of appearance are considered.
Example:
/* styles.css */
#layer bootstrapFramework, myPluginStyles;
#import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css")
layer(bootstrapFramework);
#import url("https://yourPluginStyles.css")
layer(myPluginStyles);
Doing this will override bootstrap classes with your plugin CSS classes. Due to the order of the layers.
Check out the browsers support for the rule.
You can read more about #layer CSS rule here: https://developer.mozilla.org/en-US/docs/Web/CSS/#layer
You can also checkout Web Dev Simplified Channel by Kyle on youtube. Here is the link to the video: https://youtu.be/Pr1PezCc4FU
Hope this answers your question!
Yeah. That's fine. Just add a prefix to the HTML classes too. It should work.
Or you can choose to ditch CSS frameworks for the plugin and write the CSS for the necessary components. You just do a little reset for your component's HTML elements and you can expect a fairly consistent design across multiple different implementations.
I feel this may be just helpful too. custom HTML elements too.
Best of luck.
just use div-to-select * { all:revert }
then add the code for the div & bulma
Explanation
all: revert gets every thing to normal so it makes all other frameworks class's styles to default
please take a look on https://agilecss.com CSS framework and UI kit, it provides some unique features not available in other frameworks, for example all the common used UI elements without JavaScript.
I use library that used css modules within, and styles come to browser with hash, how could I redefine this styles?
Thank you.
So, the answer on this topic is that paradigm of css modules dictate us behavior that doesn't imply overriding styles in other component, that supposed to be correct component approach to design interface and protect our production code from unexpected bugs. However if we need to enrich our component with styles from another component we can provide this by drilling props and can adjust this accordingly, e.g. we can check which styles come from the props and filter them out of the wrong ones, e.g. from 'position: absolute'.
upd:
and actually great article on that: https://liefery-it-legacy.github.io/blog/2018/06/27/overriding-styles-with-CSS-modules.html
I'm looking for a way to improve performance by minifying my app's CSS class names. This approach is used by large websites and is also described in this article.
Does anybody have an idea on how to do this with Angular CLI v10+ ? Ideally I'd want to add a webpack plugin while keeping the CLI for compilation, or a similar approach with minimal footprint, obviously for production builds only.
You can achieve something using the ViewEncapsulation API. By default it uses Emulated which generate large CSS class names. If you change that in your components to ShadowDom. This will encapsulate the styles and will shift everything to use Shadow DOM. With Shadow DOM the styles won't be leaked outside the components. You have to test it though and check for browsers support because it's not supported everywhere. Also, global styles might not work as you expect.
Edit: I also found this interesting article that explain something similar using Angular.
So I know you can extend Foundation classes once you have the Foundation scss/css included and I know you can include the classes to the dom (OOCSS style) but here's my use-case:
I have style sheet, menus.scss. This is compiled into app.css along with Foundation.scss.
I can use the #extend here because I'm including Foundation before it.
#menu {
#extend .top-bar;
}
THE PROBLEM
Now, say I want to compile a separate sheet (because maybe it's only included on some pages)
Now if I #import Foundation into this stylesheet I will end up with the framework included twice (which is crazy of course.)
So... maybe a solution would be to have a version of the Framework that works on silent classes EG: %top-bar so I can include Foundation everywhere without fear of duplicating lots of code. I know there are some base components that will need to be included globally so that the sub-classes will work but how else can I do it?
To my knowledge silent frameworks don't exist so I'm looking for alternatives..
Ideas?
It will be perfect if you can isolate css critical to the initial page layout like grid, type, visibility components and inline them in to the page head or, if you have a ton of pages, in css file with the final size under 1-1.5k(really hard to do).
Then you can just defer auxiliary css and their size wont matter much.
Or You can use some css cleaner tool to remove selector duplicates or just make your own, it's pretty simple since the entire blocks of css will match.
I need to add Twitter's Bootstrap styles to existing GWT component...
I found more than one project but all of them creates new custom components for that purpose...
I need to stick with GWT standard components and have my app L&F looks like TBootstrap.
Thanks.
You will have a great job to do overriding GWT's default css. Your starting point may be the Developer's Guide - Client Bundle.
Some widget does not accept Bundles, so you may have too to override GWT css in the bootstrap html file.
I believe that you can hack the basic styles with jQuery or overriding CSS styles, but the responsiveness, topbar and other things, I believe thats is pretty impossible...
You can take a look at GWT-Bootstrap.
Hope it helps..