Main colors
→Here are the main interface colors. There are only five sets, with five colors each. And there is a background class to use them.
See how to theme the colors over here.
.bg-{state}-{level}
Here are the main interface colors. There are only five sets, with five colors each. And there is a background class to use them.
See how to theme the colors over here.
.bg-{state}-{level}
Like above, but this time the color boxes will become darker when the mouse pointer is :hover
or the element is in :focus
.
.bg-{state}-{level}-h
Here are two light and two dark semi transparent shades.
The shades are used in various places, like for placeholder text, skeuomorphic effetcs and stripes. Per default, the shade color is slightly tinted as the main color.
.bg-{state}-{level}
Paint the town. The .tinted
class will tint the text color, border color and some magic extras with the predefined states warn
, success
, danger
and prime
or your own custom color variable. Basically everything that was blackish before will become colorish.
The example below is just a test-case. There are many cool use cases for this, like for theming, customization or form validation. This is a local theme, the effective space is scoped by the container holding the class. It can be combined with tinted background. See the form validation example.
.tinted-{color}
_tinted.scss
CSS is awesome
table | check | 1 |
table | check | 2 |
CSS is awesome
table | check | 1 |
table | check | 2 |
CSS is awesome
table | check | 1 |
table | check | 2 |
CSS is awesome
table | check | 1 |
table | check | 2 |
CSS is awesome
table | check | 1 |
table | check | 2 |
CSS is awesome
table | check | 1 |
table | check | 2 |
Paint the town again. With this wrapper you’ll modify the background color and some magic extras with the predefined states warn
, success
and danger
or your own colors.
The tinted background class will only color child elements, that already have a background color. To alter the background color of an element directly use the background color class. This can be combined with colored text and borders. See the form validation example. When applied to a whole container, like in the example below, everything will be tinted in a mono-colored way. To match all states (hover, disabled …), five color variables need to be set. Keep an eye on paint performance when working with tinted images.
.tinted-bg-{color}
_tinted.scss
Apply this to a container to flip all the colors > light will become dark, dark will be light.
.inverted
_inverted.scss
CSS is awesome
The .article
wrapper class gives you reading-optimized styling for articles and blog posts. It’s made for Markdown generated content like from Jekyll or Grav, but it will also work with any CMS. —Inside here:
p
, ol
, ol
, dl
, table
, blockquote
, a
, img
, hr
, pre
, code
, i
— all work well
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi vitae dicta amet nobis porro laudantium accusantium, velit minima vel, aliquam veniam atque perferendis maxime earum autem dolor, dolore fugit iure?
Pasting code from the Internet into production code is like chewing gum found in the street.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque odio assumenda, veritatis tempora enim nemo ipsum quidem, porro et voluptate animi minus ad commodi architecto recusandae eveniet, accusamus rem. Dolor!
# Never execute:
$ rmf *
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.
That’s all she wrote.
CSS is awesome
The .article
wrapper class gives you reading-optimized styling for articles and blog posts. It’s made for Markdown generated content like from Jekyll or Grav, but it will also work with any CMS. —Inside here:
p
, ol
, ol
, dl
, table
, blockquote
, a
, img
, hr
, pre
, code
, i
— all work well
Tables | Are | Cool |
---|---|---|
col 3 is | right-aligned | $1600 |
col 2 is | centered | $12 |
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi vitae dicta amet nobis porro laudantium accusantium, velit minima vel, aliquam veniam atque perferendis maxime earum autem dolor, dolore fugit iure?
Pasting code from the Internet into production code is like chewing gum found in the street.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque odio assumenda, veritatis tempora enim nemo ipsum quidem, porro et voluptate animi minus ad commodi architecto recusandae eveniet, accusamus rem. Dolor!
# Never execute:
$ rmf *
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores molestias dolore eaque recusandae, tempora iusto consequuntur sint consectetur, quisquam cumque ducimus, voluptates. Mollitia dolores explicabo quibusdam magnam asperiores accusamus, cumque.
That’s all she wrote.
Here is an additional shaded color spectrum. Use cases are: “heat tables”, “generic avatars”, “zebra stripes” and possibly much more. Other than the core interface colors, these colors are ready-made and not accessible as CSS Vars, so they can only be modified in the SCSS files.
Use .bg-
for background-color and than any small latin character or number (^a-z0-9). These colors also have no :hover
sate.
.bg-{color}
_colors-alphabet.scss