Add 16 new colors to Bootstrap 4 and new components and styles.
These are experimental stylesheets I made while was learning SASS. I don't know if they are compatible with all browsers and I'd be very happy if you send me feedback.
- ncb.css is formatted. (Good for know how works)
- ncb.min.css is in one line and weights less. (Faster, good for only use it)
You can download the file you prefer (.css or .min.css) directly, copying the code and pasting it in your proyect or add the jsDelivr CDN (.css or .min.css, you pick)
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jebbarbas/newcolorsbootstrap/ncb.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jebbarbas/newcolorsbootstrap/ncb.min.css">
Don't forget to add the .js file too
<script src="https://cdn.jsdelivr.net/gh/jebbarbas/newcolorsbootstrap/ncb.js"></script>
<script src="https://cdn.jsdelivr.net/gh/jebbarbas/newcolorsbootstrap/ncb.min.js"></script>
Or you can add: Bootstrap CSS ,Bootstrap Bundle JS, Ncb CSS and Ncb JS with one line
<script src="https://cdn.jsdelivr.net/gh/jebbarbas/newcolorsbootstrap/ncb.min.js" class="add-full-kit"></script>
You can put the <script> in the <head> or in the <body>, it doesn't matter 'cause I use the event 'DOMContentLoaded' to apply the JS.
You need first to have Bootstrap 4 (or 5-beta), this stylesheet doesn't contains Boostrap 4 styles, only new colors for them. Once you have Bootstrap, use it normally, but you can use the colors: 'magic', 'juice', 'ocean', 'cake', 'brick', 'blood', 'mustard', 'militar', 'lapislazuli', 'grass', 'leaf', 'coral', 'love', 'clay', 'chocolate' and 'elegant'. And then put them when normally you put 'primary' or 'success'
<button class="btn btn-magic">Magic Button</button>
<div class="alert alert-juice">Juice Alert</div>
<button class="btn btn-outline-ocean btn-sm">Small Outline Ocean Button</button>
<span class="text-blood">Some text in blood color</span>
- 'magic' color.
- 'juice' color.
- 'ocean' color.
- 'cake' color.
- 'brick' color.
- 'blood' color.
- 'mustard' color.
- 'militar' color.
- 'lapislazuli' color.
- 'grass' color.
- 'leaf' color.
- 'coral' color.
- 'love' color.
- 'clay' color.
- 'chocolate' color.
- 'elegant' color.
- 'Callout' component.
- 'Sidebar' component.
- 'Circle' component.
- 'Circle-State' component.
- 'Login' component.
- 'Icon Margin' style.
- 'Opacity' style.
I added also the SASS source code. Lov U All.
For a detailed guide about how to use ncb.js see the file newcolorsbootstrap.pdf.