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
Related
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
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 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.
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.