on the download page it says that the package essential (foundation-6.3.0-essential) contains Reveal Modal and Abide validation but after downloading see that it's not there in css.
All the Reveal classes are there but not Abide:
body.is-reveal-open {
overflow: hidden;
}
Everything is in the .css file and there's a minified version if you want to use that instead.
If you want Reveal and Abide, you can export your own custom build. That's what I recommend you do.
Related
We made an angular 6 webapp and we would like to integrate this webapp into one of our customer webshop.
The problem is that we have some css conflict.
For example :
- The webshop uses bootstrap 3 and our app bootstrap 4.
- Some shop css are overriding webapp css.
- Some webapp css are overriding webshop css.
What is the best solution to avoid these conflicts ?
The best solution would be to use one bootstrap version for the whole project. If you mix bs3 and bs4 there will be conflicts because the classnames are (for the most (grid-)part) the same but the underlying css is different.
One solution would be to wrap the webshop in an extra div with a specific class and import bootstrap3 css only for this class, like so (in SASS)
.webshop {
#import all-of-bootstrap3;
}
That way bootstrap 3 only works for everything that's inside this wrapper. Since bootstrap has low specifity, this should be enough to overwrite it.
Ideal solution would still be to use same bootstrap-version for one project.
Edit: This of course also works the other way around, you can also wrap all of your components in one class so that all your css are using the higher specificy. Might even be the better solution if you have to support multiple clients.
you can of course also change the css from bootstrap itself, as explained here Customize Twitter Bootstrap Classnames
Good answer from #cloned
Also, you might try to wrap one app in one class and the other app in another class by putting a class on the html tag.
Then prefix all your styles for one app like this:
html.app1 .some-style {
background-color: pink;
}
And the other app like this:
html.app2 .some-style {
background-color: green;
}
If you are using scss or something similar this should be pretty straightforward since you can use nesting.
I am using vue-js-modal plugin, And inside this plugin, there is a style.css file. In this file, I need to change some setting to customize the changes in the modal style. But when I access this file and change whatever I want and then save my changes and run the application, the modal page look like the previous style and setting! And when I opened the console and checked the elements and select the modal page, the style setting in the browser it's the same previous setting! How can I solve this problem? Do I need to build the file contains the style.css? If yes, how can I build it? If no, how to solve it?
Try using Deep Selector in you vue app to rewrite modal css
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
for me syntax is following
/deep/ p {
margin-top: 0;
}
Why not override the CSS rules you want to change, either in your own CSS file or in the style tag if you're using single-file components?
A quick fix would be to change the version of the css file by adding to the path of the file.
Old: "/mycssfile.css"
New: "/mycssfile.css?1"
I was trying to create a theme for Drupal 8.1.8. My CSS and JS files unfortunately cannot be loaded. I have checked if I used any tab characters, but I have used always 2 space characters for an indent.
I have read the documentation page at Drupal.org: https://www.drupal.org/theme-guide/8/assets. I was trying around 2 hours with all possible combination. Also I tried the google search, Drupal core code inspection.. I could not figure it out.
My theme is located at themes/englishtrainer. The css is located in themes/englishtrainer/css and the javascript files are in themes/englishtrainer/js. The theme can be enabled as a theme without problems.
The contents of my theme's files in the following.
englishtrainer.info.yml:
name: Englishtrainer
type: theme
core: 8.x
version: '1.0.0'
libraries:
- englishtrainer/base
regions:
content: Content
header: Header
englishtrainer.libraries.yml:
base:
version: VERSION
css:
theme:
css/css-test.css: {}
js:
js/js-test.js: {}
css/css-test.css:
body {
background-color: red;
}
js/js-test.js:
alert('it is loaded!');
I was checking the html markup for any occurrences. The javascript console has been also checked. It does not contain any entries. I have cleared the entire Drupal cache and disabled/enabled the theme. Nothing helped.
Do you have any idea?
Solved it. My issue was, that I had a theme "and" a module with the same name. However the module did not implement any theming components. But this broke the theme. After I have uninstalled the module with the same name, the background was red (css worked) and the javascript alert appeared (javascript worked).
Thank you for your attention.
I downloaded a Web template which is based on bootstrap version 3.
Inside the template I found CSS files named bootstrap-cerulean.css, bootstrap-journal.css, bootstrap-classis.css. Although, I can not find a file named bootstrap.css. What do bootstrap-cerulean.css, bootstrap-journal & bootstrap-classis define or do? Are they themes for bootstrap? Do I still need to reference bootstrap.css if I reference one of the themes such as bootstrap-cerulean.css?
All the bootstrap.css styles are most probably modified and integrated with those three mentioned custom css files that you got with the template so no, you don't need to link the default bootstrap.css anymore unless you're planning to override certain elements on the page to the default style (which I would recommend using a new css file with the few changes kept there for overriding the template's style rather than linking the whole bootstrap.css to the template.
I have website built with many custom css styles in some css style files.I want to use twitter bootstrap in the website.but if i include it in my pages like -
<link type="text/css" rel="Stylesheet" href="assets/css/bootstrap.css />
so as you can guess because of this many styles and classes overwritten by bootstrap class and styles and so is lot of problems.so if there is way i can use twitter bootstrap css and js under a class?
I just can add my class name before every class in bootstrap.css file but that is time consuming or i go for it?? from web research i found -
.tw-bs {
#import "less/bootstrap.less";
}
by using lesscss.org.but i did not get yet how do i compile things in my windows pc so i can use twitter bootstrap under .tw-bs class only in my site.if anyone know step by step, save my time.
The best thing we have found is to use a separate CSS file where you deliberately overwrite some of the Bootstrap styles with what you want/need. For example, the default buttons in Bootstrap have rounded corners with a 4px radius. We decided that we wanted a more rounded look, so we put the following into a CSS file:
.btn{border-radius: 10px;}
When you reference your file AFTER the Bootstrap file it will overwrite the default Bootstrap values with yours. Sometimes the Bootstrap specificity is very hard to over-ride, in which case you'll need to style by referencing the ID of the element directly (which is more specific than classes.)