I've seen tutorials about modifying Bootstrap by overriding existing styles. However, the question I can't seem to wrap my head around is how do I remove certain styles Bootstrap enforces without directly deleting or commenting out that section in the source code?
For example, I don't want to use any of Bootstrap's #media print styles. My current solution is directly commenting out that section. However, I don't think this is the best way to go about it.
If there are only a few elements that you want to get rid of, you can override them and cancel their styles from your own stylesheet. Let's say that an element has a 1px solid #ccc border and that you don't want that, you can override it with 1px solid transparent (or just border: none;) in your own stylesheet.
That being said, if you have to modify large chunks, then it's a lot easier to just edit the source code, remove what you don't want/need. Or, go the other way around, only add what you want/need to your own CSS if there isn't too much.
You best choice will be to use the LESS (or SASS) version of bootstrap and compile it yourself. Commenting out unneeded parts is then done in bootstrap.less and as simply as:
// ...
// Reset and dependencies
#import "normalize.less";
//#import "print.less";
#import "glyphicons.less";
// ...
Related
i feel like this may be simple enough and I'm just missing it. I recently went to 7-1 folder structure instead of a single scss file. What i'm having difficulty with is referencing .panel(or h2 or span) in _typography.scss to do font-styling and reference the same .panel(h2,span, etc) in my _layout.scss.
I understand from a CSS pov this wouldn't be logical to have them broken up as of sequencing, however, from a sass pov, I feel like there should be a way to structure this so my CSS doesn't have .nav-container mentioned twice.
Just to note, I'm using NPM, not an ide compiler. Maybe I'm just going about structuring generally incorrect and shouldn't separate them.
Please advise,
UPDATE ANSWER
I've marked Frish's answer here correct because the way that they set it up is correct, but after several and i mean several days of research, i've decided to add some context as I see many others have created simiar threads.
The way I initially looked at SASS was incorrect. I was trying to make SASS work in a way i thought would eliminate complexity: (having .nav-container {} typography rules in a typography partial, then .nav-container {} layout in a layout partial.) This isn't the right way of thinking.
The real benefits are all the built in functions (placeholders,mixins, extends) that drive the magic of making SASS more effective.
However, there is a way to still do what you're looking to do, styling selectors across different partials, for example, separating typography styling from layout styling, and so forth, for particular selector. This was a major wakeup call. Passing Style Blocks (or Content Blocks) to a mixin or whatever. So for example:
#mixin button {
font-size: 1em;
padding: 0.5em 1.0em;
text-decoration: none;
color: #fff;
#content;
}
.button-green {
#include button {
background: green
}
}
Finally,
this link(https://openclassrooms.com/en/courses/5625786-produce-maintainable-css-with-sass/5951856-write-cleaner-code-with-sass-extensions) is where it really clicked for me
Look at the section paragraph that starts with "extensions are a lot like mixins." Review this example as it should be easy to apply its setup and way of structuring to what you're trying to do.
Getting deeper into this, i did some googling on "passing style blocks" and "sass passing content blocks" and that helped a ton on how to leverage placeholders, mixins, and extends effectively while still maintaining the simplicity of sass structuring.
This isn't a concrete answer as there are many ways to approach this (as you are undoubtedly aware), but here are my thoughts.
I typically use generic stylesheets (_typography, _layout) for generic elements (h1,h2,h3, .section, .container perhaps). Any element that merits special mention in multiple files potentially merits being its own component (e.g. panel.scss).
This does increase the numbers of folders and files floating around, but I still find this preferable to one, or a few, big files. I usually end up with a main.scss file that looks like this:
// main.scss
#import "_variables.scss";
#import "_typography.scss";
// etc....
#import "./components/panel.scss";
#import "./components/navContainer.scss"; // or, nav-container.scss!
// etc....
Components happily override generic styles, and I can track their CSS in individual files. Happy dev! You can sub-divide components or other files as you see fit.
This question is less of a code question and more of a best-practices question. I am working on a custom bootstrap theme based on https://github.com/HackerThemes/theme-kit. I have a working theme that I like, however, I am overriding some styles in the original Bootstrap theme. Even in the minified CSS, these are duplicated. For example, Bootstrap defines...
.btn-danger:hover {
color: #fff;
background-color: #ae130b;
border-color: #a2120a;
}
...but my code also defines...
.btn-danger:hover {
border-color: #0000;
}
In the final stylesheet, both of these styles are present. The second style overrides Bootstrap and it looks just fine. However, this leads to useless code. First of all, is there a postprocessor of some sort that I can use with Gulp to eliminate these duplicates and consolidate them? Second, should I just fork the Bootstrap repository and modify the original SCSS directly?
It depends on what you #import. Looking at mytheme.scss, the entire Bootstrap SASS is imported, creating full duplicate code in the final CSS.
Instead you can pick specific SASS files to import and look at the option variables which also effects what CSS is generated. For example, setting $enable-grid-classes: false will prevent duplication of the entire grid system in the generated CSS.
I have the following line in my tables.less, that I do not want in my code.
th {
text-align: left;
}
Problem is, that I do not have tables.less in my website directory, so I can't remove the line - and I cannot override the text-align, as I don't want any text-align at all.
How can I edit or remove elements from the Bootstrap 3 tables.less?
To remove this you can go to http://getbootstrap.com/2.0.4/less.html and learn how to generate CSS from the Bootstrap LESS code and how to use that in your code. You can modify some things on the webpage, but I think you'll need to get the LESS files, remove this snippet you don't want and compile the CSS.
Otherwise you can download and edit the bootstrap CSS where you remove this code. Then you'll need to use your version of the bootstrap CSS
Or the simplest thing would probably be to create your own CSS rule to override the Boostrap rule and place it in your own CSS file or script
I have some h1, h2, h3 and a lot of bootstrap snippets that I want to apply only to a specific part of my site, I added a unique class, say .unique but it would take hours to prefix over 1000 of CSS lines
I use sublime text
Thanks in advance
You could use a CSS-preprocessor like LESS or SASS (there are more). Both can do what you want, by just doing this:
.unique {
// Old CSS goes here
}
The have many other advantages over normal CSS.
common I would like to give you some ideas, cause i think your question has something to do with control css overriding.
the Jost's LESS or SASS solution is very good actually to prefix cause can use nested css features, but it requires a compile process, their eventually compiled files are still css. cause the .less or .sass files can not be recognized for html to render styling.
Another thinking To avoid css conflicts and wrong overriding,
Instead of including global styling, see if you can embed them in part of the specific section/page where they can get higher priorities than the rest global styles.
even the same css, generally, !important > inline css > internal css > external css
or javascript can trigger css override after previous css finished rendering on the page.
Instead of using css priorities or script running priorities to override styles, making two external mobile.css, destop.css for example, then using javascript to reload page to include different stylesheet when device width are detected to have been changed in browser resizing behavior.(This is one pop way used in responsive view)
using IDE to locate css patterns and replace them with your prefix if it's simple to match all the patterns.
In a Rails app I am using Twitter Bootstrap as a starting point. Twitter Bootstrap uses some of the HTML5 Boilerplate reset which includes this gem:
#media print {
* {
color: #000 !important; /* Black prints faster: h5bp.com/s */
}
}
(note the linked article is from 200-effing-8)
My app outputs PDF using pdfkit/wkhtmltopdf and due to the above declaration all pdf output is black on white. The whole point of pdfkit/wkhtmltopdf (to me, in this app) is for PDF output to match the screen.
Is there any way for me to override this declaration in my stylesheets after Bootstrap is imported? I want it to be something along the lines of "auto" but that doesn't appear to be valid.
I can, of course, comment out the line in Bootstrap, but I'd rather avoid changing the source if I can (since I'm bringing it all in via the bootstrap-sass gem). I could also tell pdfkit/wkhtmltopdf to not use "print" stylesheets, but that creates different problems.
I've tried setting it to "inherit" but functionally that isn't what I'm after, and it doesn't seem to work anyway.
Thanks.
I would comment it out in the bootstrap css. The asterisk selector is a wildcard which will set all text content to black. Otherwise you would have to write out a lot of individual CSS rules using id or class to override. If most of the text content on your site is already set to black or a dark enough color, then you don't need that CSS print rule.