I am using Foundation CSS framework and Kendo UI grid in my project The Kendo UI grid sometimes overridden by foundation CSS thing.
How can I avoid this conflicts?
To be honest, I don't think there is a way that you can do this. A browser will load all stylesheets in the order they are placed on your page. When there are selectors that is used in more stylesheets, the last occurrence takes precedence (meaning: it's the one that your browser will use).
You can add a third stylesheet in which you fix everything that gets overwritten by mistake, or you can try switching the Foundation css and the kendo grid UI css
What you're looking for is namespacing. As far as I'm aware there's no built in way to do this, but the question has been asked before:
Namespacing the Bootstrap and Foundation CSS frameworks
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 have asked myself (not tested) if it is possible to integrate both bootstrap and materializecss into the same project
Since both frameworks are for the same purpose and probably overlapping in some class definitions etc. is it still possible to combine both frameworks in order to expand my styling options?
Materialize is not based on Bootstrap nor just a "visual layer", using both frameworks may lead to a lots of incompatibilities or at least overlap a lot as most of their functionalities are redundant (grids, menus, icons, etc).
I personally use this project Bootstrap material design which is a theme for Bootstrap and works very well.
If you don't need/want Bootstrap you can also use Material Design Lite that has been recently released by Google. It is a light CSS framework based on Material Design guidelines. Light in comparison to Angular Material or Polymer also using Material Design guidelines but part of or requiring other javascript frameworks (i.e. Angular).
I added Materialize to my bootstrap website and it worked fine, like JC Borlagdan said though there is some overlapping. I just use a website inspector and (usually right click > inspect element) then just turn off the bootstrap or materialize property to see which one I like more and remove the styling from the one I don't like. Just make sure you get the non minified versions of materialize and bootstrap.
It is possible, I already tested both framework in a single web form, though some properties of the controls overlapped, especially to the <div> tag that calls the container class for the tag.
For the grid, it actually follows still the bootsrap, for some reason, (that I don't know). Because I tried rearranging the order of <script> tags, still bootsrap grid still the one used by the webpage/webform.
you need to set the order of CSS files like
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link href="css/yourStyle.css" rel="stylesheet"/>
Now you can override bootstrap css classes or ids, and can make your own CSS styles.
You could remove the GRID from materialize.css and just compile a custom bootstrap package with BT GRID and without the buttons, labels etc.
Don't use any BT jQuery Plugin, then compile and load bootstrap.min.css first in your template and then the modded materialize.css and materilize.min.js.
You can also integrate just buttons, cards or colors by picking them out of materialize.css and insert in your template.css / style.css to overwrite
bootstrap styles or to add alternative css classes to your GRID.
I'm not sure that's possible. Material Design is something new from Google, and includes responsive as part of it, while the Bootstrap library is from Twitter and seems to be mostly responsive-oriented.
Check out this conversation : http://forums.oscommerce.com/topic/407994-material-design/?hl=material
I suspect that they are not going to be integrated with each other, and will conflict badly, but maybe someone else has more information.
I'm on a web project using bootstrap style, then I incorpored the grocery_CRUD framework and I started having problems with the css.
It seems the grocery_CRUD has priority on the css files, when it renders a table, all style changes.
I want all web site has the bootstrap css and only the tables rendered with grocery_CRUD has its style.
Any solution?
I think you are looking for the "bootstrap" theme at grocery CRUD. Just be aware that it is still in BETA phase. You can simply have a bootstrap theme like this:
$crud->set_theme('twitter-bootstrap');
I answer my question:
It's all about order of loading CSS... just didn't think about it, need to load first grocery_crud theme and then my css file. I had backwards overwriting my style
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..
Can anyone tell me about CSS frameworks, and how to use them?
From Wikipedia:
A CSS framework is a pre-prepared library that is meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language. Like programming and scripting language libraries, CSS frameworks are usually incorporated as external .css sheets referenced in the HTML . They provide a number of ready-made options for designing and laying out the web page. While many of these frameworks have been published, some authors use them mostly for rapid prototyping, or for learning from, and prefer to 'handcraft' CSS that is appropriate to each published site without the design, maintenance and download overhead of having many unused features in the site's styling.[29]
There is a lot of material on SO (which framework to use, whether to use one at all....)
CSS frameworks are just CSS files. They provide pre-written CSS that you apply to your HTML by using the class names defined by the framework in its CSS file.
Some frameworks are focused on one particular task, e.g. page layout. 960.gs is a good example of this.
Some frameworks are more extensive, and include pre-written CSS for typography, form layout, print styles etc. Blueprint is a good example of this.
Some frameworks also include reset styles, which attempt to reset all styles for all HTML elements to very neutral defaults. These are automatically applied to all HTML elements, so you don’t add classes to your HTML to apply them. A lot of them are based on Eric Meyer’s CSS reset.
CSS frameworks address some or all of the following aspects:
Browser reset. This brings all browsers back to the same baseline styles so that you don't get surprised by something rendering differently in different browsers.
Layouts. They can provide pre-prepared styles that allow you to achieve certain layouts in a simple way. These include columns and also grid layout techniques.
Design. Some provide colour schemes, font selections, typography (line spacings etc.) to quickly give your page an appealing design.
Important to realize that you can mix and match - as long as you're careful.
For instance I don't particularly like YUI's Grid framework (not flexible enough for what I need) - and I don't particularly like Blueprint's typography (because I don't understand what it's doing and I think it's trying to do too much).
So I'm using YUI CSS Reset with YUI Typography and Blueprint grids !
CSS framework is a "wrapper" for all the styles and layouts on your Mark-Up (HTML etc) pages.
An example would be: http://www.blueprintcss.org/
Predefined functionality that has been created intended to serve as a guide for building of something useful.
There different frameworks with different functionality often a (programming tools)layered structure indicating what kind of functionality can be built and how they would work.
CSS frameworks are pre-prepared libraries that are meant to allow for easier, more standards-compliant styling of web pages using the Cascading Style Sheets language.
For more info on how to use each framework, please consult the official documentation of that framework.
Examples of popular CSS frameworks :
960 Grid System
Blueprint
Bootstrap
Cardinal
Cascade Framework
Chopstick
Columnal
Emastic
Floatz
Fluidable
Foundation
Gumby Framework
Ink
Jaidee Framework
KNACSS
Kube
Kule CSS Lazy
Malo
Pure
Responsive Grid System
Semantic UI
Skeleton
uikit
Unsemantic
YAML
Yet Another CSS Grid System
YUI CSS grids
Zass