Our agency has been contracted to develop a few pages within an existing CMS. I would like to use the Twitter Bootstrap framework to scaffold these pages. However, I am worried about conflicts with the existing CSS on the site for the templated areas that we are not modifying.
Rather than bring in Bootstrap styles for the entire document on those pages and manually troubleshoot all style conflicts, I am wondering if it is a better solution to compile Boostrap CSS with a selector prefix (#body-content for example) to isolate those styles to the region of the document we are modifying.
Are there any risks to this approach? Any reason why this approach might not work or should be avoided?
As per your questions
Are there any risks to this approach?Any reason why this approach might not work or should be avoided?
See, the only issue you will have is when you get an update to the bootstrap framework, because you use your own custom compiled css, you will have to recompile it for the new version.
If you stick to the original css, you simply replace the current css with the new version.
and everything falls into place.
About conflicts, i would suggest that you make changes to a custom css file that overides the boostrap.css, so that you get the chance to check what is actually conflicting.
<link rel="stylesheet" type="text/css" href="boostrap.css">
<link rel="stylesheet" type="text/css" href="custom.css">
Related
My php page styling is done but when I added it to my existing html template ( which has header and left menu ) I noticed that template css menu is messed up.
While debugging what part of styling is causing an issue, I realized its due to bootstrap.min.css which I used while referring to w3schools BootStrap Progress Bar:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
Any pointers on how to avoid this? I thought of adding a wrapping container for code but not sure how to make the change. Any suggestions?
This is a difficult issue to solve as bootstrap has a lot of default styling. The only thing I can recommend is:
Be sure that your styles come after the inclusion of the bootstrap stylesheet. This way your styles will overwrite bootstraps styles where there are conflicts.
If this does not fix the issue you will probably have to use the code inspector to find all instances that you think are incorrect and override them in your own stylesheet. This will be tedius, but if you want to use bootstrap and you have conflicts it may be your only option.
Bootstrap used to have a customizer allowing you to download only what you want, but it seems that in version 4 it is a little more complicated to do this. If you are already using version 3.3 then I would recommend downloading a customized version: https://getbootstrap.com/docs/3.3/customize/
I want to create a news aggregator with an interface similar to GoogleNews. Very little experience with HTML/CSS, couldn't do it just with inspect. Is there any way to include (or download) the stylesheet, so I can create an interface similar to Google. I found something like:
<link rel="stylesheet" href="https://ssl.gstatic.com/docs/script/css/add-ons1.css">
But still couldn't get it, even the navigation bar with the search input text in it. I have done all the work on the background, but stucked in the front end, do not know where is the best start point.
Google News has a great deal of its CSS inlined, so you won't find an easy plug-and-play stylesheet like you're describing. I suggest you create a simple three-column layout using Bootstrap or Foundation. You'd save time by not having to remove and/or make sense of all of Google's proprietary markup and CSS and you'd have a better grasp of what's going on.
I am building a personal homepage. I have 4 HTML pages and only one CSS sheet linked for all of the pages. That is, inside a single CSS file I have set up layout for all different pages.
[In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.]
Is it a good practice? Or I should create separate CSS for each page?
An example of that what I have done:
page-1.html:
<link rel="stylesheet" type="text/css" href="design.css">
page-2.html:
<link rel="stylesheet" type="text/css" href="design.css">
design.css:
/*
.......
*/
Just have 1 css file for something so small. When you get into building larger sites you can split your style sheets up into modules.
Have a read through the Scalable and Modular
Architecture for CSS approach as it's a solid way of thinking before you get to a level where you can build out your own css architecture.
Your example shows you using one design.css file for your entire website.
Generally, it is better to have one single .css file containing data for all pages for 2 reasons:
You will allow browsers to cache .css files thus resulting in faster loading times;
It will ease the maintenance process.
I would advise you, if you really want to divide .css in separate blocks to use CSS' #import to divide blocks of code f.e form styles and so on.
It's a good practice. As you said that
In fact, each page has pretty much the same layout, only the contents and their style looks different. And my website isnt that advance.
So keep just one CSS file. Reasons:
It's easy for browsers to keep the cache
It's better for maintenance, as you have all your design rules in just one place.
As your project is small, the CSS file is not so big at all.
If you want to separate the files for organizational reasons, I will suggest you to read about CSS Preprocessors like Less or Sass. With them you can set your styles in separated files and join all of them before the releasing.
There's not universal best practice for doing it. Generally for large projects, it is recommended to separate css among multiple files for debugging and maintenance during development. As your personal website doesn't seem too complicated, it doesn't seem reasonable to separate them out. This type of question has already been answered.
Single huge .css file vs. multiple smaller specific .css files?
One Stylesheet Per Page!
you should keep only one css file. Let me tell you in simple one line, once your website loads in client web browser the static resource can be cached that helped your website to boost and number of web request can be reduce when user browse multiple pages of your website.
I would recommend you use SCSS or LESS.
These pre-compilers will allow you to use valid CSS if you do not want to use the fancy syntax.
They will allow you to modularise your code and then com
(I'm sorta new here so if this isn't the place to ask it, please tell me)
Normally I add <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,400italic,700' rel='stylesheet' type='text/css'> into the <head> of my page. With several pages, there is always a chance for inconsistency/error plus updating every page can be a headache.
Can I instead just use #import url(http://fonts.googleapis.com/css?family=Open+Sans); at the first line of my main CSS file?
Advantage to this is updating one CSS file rather than updating every single page where it's in the <head>. But I've read some answers that say there may be a resource loading problem...but that discussion was 3 years ago. Can't find a current answer addressing this.
EDIT
To avoid SO from thinking this is duplicate, I am asking which is better method for 2015. I am not asking how to add Google fonts to a site under either method.
If you use an #import rule in CSS, browser can't dowload the referred script in parallel, simply because the carrying script has to be parsed before doing any downloads!
Example #1
style1.css and style2.css are loaded using the <link> tag:
Example #2
style1.css is loaded using the <link> tag and style2.css is loaded using #import rule:
To enable parallel downloading, use the <link> html tag instead.
Alternatively, you can inline CSS without using #import rule at all; stylesheet preprocessors can help you with that (e.g. Sass). You can try Node.js task runners (gulp, grunt) to automate such tasks.
Import in css is all right, there were issues several years ago in software like IE6 (only one file was loaded for multiple imports), but as you mentioned this is prehistoric, anyway, if you want to do this really good consider using some loader, like mentioned here, yet, import is all right as long as your webpage will be accesed online.
I'm currently utilizing the Twitter Bootstrap framework to create a personal website.
I've found, however, that the site looks better with slight tweaks to some of the CSS classes; does it matter (not in terms of functionality, but convention) whether I make these changes within the provided bootstrap.css file or should I move them to a separate file containing solely my changes?
Actually, it is not recommended to change any framework! For your case, if you need to make a modification it is recommended to run your CSS file right after bootstrap's. As a result, the browsers render the default CSS of bootstrap and then your modifications without any conflict.
For example,
<-- include your bootstrap file -->
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<-- Your modifications -->
<link href="yourcssfile.css" rel="stylesheet">
hope this helps.
From maintenance point of view, you should put your custom tweaks in a separated CSS file, so (for example) if you'll upgrade/downgrade your Bootstrap version your changes will still be in-tact.
You should also consider, that when dealing with CSS Frameworks, usually you'll have the dev/debug version and the production/minified version. if you change the library code you'll have to take care of all the formats as well (unless you're performing the minification/bundling yourself).