mofo-bootstrap

Mozilla Foundation Bootstrap 4 theme

Color

Primary Palette

15% darker
Base color
15% lighter
40% lighter

dino-red

#d24735

firefox-orange

#f26c23

market-orange

#f89c24

flame-yellow

#ffcd02

gecko-green

#7dc14c

summit-teal

#3bba99

15% darker
Base color
15% lighter
40% lighter

mobile-blue

#16afe5

developer-blue

#4383bf

nightly-blue

#5a6ba4

aurora-purple

#ab5da4

bikeshed-magenta

#e14164

gray-darkest
gray-darker
gray-dark
gray
gray-light
gray-lighter
gray-lightest
off-white

Buttons

.btn.btn-primary

.btn.btn-secondary

.btn.btn-success

.btn.btn-info

.btn.btn-warning

.btn.btn-danger

.btn.btn-link

Outline Buttons

.btn.btn-outline-primary

.btn.btn-outline-secondary

.btn.btn-outline-success

.btn.btn-outline-info

.btn.btn-outline-warning

.btn.btn-outline-danger


Typography

Zilla Slab Extra Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
Zilla Slab Bold
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
Zilla Slab SemiBold
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
Zilla Slab Medium
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
Zilla Slab Regular
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890
Zilla Slab Light
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Headings

Display headings

in a Jumbotron

Headline 1

3.8rem, Zilla Slab 400

Headline 2

3.5rem, Zilla Slab 200

Headline 3

2.6rem, Zilla Slab 300

Headline 4

1.8rem, Zilla Slab 400

Body Copy Text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quae tandem ista ratio est? Quid enim de amicitia statueris utilitatis causa expetenda vides. Non igitur de improbo, sed de callido improbo quaerimus, qualis Q. Verum tamen cum de rebus grandioribus dicas, ipsae res verba rapiunt; Duo Reges: constructio interrete. Tecum optime, deinde etiam cum mediocri amico. Negare non possum. Quamquam haec quidem praeposita recte et reiecta dicere licebit. Solum praeterea formosum, solum liberum, solum civem, stultost; Te enim iudicem aequum puto, modo quae dicat ille bene noris.

paragraph default, 1.1rem, Zilla Slab Medium

Link Text

Inherits font from parent

Small copy for notes and additional descriptive details

.small, .8em, Zilla Slab Medium

This is introductory text for a new section of content near the top of the page. Teach how to read, write, and participate on the Web.

.intro, 1.6rem, 200

Make a paragraph stand out by adding .lead.

.lead

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

.blockquote

Lists

Regular List, no classes
Unstyled List (ul.list-unstyled)
Inline List (ul.list-inline)
List Group (ul.list-group)