Bluce

Goal of this project is to make Bootstrap themeable with CSS variables.

Why?

You already can customize Bootstrap with Sass variables. The problem is: only at build time. When you want to have multiple themes, like one dark and one light theme, you have to have two CSS files. Both of them has to contain the entire Bootstrap code.

With CSS Variables, you can change the values at runtime! E.g. with JavaScript or with CSS @media queries.

Usage

Take a look at scss/_use-css-variables.scss, scss/_my-themes.scss

Workarounds

Contrast color (color-yiq)

Bootstrap has the Sass function color-yiq which dynamically finds out if it should a dark or light color, depending of the background color. So yellow will get a dark text color and red a light text color.

Unfortunately CSS can't compare colors like this, so by default the text colors will always be light where this function is used:


<button class="btn btn-light">You can't see me</button>

To workaround this, just also set the utility class text-dark:


<button class="btn btn-light text-dark">You can't see me</button>

Components

Typography

Headings

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading

Lead

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

Styles

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

And this is a muted text.

abbr abbr+init

Colors

.text-primary .text-secondary .text-success .text-danger .text-warning .text-info .text-light .text-dark .text-white

Primary link Secondary link Success link Danger link Warning link Info link Light link Dark link White link

Inline code

For example, <section> should be wrapped as inline.

y = mx + b

To switch directories, type cd followed by the name of the directory.
To edit settings, press ctrl + ,

This text is meant to be treated as sample output from a computer program.

Displays

Display 1

Display 2

Display 3

Display 4

Sample body

Lórum ipse - mint senyért - nyált ságos iség, ahol beles metás, csaprozás, vermény, csaprát és más meni zsorlóca kuncáskodik. Mosztag, férzet napé, fuvódás 11, törnyélés ; valamint szuvegés vitancs: a dozmus drikója, jultsás kelés magyarul. A szuvegés és gyarány pasztákban buggyos mendernyékről, filingéjükről és pucájukról húzódik a fabampa. Hűtő benne a legújabban belég mendernyék mártja is, részletesen sáskodik a kétenc fríg lepkonyaival. Csétletésről cigál le egy kéző lengelész csapárába rimulnia, ahol három másik szivény együtt érleti spotráit. Ha a bénulás summája kalkodik, úgy púdulhat, mintha az volna a sülső csoltása, hogy a szedhentes és egyes tengyelét lécetse ki a pávágyokból. Ez vajon vertető ölyök vagy vegítő dosna? Szalalizál bunya a felegesben olyan szellőző kedő, amely farisban kevetteti a nyagondos hizmusok „énemlő” lárias mizmusait?

Code block

/**
   * @author John Smith <john.smith@example.com>
   */
  package l2f.gameserver.model;
  
  public abstract class L2Char extends L2Object {
  	public static final Short ERROR = 0x0001;
  
  	public void moveTo(int x, int y, int z) {
  		_ai = null;
  		log("Should not be called");
  		if (1 > 5) { // wtf!?
  			return;
  		}
  	}
  }

Blockquote

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

...centered

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

...on right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title

List

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

...unstyled

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem

...inline

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat

Definition list

Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.

Background colors

.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
.bg-white

Images

Responsive image

responsive image

Thumbnail

thumbnail image

Figure

Figure
A caption for the above image.

Media

Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Generic placeholder image
Media heading
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Tables

Table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Inversed table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table with colors

Note: Use table-* classes.

Type Column heading Column heading
Default Column content Column content
Active Column content Column content
Primary Column content Column content
Secondary Column content Column content
Success Column content Column content
Danger Column content Column content
Warning Column content Column content
Info Column content Column content
Light Column content Column content
Dark Column content Column content

Inversed table with colors

Note: Use bg-* and text-* classes.

Type Column heading Column heading
Default Column content Column content
Primary Column content Column content
Secondary Column content Column content
Success Column content Column content
Danger Column content Column content
Warning Column content Column content
Info Column content Column content
Light Column content Column content
Dark Column content Column content

Default header

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Inversed header

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Small table

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

List groups

...with actions and colors

Buttons

General buttons

Outline buttons

Sizes

Groups and dropdown

Pagination

Jumbotrons

Default jumbotron

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.


It uses utility classes for typography and spacing to space content out within the larger container.

Learn more

Fluid jumbotron

Fluid jumbotron

This is a modified jumbotron that occupies the entire horizontal space of its parent.

Cards

Various types of cards

This is some text within a card block.
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere
Card image
Card image cap

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap
Card image cap

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Colored cards

Header

Primary card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card

Some quick example text to build on the card title and make up the bulk of the card's content.

Cards with colored borders

Header

Primary card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Secondary card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Warning card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Info card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Light card

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Dark card

Some quick example text to build on the card title and make up the bulk of the card's content.

Forms

Text fields

We'll never share your email with anyone else.
Please provide a valid value.
$
.00
$
.00

Layouts

@
Must be 8-20 characters long.

Selects

Checkboxes

Radio buttons

Badges

Contextual badges

Primary Secondary Success Danger Warning Info Light Dark

Pill badges

Primary Secondary Success Danger Warning Info Light Dark

Links

Primary Secondary Success Danger Warning Info Light Dark

Badges in headings

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Alerts

Simple alerts

Alerts with additional content

Popovers

Popovers

Tooltips

Progress bars

Colored progress bars

Label
Label
Label
Label
Label

Striped progress bars

Label
Label
Label
Label
Label

Modals