is there any compatibility issues i should be aware of ?
I have my webapp built with jquery mobile 1.4, yet for some pages bootstrap give me lot more control over css so that i can make my webapp also works for pc with wider views.
what i did was i used bootsrap custom builder to compile a version of bootstrap except for typographies, -because bs typography change the size of headers which mess jqm navbars and buttons.
i then included bootstrap on top of my css style sheets
<link rel="stylesheet" href="http://localhost/ehit/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://localhost/ehit/assets/css/jquery.mobile-1.4.3.min.css" />
<link rel="stylesheet" href="http://localhost/ehit/assets/css/jquery.mobile.theme-1.4.3.min.css" />
so that jqm styles would have upper hand to overwrites what ever rules it want over bootstrap.
yet before i start diving deep and coding stuff. i was wondering is this enough to get them to play nice together or is there other issues i should fix first ?
Related
I am using two CSS frameworks in index.html, as follow
Materialize.css for Login/Sign In, and slick.css for rest of my website.
When frameworks are defined as:
Materialize.css:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
Slick.css
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
Then Output:
Home page Design
Login Page Design
If frameworks are defined as:
Slick.css
<link rel="stylesheet" type="text/css" charset="UTF-8" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.min.css" />
Materialize.css:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
Then Output:
Home page Design
Login page Design
But it implement last declare CSS framework on whole website.
how can I implement different CSS frameworks?
Usage of global style CSS/Javascript frameworks in modern frontend frameworks like React, Angular and Vue is possible, but highly discouraged.
If you want to, you can do it and there is nothing special you need to do for them to work.
Let's say you include Bootstrap in your web page and you want to use the button styles:
const SomeComponent = _props => (
<button className='btn btn-primary'>Hey I'm a button</button>
)
That's it. Now then, what happens if two global CSS use the same class? Like '.btn' for instance. In this case the last one to be included will win, and there's [pretty much] nothing you can do to solve the dilemma. This is the problem with global CSS and the reason modern projects avoid it at all costs.
A solution for this collision problem would be to use CSS-in-JS solution, in which we import CSS into a Javascript file and only use the CSS selectors and classes we need. This may work to some degree, but it still would ne a hack with associated limitations.
In practice, we only force the integration of vanilla JS libraries [with React] if they are very low level and there is no [good] adapter library for the specific frontend framework you are using (React, Angular).
This is where opinion-based part of the answer starts.
For Material design and React, it would make much more sense to use an implementation of Material design in React components, like Material-UI, which is much more easier to integrate with React than vanilla JS and CSS implementation of Material design like Materialize.
The same approach is similar for Slick. Google 'react carousel' and you'll get at least 2 good implementations of a carousel UI that you can easily integrate into a React project.
sorry for the strange nature of this question however I was alerted to an issue and I can not find what has happened.
Overnight (04/02/2018) the styling of my react web application seemed to completely break. The nav bar no longer displays and the container alignment is no longer working, nor is the responsive aspect of the application. No code has changed during this time, and I can not see any errors when debugging or checking the console in IE,Chrome and FireFox.
Has this happened to anyone else? I have attempted to update the version of bootstrap the react app is using but this has not changed anything regarding this issue.
This is because now the latest bootstrap refers to v4 in the link https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css
You need to change your link to https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css where you have been including stylesheet most probably /public/index.html or just search through files where you are importing bootstrap from cdn and change it to version 3(3.3.7 in my case), because react-bootstrap(Navs, NavItems or any other components ) uses bootstrap v3 css
Change this: ]
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
to not lastes version, for ex.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
Kind of a newb question. I'm working with Boostrap to create a mobile responsive portfolio. What do you do if you want to make a change to the default Bootstrap classes? Like if I wanted to take the padding off of the class="container"? The links are only connected to the minified version of css and js. So if I make a change to the regular version .css, there's nothing connecting the change. Do I have to change the .min.css version? Should I be able to repeat a class in my own personal css page?(I've tried unsuccessfully) Thanks, any advice would help.
Two methods that I know of:
1) Make edits to the .min.css file, or
2) Add '!Important' to the your personal css, like so:
.testDiv{
font-color: white !Important
}
This will overwrite any classes that have set a font-color for .testDiv
*note: using !important is not a recommended technique, but it gets the job done
You can override the classes in your own CSS file (make sure you import it into your HTML after the original CSS files from bootstrap). Like,
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="path/to/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="path/to/css/bootstrap-theme.min.css">
<!-- Custom Tweaks to theme (Add your changes to this file) -->
<link rel="stylesheet" href="path/to/css/style.css">
<!-- Latest compiled and minified JavaScript -->
<script src="path/to/js/bootstrap.min.js"></script>
However, if you are going to make lots of modifications like that, I suggest you create your own customized version
I'm using Foundation CSS framework and jqGrid to display data, but Foundation styles are messing with jqGrid/jquery UI styles...
I've tried a lot of changes and search, but I can't figure out how to do it...
Here is an example : http://jsbin.com/cocukube/1/
I would like the jqGrid to be displayed like that : http://jsbin.com/cocukube/2/
But of course, with all Foundation styles...
Thank you very much.
I would begin by taking a look at the order in which you're loading the CSS. In order to assure that Foundation is not overriding your jqGrid styles, make sure that jqGrid is being loaded after Foundation.
<link rel="stylesheet" type="text/css" href="foundation.css">
<link rel="stylesheet" type="text/css" href="jqgrid.css">
If that's not the issue, you might need to create an override.css file to essentially "undo" some of the styles that Foundation is applying. If this is necessary, make sure that your override.css file is called after the other two.
I created a stylesheet for jquery mobile using the ThemeRoller tool. It looks really great on the ThemeRoller page. In my mobile app... not so good. I think there must be some conflicts in definitions between my stylesheet and the jquery stylesheets.
Rails layout file:
<%= stylesheet_link_tag "jquery_mob_theme.min", "jquery.mobile-1.1.0.min", "stylin.mobile" %>
For those of you not familiar with rails it is rendered:
<link href="/stylesheets/jquery_mob_theme.min.css?1338304118" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/jquery.mobile-1.1.0.min.css?1338312435" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/stylin.mobile.css?1337894014" media="screen" rel="stylesheet" type="text/css" />
Is the only way to deal with this to wade through thousands of lines of css to look for conflicts? Is there a css debugging tool that will detect that in a stylesheet? I could change the jquery file names to scss and then roll them into one stylesheet. I am familiar with Firebug and Web inspector which check styles on one page. That wouldn't help... right?
Thanks.
Unfortunately for you, All of css is based on inheritance so there is no automated way of knowing of a conflict or if an object has just overriden the styling of a parent. I think the best bet is to force rails to show the mobile version of the site on a desktop pc and then you can use the Google chrome inspector. It will show you all styles applied to a specific object. It only shows relevant styles with line numbers in the stylesheet so you aren't stuck wading through css. You can also edit it in chrome to see what your changes will look like before you change your stylesheet.
Firebug (an extension for Firefox) can show all styles applied to any given element, as well as which styles are overridden by other styles. You would have to view your mobile site from a desktop browser, but this can be done in Firefox by changing the useragent to match that of a mobile device (iPod, Android, etc.)
If you plan on using webkit on your site, Firefox is not a great choice as it does not render webkit css styles. An alternative is to use Safari and its development tools (which can be activated in the options menu).
If you need to debug from an actual mobile device, there aren't many options. If you can get Opera mobile onto the device, it comes with a decent debugger called Dragonfly.
The order of your stylin Stylesheets matters for what gets overridden. Make sure your style sheet is before both of the jQuery style sheets.