I just started with freeCodeCamp and now i work on my first site using Brackets. I get a little bit distracted by the possibilities to set a clean start in the head tag. My idea was to use normalize.css and bootstrap, but I’m not sure in which order I should include them. Here is my head tag, any suggestions and help regarding sort order or removing/merging something would be really appreciated:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Normalize.css do I put this before Bootstrap? I would guess so?! -->
<link rel="stylesheet" type="text/css" href="css/normalize.css">
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- this is gonna be my actual "main.css", so it comes last -->
<link rel="stylesheet" type="text/css" href="css/main.css">
definitely your reset first, - otherwise you reset bootstrap or your own styles
then vendors like bootstrap, - otherwise this will reset your custom styles
then fonts / fontawesome if using custom
then your own styles
same kind of thing before your closing </body> tage for your <script> tags.
jQuery first,
then bootstrap,
then your custom js
it goes in order of dependencies. Bootstrap being dependant on jquery, so it goes after.
Cool thanks for your reply. I just found this info on the bootstrap site. Seems they have normalize.css already included, so I don’t need to worry about it :).
Worth pointing out I think you only get that file if you download bootstrap. If your just using a cdn then I don’t think it’s included. Not for your own css certainly.
Although it could be said that bootstrap is itself a reset for your own css.
I looked into bootstrap.min.css and into bootstrap.css.
Seems to me normalize.css is completly in bootstrap.css, but not or just a little bit in bootstrap.min.css.
My question now would be:
Should I just use bootstrap.min.css, because it has enough code to normalize the common browsers?
Should I use bootstrap.css instead? Isn’t it possible using cdn?
Or I could use normalize.css and then cdn bootstrap.min.css