Geek Answers Handbook

How to extend Bootstrap color classes

I am using Bootstrap 3.3.0 on my website.

The only thing I came across is that their contextual classes primary , info , success , warning and danger can be limited.

For example, I have an application that will require several other colors, such as purple, yellow, and possibly some shades between primary and info .

Now, before I start rolling my own .css file with a color wheel, I would like to know if the already known Bootstrap extension exists in context classes.

Then it would be fully integrated into the existing color scheme.

Thanks!

EDIT

No one has answered this post yet ...

Well, for those who want to help not only me, but also many others who have gone, "God ... I am very sorry that I did not have a" yellow "color or a" brown "color, purple 'color ..." when using Bootstrap, I suggest that any color specialist learn how to come up with an extension that extends these color classes.

It should not be so complicated - but there is a science for coding color (which I am not particularly trained in), and if it should be a proper extension, then it must be done in accordance with these standards so that others can use it as well.

+5
source share
5 answers

There is a library @ http://www.colorstrap.com/ , which has loading context classes for all default HTML colors.

Here is what I found to be most useful and prepared.

Some colors are ugly - but you have many possibilities.

He has!

0
source

Actually, I think that Bootstrap will provide us with five contextual colors by default, and this will never be enough for each website, since each of them has a different design, resulting in a different color scheme. I can offer you this.

  • Visit http://clrs.cc/ to see which color can be useful.
  • Learn SCSS and how to control color with lighten and dimming or blending. This means that you define some default colors that are popular and use these functions to use them without defining many new colors. Check out the article
+2
source

I think there is no good answer to your question. Not with the current or next available version (v4).
These special conditional classes are implemented in various components, such as tables, form controls, buttons, cards, tags, progress bars, group list items, links, and texts.
These components can have quite a few modifier rules for each existing conditional class, for example, for .btn-danger

 .btn-danger:hover { color: #fff; background-color: #c9302c; border-color: #c12e2a; } .btn-danger:focus, .btn-danger.focus { color: #fff; background-color: #c9302c; border-color: #c12e2a; } .btn-danger:active, .btn-danger.active, .open > .btn-danger.dropdown-toggle { color: #fff; background-color: #c9302c; border-color: #c12e2a; background-image: none; } .btn-danger:active:hover, .btn-danger:active:focus, .btn-danger:active.focus, .btn-danger.active:hover, .btn-danger.active:focus, .btn-danger.active.focus, .open > .btn-danger.dropdown-toggle:hover, .open > .btn-danger.dropdown-toggle:focus, .open > .btn-danger.dropdown-toggle.focus { color: #fff; background-color: #ac2925; border-color: #8b211e; } .btn-danger.disabled:focus, .btn-danger.disabled.focus, .btn-danger:disabled:focus, .btn-danger:disabled.focus { background-color: #d9534f; border-color: #d9534f; } .btn-danger.disabled:hover, .btn-danger:disabled:hover { background-color: #d9534f; border-color: #d9534f; }

If you look at the source code, you will notice that again an example of buttons, the authors use mixins to generate rules for conditional classes:

 // // Alternate buttons // .btn-danger { @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); }

and somewhere else

 $btn-danger-color: #fff !default; $btn-danger-bg: $brand-danger !default; $btn-danger-border: $btn-danger-bg !default;

and again, somewhere else

 $brand-danger: #d9534f !default;

The rules are hardcoded in the source files, so the only way to achieve something here is to expand these files with new rules and add new colors, basically change the boot file and recompile it .
This is doable, but consider the following:

  • You need to save the code (future updates may not be compatible with your overrides)
  • You need additional tools and skills, at least how to work with sass and how to make your own version of bootstrap.
  • You need to implement these additional conditional classes in many .sass files.
  • Having a “purple color,” as you say, would mean having a 3-4 color palette that you need to check for each component.

There is also a nomenclature problem: .btn-warning, .text-danger, .table-info, etc. have semantic meaning when you propose color names.

I do not see a very good continuation coming out of it.
Who defines the palette for each additional conditional class? These rules are weighted even in bytes; you do not want to have so many conditional classes to cover most users.

Instead, you may need a rule generator for each conditional class that you decide to add. A tool like this can be executed, but again, it must be supported as well as retro compatible. For example, there are 7 versions for more updated than yours (3.3.0, still in LESS) plus the new v4 (SASS) Is it worth it?
Usually these conditional classes are sufficient for most purposes, and if you want, generate custom bootstrap versions with different color combinations.

+2
source

To achieve this easily, I will tell you what I did. I created my own css library, which I load after boot. How to do it right? There, for example, (create your own boottrap btn- * classes), you must copy one of the btn- * classes. Then add the word you want. FE:

 .btn-earth{/*same as bootstrap but changing the following */ background-color: brown; color: white; font-wheigt: bold; border:none;} .btn-sun{/*same as bootstrap but changing the following */ background-color: yellow; color: black; border:1px solid orange;}

But if you need to redefine something: Since the bootstrap classes sometimes have an exact selector, you will have to copy the same selector to apply the bootstrap class. Use! It is important if you need it (but not recommended, because you can edit it in a specific case). So, if bootstrap has 3 selector accuracy levels, it should use the same one (as your library will load after boot, it will be priority ONLY if you load bootstrap css from local rather than CDN, in which case you will need to create more exact selectors than bootstrap) FE:

 /* bootstrap selector: */ .navbar > li > a {/* whatever */} /* if you load bootstrap by CDN you must create an accurated one as follows: */ .container > .navbar > li > a {/* whatever */} /* you'll have to remember that you have to set the navbar inside a container to make it sense */

If I have extra time (after my 11 daily hours of working in front of a PC), I will compile the css library to complete this task and provide some documentation. I am sure that there should be a library somewhere on the network, but this is mainly a private matter, so if you use the purple button, it may not be the shadow of the purple that you wanted ...

Hope this helps! you can do this quickly by writing your own css library in turn, when you need it, after a couple of projects you will have an extended one. =)

Hooray!

+1
source

Two possible ways to accomplish this in Less.js (which has its own extension functionality):

http://lesscss.org/features/#extend-feature-extend-syntax

Mixins is a slightly different approach - you can create a reusable CSS snippet that you can invoke in other Less blocks.

https://www.sitepoint.com/less-beyond-basics-bootstrap-mixins-library/

Any of them should be sufficient to perform the desired task.

0
source

More articles:


All Articles