Blueberry CSS Demo

This is a demo page for Blueberry CSS Framework.
You can install an npm package to get both CSS and SCSS stylesheets for more advanced usage:
npm i @rensatsu/blueberry-css

Buttons

Forms

Alerts

Default Alert
Successful Alert
Warning Alert
Danger Alert

Alert title

Alert with a title

Lists

Description List

Title A
Description A
Title B
Description B

Horizontal Description List

Title A
Description A
Title B
Description B

List Group

List Group with Links

Panels

Panel
Normal Panel Body
Primary Panel
Primary Panel Body
Danger Panel
Danger Panel Body
Success Panel
Success Panel Body
Warning Panel
Warning Panel Body

Progress

Typography

Code

Enable JavaScript for better preview!

Code with Wrapping

Enable JavaScript for better preview!

Labels

Sample Text Label

Horizontal Ruler


Text Colors

Muted text

Warning text

Danger text

Success text

Centered text

Grid

There is a fixed width container (.container) and also a fluid container (.container.container-fluid).

Additional grid sizes are defined in $grid-sizes variable.

Cell 1 (1-2-1)
Cell 2 (1-2-1)
Cell 3 (1-2-1)

You can define different grids on mobile, tablet and desktop devices by combining .grid-mobile--*, .grid-tablet--* and .grid--* classes.

Cell 1 (1-1)
Cell 2 (1-1)

Dark Mode

Dark mode can only be activated automatically by activating Dark Mode in your browser or system.