How exactly is one to know what all needs to be overridden with the bootstrap styles when customizing the look and feel?
Is there a trick to find out where exactly I need to set the style in order for it to take precedence over the bootstrap style?
For example, I've been battling two days making form fields look the way the customer wants them. The default of bootstrap when wrapped up in the form-group row and form-control nested layers comes in with a tall field with rounded edges. I've created my own class setting everything to 0 for the padding and margin. I have also set the height to just 18px. NOTHING gets picked up.
I had the look and feel almost perfect earlier but I was not using any bootstrap stuff just html and css. The lead developer said we need to use bootstrap styles and just tweak what needs tweaked to fit the look and feel. Well, that sure as heck is easier said than done.
I miss the days when a designer specified what the look and feel was and we just coded the style and were done with it. This library usage of the 80% solution and 100% effort on top of the 80% does not seem to be a great approach unless it's for maximizing what the client is shelling out.
Override the styles using your own file.
Don't update the Bootstrap SCSS files to fit your needs. This can lead to many unforeseen issues. Say you want to share or update to a new bootstrap version. Combining the files and/or rewriting your work will be a hassle.
'If you make changes directly to the default bootstrap.css stylesheet, it would become very difficult to maintain and keep track of changes.'
How to Customize Bootstrap – UX Planet
Don't edit the actual bootstrap file, if you are manually importing it to your project.
Just make your own stylesheet, and make sure to import it after the bootstrap import.
There are 2 ways to do it.
1) Edit Bootstrap SCSS to fit your needs. This way you can customize it quickly and by generating custom CSS, not just overriding it. This is probably the easiest way to do it.
2) Override CSS with custom style. This is easy if you know Bootstrap and what style each element have. Just open Boostrap CSS find what you need and override it. It may be tricky because sometimes Bootstrap uses !important. One last thing - place your CSS after Bootstrap!
It appears to me that the underlying issues (or you can say something I did not know) are that the defaults for Bootstrap have padding, margins and other settings greater than 0. So, any tag that I use of bootstrap I'll need to override to set the values to 0 in order to get things to layout as the client wants.
By overriding, I do not mean altering the Bootstrap actual css file but rather in your own css file specify the bootstrap style that you are overriding.
Thanks all for your links and suggestions. Greatly appreciate it.
Helpful tips on using debugging tool: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS
Related
We are using ngzorro (angular third party material) in our project. The project is almost halfway through. We face some issues in customizing styles. Management asking whether we can continue with ng zorro or style using normal CSS.
Can anyone please suggest at this point which is good? Following ngzorro or designing using your own CSS.
My project is completely done so far using ngzorro. My project involves various forms and charts. Also please tell me the drawbacks of using angular materials instead of styling using normal CSS.
I tried to follow the style of ngZorro where I could. In some cases where it was needed like:
text color of enabled and disabled elements
background color of enabled and disabled elements
width and height
margin and padding
own icons and text
I applied some own css rules.
As always it depends on the complexity of your project and given design. Regarding my experience I remember that applying your my own CSS rules was easy to accomplish and not that time consuming.
Regarding the drawbacks...
Using angular material design and defining you're own css classes is no contradiction. Thanks to angular material and it's friends I'm not in the pressure of reinventing the wheel. It's well thought out and went though a lot of dev stages my own CSS would need to go it self. I rather like to extend the given design where it is needed.
I designed a page. Everything was working fine, and then I was going to add a carousel into a mobile media query in lieu of what I had already had, and noticed that just by loading in Bootstrap all my page got messed up.
What is bootstrap changing, or overriding? Or what does Bootrstrap override by default that I don't know about. I tried googling for an answer for a few hours but couldn't find anything. I even checked an article top 10 common mistakes with bootstrap.
you could potentially have class names that are also bootstrap class names, which would override whichever styles you had on those classes. If you look at the bootstrap documentation you can compare your class names to bootstraps. whichever components of yours are effected, check for similar components from bootstrap and you may just have to change some of your class names.
Double check your media query. You might have set it wrong.
Also, which carousel are you using? Bootstrap carousel? Please upload some attachments for better understanding.
This might seem a bit unorthodox, but I am trying to use Bootstrap with the website I'm working on now, but don't have access to the head section of the site itself.
Ideally what I'd like to do is to use the Bootstrap CDN, which is available from getbootstrap.
The other option would be to take the CSS I might need from the Bootstrap downloaded CSS files and do the code inline, but this, obviously, would be a bit more work.
So, my question would be -
1) Is it possible to link to the Bootstrap CDN outside of the head?
2) Are there any alternatives I'm not thinking of?
3) Is copying and pasting inline the only way to do it?
We'd need the head developer, with full access, to implement it in the head itself, who has a lot on their plate and this would likely feature quite low on the list of things to do, so if I could do something myself then it'd be great.
You can include external CSS like Bootstrap in the body section however it is considered as a bad practice. What actually happens when you include the external CSS in your body section is that your content gets posted before getting styled and then gets styled later. In short, what im trying to say is that it works but it has a few drawbacks.
I can not think of any other alternatives.
how are you I know too late to answer but I just wanted to tell my opinion.
I think no, there is no solution to add CSS link stylesheet outside the head section.
with my all love and respect, Ahmad Itani
I've developed an instant messaging component using AngularJS that adds instant messaging functionality to any web page. The component is fairly complex it's style sheet runs to about 800 lines.
I'm having a problem when the component is deployed to third party websites. Sometimes the CSS from the host website affects the styles of the chat widget.
The screenshot is used when the component is added to a fresh Wordpress install. You can see that the button text is overridden by the Wordpress style to be upper case.
The problem is this component will be deployed to tens of thousands of websites so it wouldn't be practical to solve each small issue on a case by case basis. It would also be impossible to know if these changes would have a knock on affect to another website.
The approach I'm currently considering is to create a very comprehensive reset stylesheet - I'd override all possible styles on all elements. That would give me a fresh canvas to start with.
This seems like a pretty onerous task so I was wondering if anyone had devised a better solution?
Note:
An iFrame isn't possible because the chat has to overlay the original web page
Like Luca suggested, using a namespace is the correct answer.
While you could use !important or an iframe I dislike both of those answers and here's why.
Why you shouldn't use !important
Your goal is to create CSS that can't be overridden. Using !important
doesn't actually solve that problem. I could still override your
styling by using the same specificity that you have. It is however, a pain to do.
Mozilla specifically recommends that you don't do it.
As you've said yourself, this could be used on 100k+ websites. The likelihood that you're going to override someone else's styling is pretty high. Using !important is going to ruin their day. You've effectively taken the cascading out of CSS. As a rule, use the least amount of specificity that you can comfortably get away with. This makes everyone's life easier.
Why an iframe is not the answer
I'm not nearly as opposed to using an iframe as I am to using !important but there is some negatives that you need to be aware of.
iframes give control to you (the plugin maker) at the cost of the user. e.g. The user has no choice in being able to match your iframe's responsiveness with their site. It's entirely likely that some user is going to have a specific breakpoint that isn't going to play nice with your plugin.
Your styling is impossible to override. This point could be seen as a positive for you but I find that it's a negative to the user. Being able to style the colors of your plugin helps make the plugin a part of the site. It's a guarantee that your plugin's colors won't mesh well with some sites. Letting the user change the colors is a must for me.
Using Namespaces
The idea is pretty simple. Let's say that your app is called SuperIM2000. All you do is make sure that there's a container with the same class name and that you use it to target your styling. This has the added benefit of allowing you to use very simple class names e.g. button.
HTML
<div class="superIM2000">
<input class="button" />
</div>
CSS
.superIM2000 .button{
color:#000;
}
As you can see, the specificity is very low. However, the likelihood that you're going to override someone else's styling is extremely low. This has a benefit to the user as well. It's possible that the button class is already used in their site and it can take advantage of any inheritance that you haven't overridden.
namespace your classes to avoid any possible clashes
reset all styles (super tedious I agree)
if you really want to go hardcore, I would not recommend any of the below but they are available options:
use !important
use inline styling with the above
This is a very newbie question but I did not manage to find an answer to it.
I have the html5boilerplate in my rails application using comet. But how do I continue? Seems all h1-h5 are the same font size and tables are not styled in any specific style.
I originally wanted to have a simple CSS that has default styles for most elements like Sinorcaish or Blueprint so that I can start coding the website itself without worrying much about styling. Did I take the wrong library for this? Is there a css that goes on top of html5boilerplate to give me a nice style? should I use Blueprint/Sinorcaish on top of html5boilerplate?
It's an overall reset type of HTML template. You would style the site without worry of too much differing between browsers that are HTML5-ready (actually, it's IE6-capable, too).
Use it, it's the bomb, believe me.
You could always just use a CSS reset stylesheet.