I have an existing website with lots of old pages and forms laid out with tables which I am trying to gradually transition to CSS. I want to use the Twitter Bootstrap stylesheets - particularly the styles for forms - but only on sections of pages where I have explicitly requested them. For example, I might surround the whole form in a div like so:
<div class="bootstrap">
<!-- everything in here should have the Bootstrap CSS applied -->
<form>
<p><label for="text_input">Label</label><input type="text" id="text_input" /></p>
</form>
</div>
I want all other forms to remain the same as they are now, because I won't be able to change them all at the same time. Is there a simple way to do this? I could go through every single style in the Bootstrap CSS and add a parent selector (e.g. 'p' would become 'div.bootstrap p'), but that would take a long time and it would be easy to miss styles.
Edit: If such a thing isn't possible, is there a free tool which can extract all the styles from a file, add a prefix and then save them back again?
For Bootstrap 3, it's easier if you use less:
Download the Bootstrap source code and make a style.less file like this:
.bootstrap {
#import "/path-to-bootstrap-less.less";
#import "/path-to-bootstrap-responsive-less.less";
}
Finally, you have to compile the less file; there are many alternatives
https://github.com/cloudhead/less.js/wiki/Command-Line-use-of-LESS
https://github.com/cloudhead/less.js/wiki/GUI-compilers-that-use-LESS.js
Or use npm to install less then compile the style.less file to style.css:
npm install -g less
lessc style.less style.css
The final fix was to use SASS (recommended by someone off-site), as that allows you to nest elements and then automatically produce the final CSS. Step by step the process is:
Concatenate the two Bootstrap files (bootstrap.css and bootstrap-responsive.css) into bootstrap-all.css.
Create a new SASS file, bootstrap-all.scss, with the content div.bootstrap {.
Append bootstrap-all.css to bootstrap-all.scss.
Close the div.bootstrap selector by appending } to bootstrap-all.scss.
Run SASS on bootstrap-all.scss to produce a final CSS file.
Run YUI Compressor on the final file to produce a minimised version.
Add minimised version to head element and wrap everything I want the styles to apply to in <div class="bootstrap"></div>.
I came up with a CSS solution if you can't use LESS/SASS because of work/other reasons.
I used this site, http://www.css-prefix.com/, and copy/pasted bootstrap.min.css into there. I set prefix ='.bootstrap' and spacer =' '. It will prefix everything with .bootstrap except not perfectly.
If you do a grep for '.bootstrap #media', you will find that the first class to the right of the opening bracket doesn't have .bootstrap as the parent. Add .bootstrap to all these occurrences, about 68 for me.
Then replace all '.bootstrap #media' with '#media'.
Final step is to replace all '.bootstrap #' with '#' (should be about 5 occurrences).
Example:
.bootstrap #media (min-width:768px){.lead{font-size:21px}}
needs to be replaced to
#media (min-width:768px){.bootstrap .lead{font-size:21px}}
Kind of a brute force method, so definitely try the LESS/SASS method above first.
<div>
No Bootstrap
</div>
<div class="bootstrap">
Yes Bootstrap
</div>
I have an easy solution.
Copy bootstrap css content to this (http://css2sass.herokuapp.com/) online css to scss/sass converter.
Add your tag information (e.g. div.bootstrap{ ) to the start of scss content and close the tag at the end.
Copy the whole scss content to this scss to css converter (https://www.sassmeister.com/) and convert it :)
I wasn't satisfied with any of these answers. Using Less to scope the rules created all sorts of defects. Clearfix, for example was all messed up. And rules like button.close became button.bootstrap close instead of what I really wanted: .bootstrap button.close.
I took a different approach. I'm using PostCSS to process the out-of-the-box CSS that is delivered with Bootstrap. I'm using the Scopify plugin to scope every rule with .bootstrap.
This mostly gets there. Of course, there are the html and body rules that become .bootstrap html and .bootstrap body which become non-sensical. No worries... I can just write a PostCSS transform to clean them up:
var elevateGlobalsPlugin = postcss.plugin('elevateGlobals', function(opts) {
return function(css, result) {
css.walkRules(function(rule) {
rule.selector = rule.selector.replace('.bootstrap html', '.bootstrap');
rule.selector = rule.selector.replace('.bootstrap body', '.bootstrap');
});
}
});
Now, I can isolate all Bootstrap styling by adding a class="bootstrap" at the top level.
That's tough. You can't Apply different css stylesheet for different parts of the same web page.
I suspect the only way to do this is to make a separate file for your content to take the bootstrap styles, and i-frame it into the page like this:
<iframe src="/content-to-take-bootstrap-styles.html" ></iframe>
then in content-to-take-bootstrap-styles.html
reference the bootstrap style-sheet in the header. But then you have all the complications of iframes -- e.g.: the iframe element won't grow to accommodate the length of your content.
You can use ready to use isolated css for Bootstrap 4.1 (compiled with LESS) -
https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes
It have isolated css for themes -
bootstrapcustom.min.css - default bootstrap 4.1 isolated style
https://bootswatch.com/cerulean/ darkly.min.css - isolated css
https://bootswatch.com/darkly/ flatly.min.css - isolated css
https://bootswatch.com/flatly/ litera.min.css - isolated css
https://bootswatch.com/litera/ lux.min.css - isolated css
https://bootswatch.com/lux/ minty.min.css - isolated css
...
To use Bootstrap CSS, simply wrap your HTML in a div with the class bootstrapiso, like so:
<div class="bootstrapiso">
<!-- Any HTML here will be styled with Bootstrap CSS -->
</div>
And use any css style from folder css4.1 like so:
<head>
<link rel="stylesheet" href="css4.1/bootstrapcustom.min.css" crossorigin="anonymous">
...
</head>
// https://github.com/cryptoapi/Isolate-Bootstrap-4.1-CSS-Themes
Done!
Related
I am loading basic semantic-ui.min.css through CDN, ie:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link>
However, my page has other divs like this:
<div id="wrapper">
<div id="menu-in-react"></div>
<div id="container-for-non-react-stuff"></div>
</div>
I would like semantic-ui css to be applied selectively to only:
div #menu-in-react
and not to
div #container-for-non-react-stuff
However, right now, by including the semantic-ui-css file, it is applying its style to div #container-for-non-react-stuff too.
How do I limit the application of semantic-ui.css to only specific divs (or exclude from certain divs)?
Note: I also tried using require('./myDist/semantic.css') using webpack to load the css, but this also ended up in semantic-ui taking over all my divs.
Thanks!
If you use sass, you can nest the entire semantic ui framework inside a parent selector so that it only applies to elements within:
#menu-in-react {
#import 'semantic-ui';
}
See here for more info:
https://codepen.io/trey/post/nesting-sass-includes
Do note that you'll have to save the framework css as a local sass partial like _semantic-ui.scss in order for this to work, as sass imports will not parse externally hosted resources.
I wouldn't recommend importing the entire framework without cleaning up some of it at least; the framework css includes some dom element styles (ie. html, body, etc) which would be quite useless when nested in a parent selector.
I currently have an issue where elements with templates that get iterated with an [[#each]].
The issue being that CSS styles are not affecting them. I am using Stylus to write the CSS. The issue doesn´t limit itself to my own custom CSS styles, but also affects BootStrap styles. The only thing working is inline CSS, but clearly this is not the best approach.
THe code for the application can be found here:https://github.com/smeloa/fcc-voting-app
I have included an example within the code where:
<template name="Poll">
<div class="poll-card" style="border: solid">
<h3>{{question}}</h3>
<p>
{{#each options}}
{{option}} - {{votes}}
{{/each}}
</p>
</div>
</template>
Only renders the border style, even though there is a css style saying:
/* My Poll Styles */
.poll-card
margin-top 20px
color red
Thanks for your help.
The problem is that the first lines in your original styles.styl started with a TAB character. Stylus messes up the generated css file. You can view the problem when inspecting the css file in the browser.
You probably entered {} around the final css class to prevent Stylus compiler errors for the same reason.
Remove the tabs and replace them with spaces.
you have bad formated stylus code: https://github.com/smeloa/fcc-voting-app/blob/master/client/styles/styles.styl#L245 This could be a problem.
I solved this issue by creting individual stylesheets for each template. Likely will take every single part of the website and break it the same way.
So for example for the NewPoll.html which creates the form to add a new poll I created a NewPoll.styl. This did the trick.
I have some h1, h2, h3 and a lot of bootstrap snippets that I want to apply only to a specific part of my site, I added a unique class, say .unique but it would take hours to prefix over 1000 of CSS lines
I use sublime text
Thanks in advance
You could use a CSS-preprocessor like LESS or SASS (there are more). Both can do what you want, by just doing this:
.unique {
// Old CSS goes here
}
The have many other advantages over normal CSS.
common I would like to give you some ideas, cause i think your question has something to do with control css overriding.
the Jost's LESS or SASS solution is very good actually to prefix cause can use nested css features, but it requires a compile process, their eventually compiled files are still css. cause the .less or .sass files can not be recognized for html to render styling.
Another thinking To avoid css conflicts and wrong overriding,
Instead of including global styling, see if you can embed them in part of the specific section/page where they can get higher priorities than the rest global styles.
even the same css, generally, !important > inline css > internal css > external css
or javascript can trigger css override after previous css finished rendering on the page.
Instead of using css priorities or script running priorities to override styles, making two external mobile.css, destop.css for example, then using javascript to reload page to include different stylesheet when device width are detected to have been changed in browser resizing behavior.(This is one pop way used in responsive view)
using IDE to locate css patterns and replace them with your prefix if it's simple to match all the patterns.
I was looking for a (simple) WYSIWYG Editor jQuery Plugin that's compatible with Bootstrap 3. I've seen a lot WYSIWYG Editors jQuery Plugin that were compatible with the previous Bootstrap, but my website uses Bootstrap 3, so each time I implemented such a jQuery Plugin, my Bootstrap 3 would ruin the buttons and mess the whole editor up.
So now I'm asking whether there is an option to enable the Bootstrap 2 stylesheet only for one div and its contents.
I assume a iframe could work, but then, I need the WYSIWYG Editor's contents (which are in the iframe then), along with text inputs on the 'non-iframe'.
One way you might be able to solve this would scope your css for that div. This is what I have implemented with a content management system that I have created.
Let say for example you give the WYSIWYG Div an ID of HTMLEditable.
you could target that div with your css and all the css within that div.
#HTMLEditable .WYSIWYG{
....css goes here
}
#HTMLEditable p{
....css goes here
}
The above css will only apply to that div.
Then its just a case of finding the correct css that you need in that div.
Note you may need to override/reset the css for that div to stop your bootstrap3 applying to it.
Here is an example of a reset css. (You will need to scope this as well to make sure you don't reset all your css).
EDIT: use LESS
To make this easier you can use LESS which is what bootstrap uses.
#HTMLEditable {
//import the modal css
#import "bootstrap.css";
}
you will need to make a file 'HTMLEditable.less'. Then Add the code to similar to the above.
The less will them compile the above into css and will scope everything in the css to #HTMLEditable
Check out the LESS site and look ate the nesting. This is what you are after. This site will also show you how to compile it.
You need to put the class or id of this div before all css rules. You can do it like this if you need a css file and not less.
#HTMLEditable{
paste in all of your css
}
than copy all of this paste it here: http://less2css.org/ in the less area and it will generate the right css for you.
I am building a chrome extension that attaches a widget sort of thing to gmail message. It appears below every email (something like a gmail contextual gadget) when the user is on gmail.com site.
I looked at few css frameworks like twitter bootstrap to use in my app. When I used it in mywidget, it messed with the existing gmail styles because of css class name clash. Is there any other framework that I can use where there would be no name clash? I came across jquery-ui framework. All the classnames here start with .ui-* thereby causing no name clash. Are there any other css frameworks like this with unique class names?
Update 2: Here is a gist of v3.1.1 provided by #GFoley83
Update: The pastebin joined below is the Twitter Bootstrap version 2.0.4
You should definitively use the up-to-date version and compile it yourself.
Here is what I did with the bootstrap less files :
.tw-bs {
#import "less/bootstrap.less";
}
And this is the result : http://pastebin.com/vXgRNDSZ
Demo (jsfiddle)
If you don't like tw-bs you can easily do a find/replace, there shouldn't be any conflict.
I used #Sherbrow solution but had to add the responsive file too.
.my-bootstrap-container {
#import "less/bootstrap.less";
#import "less/responsive.less";
}
and then run
node_modules/less/bin/lessc demo.less -x > demo.css
If somebody needs the complete step by step tutorial how to compile bootstrap for your own namespaced container I made a blog post about it http://joomla.digital-peak.com/blog/151-how-to-add-bootstrap-to-your-joomla-2-5-extension
The last part is for Joomla but the beginning can be used globally. It has also a link to the latest compiled bootstrap version 2.3.2. Just make a search and replace for .dp-container.
2016 Update: A future way to mitigate this issue (rather than having to recompile bootstrap) is to take advantage of web components, specifically shadow DOM. This allows your app to be self contained (almost like an iFrame) without the web browser having to open a separate page / losing the ability to communicate between pages.
say your component is contained in <div id='plugin'>...</div>
You can move what's inside that div to a tag in your head, eg.
<template id="template"><!--Your Code Here--></template>
Your template can include all the bootstrap link tags and js you want. Then in your javascript/bookmarklet, you can write
var pluginRoot = document.querySelector('plugin').createShadowRoot();
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
pluginRoot.appendChild(clone);
You can read a lot more about Web Components (along with Shadow DOM) here: http://webcomponents.org/articles/introduction-to-shadow-dom/
I started off using jquery ui - http://jqueryui.com/ because it has its own css classes which don't clash with gmail. YUI is another such framework that I found. But Sherbrow showed how I can use bootstrap css with our own unique css style names.
The currently accepted answer did not render forms correctly (using SASS and bootstrap 4 beta). The following works for me:
.bootstrap {
#import 'bootstrap-4.0.0-beta/scss/bootstrap.scss';
box-sizing: border-box;
}
The box-sizing is important, because, when compiling your SASS stylesheet, the following will be generated.
.bootstrap html {
box-sizing: border-box;
...
}
I.e. the box-sizing property will be placed on an html element inside an element with class="bootstrap" - which of course will not exist. There may be other styles on html and body that you may want to manually add to your styles.
And now you can place content styled using bootstrap inside a bootstrap class:
<div class="bootstrap">
<div class="container">
...
</div>
</div>