Use case:
I have main stylesheet - main.less and another one for particular section of site - app.less.
Also I use Twitter Bootstrap. And for example in main.less I have several overrides for bootstrap, and in app.less I want to mixin Bootstap class into my own one (lets take - .clearfix) - for more DRYness of my code. So I will import bootstrap.css in it and mixin needed class. On web-page at first I will include Bootstrap and other libs, then main.less and then app.less. And that will make overrides in main.less cleared, and all becomes to be messy!
How to correctly do such imports? Is it possible at all with any CSS preprocessors, not only LESS?
Is including bootstrap into the less files an option for you, like you do in development?
My approach in SCSS is like that:
style.scss (doesnt have any own declarations)
imports bootstrap.scss first
then imports site specific .scss files, which may contain overrides.
By doing that I can fully control the order of the files and therefore the order of declarations in the generated css file.
Of course one has to decide to trade in the ability to let Bootstrap load via CDN when included, but in my case I use a very down narrowed version of Bootstrap anyway.
Bootstrap is not meant to be used like that. I mean if you use the compiled version, you should not override it. The idea is to use the less files and modify them. The approach which you are using is kinda messy and I think that there is no elegant way. I'll suggest to avoid including of compiled bootstrap.css and checkout the pure less version.
Related
As my Angular 2/4 app is growing more and more I have more than a hundred components, and each component has its CSS file.
Do you think it would be better to declare a CSS file in index.html and have all my styles there?
As I could apply specific CSS rules to a component by referencing its selector...
The CSS/SCSS/LESS-Files (depending on what you use) in default follow some convention, starting with your src/styles.css in the root of your Source-Folder.
In the src/app/app.component.css you'll dive on step "deeper". Finally you got the CSS-Files for each of your components.
I think it is meant to be like that:
Global styles, that apply to all of your Applications-Styles (like html and body style-definitions) should be declared in the src/styles.css. A bit more app specific, yet global styles for the Angular-App itself should be declared in src/app/app.component.css.
Specific Definitions that apply only to a single component should be declared directly in the components css-file.
This way you can keep your CSS organized and follow along the DRY (Don't repeat yourself) rule :)
regards
imo you should have separate css files for each component but also one global css file for shared styles
Having separate file for each component is a very good idea.
To maintain a scalable project with nice and clean CSS architecture I would recommend something like ITCSS
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
Consider using preprocessor such as SASS and LESS if u are not using them yet.
Searching on topic how to customize the original bootstrap CSS I mainly found power tools and generators what are emit a "patched" bootstrap.css to use instead the original.
I am very beginner in bootstrap, so first I would like to see clear the best practices before I invest hundreds of workhours to do something dumb and not recommended thing.
My question: Is this the way? I mean editing (automatically or manually) the bootstrap.css. Sounds not good for me, I am hoping I missed something.
Is there any alternative way, say creating a tiny mycustom.css and only define the differences there. Could anyone point out how to redefine just the standard colors?
Best option if you`re are beginner is to generate a new bootstrap.css with the oficial generator http://getbootstrap.com/customize/ and so you also could test changes in other Bootstrap variables. I think that overwrite css properties with your own CSS file can be painful sometimes...
Best option (need time to learn) is import Bootstrap as LESS (not CSS) and then create your own variables.less file, where you will define values for all Bootstrap variables that you want to overwrite.
Don't edit bootstrap.css.
Instead create your new css file and add new values in that file and make sure that this new file is loaded after bootstrap.css .
For small changes include your own .css file after including bootstrap, overwriting the css components of bootstrap. This is what bootstrap advises (check bootstrap components page)
body { padding-top: 70px; }
Make sure to include this after the core Bootstrap CSS.
This website demonstrates exactly how to override Bootstrap's CSS without doing naughty things like using !important in your own CSS files (which should be avoided). You simply create a new custom.css file and add in your overriding styles there.
I would not directly edit the LESS/SASS Bootstrap files.
I have downloaded bootstrap less. I saw one mixin folder inside it containing files with same name. e.g alert.less. So what is the use of mixin files.
And what are the best practices to customize less file. a small example will be helpful.
Bootstrap also has a huge list of mixins that you can use in your own Less. These mixins allow you to quickly add common attributes to any styles you make. And with the way that Less lets you use parameters, you don’t have to do anything but specify how you want things to appear. For instance, one of the more common needs is a gradient. Bootstrap has a mixin already made, so all you need to do in your style is add this inside of the style you want it to mix into
Check this out for example
I made a remake of an older website which used tables for everything (structure and content). Now I did it in a (hopeful) "more modern way". All basement-things are div's now, but in my content I still use tables because I always have to display stuff as a table, and why I shouldn't do this with the table-tag?
Anyway, now I'm about to sort the CSS stuff, and try to organize it in a efficiency way. How do you do this ? ...
I got a main.css which should store all stuff which is used more then once in different files
One css file for each page in case that I have to edit some stuff written in main.css
but what if I got the CSS tag input { width: 150px; } in main.css, and input { width: 100px; } in idontknow.css. It works (that on idontknow.html the input is 100 isntead of 150 px, but is it a way modern web-developers do?
What about having a central point for maintenance which could mean placing all stuff in one CSS file?
First of all, if you want to build a modern website from my points of view, you should definitely use CSS Preprocessors like SASS or LESS.
I suggest you to use Foundation Zurb Responsive framework. It's mobile first, because every single modern website should be responsive. It uses SASS and there are 3 ways of getting started using it.
SASS allows you to create and separate your styles for each page, without messing them together. So basically you will have _home.scss, _header.scss, _footer.scss, but when you compile - you will have everything created in one style file. Additionally CSS and JS can by minified as well.
I suggest you to start with - SASS
After that to get yourself familiar with Foundation
You could use something like SASS/SCSS (http://sass-lang.com/) to work organized with your stylesheet files, and compile them into a single main.css for the production site.
In development, it is not necessary to have quick loading times, but on the production site, a single CSS file will speed up the loading process of the page.
You could use SASS.
But...
Have you heard about web components or Polymer-project?
https://www.polymer-project.org
The main idea is make use of styles and scripts inside each component, so that you could have the right place to put your styles and also, for the purpose of web components, reuse your components (new html elements in Polymer) anywhere in your html files.
And of course you could have a main.css for the whole page.
You should try to have only one Stylesheet in the end. It´s just the best for the performance of your website because it saves one request.
You can achieve that by using classes and IDs. As Pete mentioned you can also target body-elements with a class or an ID. And you can also give Elements multiple Classes.
After downloading a complete pack of bootstrap 3 from http://getbootstrap.com, I noticed that there is a separate css file for theme. How to make use of it? Please explain?
I included bootstrap-theme.css in my existing bootstrap project, but there is no difference in output.
Upon downloading Bootstrap 3.x, you'll get bootstrap.css and bootstrap-theme.css (not to mention the minified versions of these files that are also present).
bootstrap.css
bootstrap.css is completely styled and ready to use, if such is your desire. It is perhaps a bit plain but it is ready and it is there.
You do not need to use bootstrap-theme.css if you don't want to and things will be just fine.
bootstrap-theme.css
bootstrap-theme.css is just what the name of the file is trying to suggest: it is a theme for bootstrap that is creatively considered 'THE bootstrap theme'. The name of the file confuses things just a bit since the base bootstrap.css already has styling applied and I, for one, would consider those styles to be the default. But that conclusion is apparently incorrect in light of things said in the Bootstrap documentation's examples section in regard to this bootstrap-theme.css file:
"Load the optional Bootstrap theme for a visually enhanced experience."
The above quote is found here http://getbootstrap.com/getting-started/#examples on a thumbnail that links to this example page http://getbootstrap.com/examples/theme/. The idea is that bootstrap-theme.css is THE bootstrap theme AND it's optional.
Themes at BootSwatch.com
About the themes at BootSwatch.com: These themes are not implemented like bootstrap-theme.css. The BootSwatch themes are modified versions of the original bootstrap.css. So, you should definitely NOT use a theme from BootSwatch AND the bootstrap-theme.css file at the same time.
Custom Theme
About Your Own Custom Theme: You might choose to modify bootstrap-theme.css when creating your own theme. Doing so may make it easier to make styling changes without accidentally breaking any of that built-in Bootstrap goodness.
For an example of the css styles have a look at: http://getbootstrap.com/examples/theme/
If you want to see how the example looks without the bootstrap-theme.css file open up your browser developer tools and delete the link from the <head> of the example and then you can compare it.
I know this is an old question but posted it just in case anyone is looking for an example of how it looks like I was.
Update
bootstrap.css = main css framework (grids, basic styles, etc)
bootstrap-theme.css = extended styling (3D buttons, gradients etc). This file is optional and does not effect the functionality of bootstrap at all, it only enhances the appearance.
Update 2
With the release of v3.2.0 Bootstrap have added an option to view the theme css on the doc pages. If you go to one of the doc pages (css, components, javascript) you should see a "Preview theme" link at the bottom of the side nav which you can use to turn the theme css on and off.
First, bootstrap-theme.css is nothing else but equivalent of Bootstrap 2.x style in Bootstrap 3. If you really want to use it, just add it ALONG with bootstrap.css (minified version will work too).
Bootstrap-theme.css is the additional CSS file, which is optional for you to use. It gives 3D effects on the buttons and some other elements.
As stated by others, the filename bootstrap-theme.css is very confusing. I would have chosen something like bootstrap-3d.css or bootstrap-fancy.css which would be more descriptive of what it actually does. What the world sees as a "Bootstrap Theme" is a thing you can get from BootSwatch which is a totally different beast.
With that said, the effects are quite nice - gradients and shadows and such. Unfortunately this file will wreak havoc on BootSwatch Themes, so I decided to dig into what it would take to make it play nice with them.
LESS
Bootstrap-theme.css is generated from the theme.less file in the Bootstrap source. The affected elements are (as of Bootstrap v3.2.0):
List items
Buttons
Images
Dropdowns
Navbars
Alerts
Progress bars
List Groups
Panels
Wells
The theme.less file depends on:
#import "variables.less";
#import "mixins.less";
The code uses colors defined in variables.less in several places, for example:
// Give the progress background some depth
.progress {
#gradient > .vertical(#start-color: darken(#progress-bg, 4%); #end-color: #progress-bg)
}
This why bootstrap-theme.css totally messes up BootSwatch Themes. The good news is that BootSwatch Themes are also created from variables.less files, so you can simply build a bootstrap-theme.css for your BootSwatch Theme.
Building bootstrap-theme.css
The right way to do it is to update the Theme build process, but here here is the quick and dirty way. Replace the variables.less file in the Bootstrap source with the one from your Bootswatch Theme and build it and voila you have a bootstrap-theme.css file for your Bootswatch Theme.
Building Bootstrap itself
Building Bootstrap may sound daunting, but it is actually very simple:
Download the Bootstrap source code
Download and install NodeJS
Open a command prompt and navigate to the bootstrap source folder. Type "npm install". This will add the "node_modules" folder to the project and download all the Node stuff you need.
Install grunt globally (the -g option) by typing "npm install -g grunt-cli"
Rename the "dist" folder to "dist-orig" then rebuild it by typing "grunt dist". Now check that there is a new "dist" folder which contains all you need to use your custom Bootstrap build.
Done. See, that was easy, wasn't it?
I know this post is kinda old but...
As 'witttness' pointed out.
About Your Own Custom Theme You might choose to modify bootstrap-theme.css when creating your own theme. Doing so may make it easier to make styling changes without accidentally breaking any of that built-in Bootstrap goodness.
I see it as Bootstrap has seen over the years that everyone wants something a bit different than the core styles. While you could modify bootstrap.css it might break things and it could make updating to a newer version a real pain and time consuming. Downloading from a 'theme' site means you have to wait on if that creator updates that theme, big if sometimes, right?
Some build their own 'custom.css' file and that's ok, but if you use 'bootstrap-theme.css' a lot of stuff is already built and this allows you to roll your own theme faster 'without' disrupting the core of bootstrap.css. I for one don't like the 3D buttons and gradients most of the time, so change them using bootstrap-theme.css. Add margins or padding, change the radius to your buttons, and so on...