In my website I use twitter bootstrap. Is it necessary to include reset.css with my site? Is it included in bootstrap.css file?
normalize.css is included at the beginning of the bootstrap.css file, so you don't need to have another one.
With Bootstrap 2, the old reset block has been dropped in favor of Normalize.css, that also powers the HTML5 Boilerplate. Normalize.css makes browsers render all elements more consistently and in line with modern standards and it precisely targets only the styles that need normalizing.
Just a note to this. Twitter Bootstrap 2.0 runs Normalize.css, instead of reset. (but they have kept the name as reset.css for some odd reason :D )
Related
I've read that bootstrap.css already includes a version of the code from normalize.css, so is it redundant to use both files?
In other words, if I am using bootstrap do I not need to use normalize.css? Or should I use both files to thoroughly ensure cross-browser compatibility?
Bootstrap does have normalize.css included, so it would be redundant to include it elsewhere.
Bootstrap's documentation on normalize.
Bootstrap 4 (Beta) uses Reboot, which builds on Normalize, which would also make including it elsewhere redundant.
I know I can just have a custom stylesheet that overrides the bootstrap component I wish to customize (for example the jumbotron), but is the right way to go about this "problem"? I don't think this can be done with a bootstrap theme, although I haven't read a whole lot on this subject.
You can use your browsers DevTools to inspect an element that you want to change, and in the Rules/Styles section you can see which CSS elements is it using and then you can create your own css file and paste the CSS there and change it so it overrides bootstraps element. Here is how to get the devtools from Chrome https://developer.chrome.com/devtools#dom-and-styles and from Firefox https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector. Don't forget to import your CSS customised script under bootstraps so it overrides the CSS that you wish to change.
Use twitter-bootstrap customize on their website to customize it and download the customized files. Or just create a custom CSS file and edit classes like .jumbotron and other stuff
There are a few ways to modify the default bootstrap css and no one way is inherently more or less "right" than any other. It all depends on the coding style of you and/or your team. Here is a list of a few ways that I came up with off the top of my head:
Modify the css file you downloaded from Bootstrap
(My Choice) Override Bootstrap styles with your own CSS. Just be sure to follow the rules of CSS Specificity (External < Internal < Inline) and if you have trouble getting a certain rule to apply try reading this answer or force it with !important
NOTE: This is likely NOT a comprehensive list, just a starting point.
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
So I'm making a website using Middleman, which I'm trying out for the first time, and just getting my teeth into Susy and Compass, which I plan on using with it. I am not familiar with these tools and was curious if anyone knew whether the reset utilities Compass provides cascade over any of the CSS rules from HTML5 Boilerplate (mainly those from normalize.css). Does anyone know?
You choose whether to use compass/reset or normalize.css. Using both at the same time does not make sense. The reset basically sets the same properties on all elements, then you add your styles on top. What normalize does is that it only sets the properties that vary between browsers to one common set. The difference becomes obvious with elements like <strong>, <em> or <ul>: Using reset, they will just be “plain” text. No list indicators, no paddings, no margins, no bold, no italics. Using normalize, they will look as you would expect them to look: bold, italicized, like a list, etc.
When using normalize.css, you can either use the compass normalize plugin or just download normalize.css and #include it at the top of your SCSS/Sass file. Then, don’t include compass/reset.
The reset included in Compass style is the Eric Meyer's one (version 2.0).
I'm not familiar with HTML5 Boilerplate. Although I know they are a set of good practices, I've never seen myself on need of using it. I like to build my own boilerplates.
After reading the source code of normalize.css and the Eric Meyer's reset I found you will have some colliding rules.
I'd say that if you're interested on keeping normalize.css over the reset mixin just include normalize.css after it.
Are there any lists of default CSS stylesheets for different browsers? (browser stylesheets in tabular form)
I want to know the default font of text areas across all browsers for future reference.
Not tabular, but the source CSS may be helpful if you're looking for something specific:
Firefox default HTML stylesheet
WebKit default HTML stylesheet
You're on your own with IE and Opera though.
I suspect this is something of a moving target for all the browsers, but there is a default style sheet for HTML 4 as defined by the W3C.
There probably is a list, this is why we use CSS Resets however.
Eric Meyer's Reset
Yahoo's Reset
CSS class have compiled a list of CSS2.1 User Agent Style Sheet Defaults. Some links at the bottom of that page as well.
You cannot possibly know all defaults for all configurations of all browsers into the future.
The way people get around this is to start their CSS by resetting everything to known values. Here's an example from one of the main CSS experts: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
There was some discussion and testing done on www-style not too long ago:
http://lists.w3.org/Archives/Public/www-style/2008Jul/0124.html
http://lists.w3.org/Archives/Public/www-style/2008Jul/att-0124/defaultstyles.htm