Boooya - Blocks And Panels

Blocks

Group your information into nasty blocks.

Default Block

Simple example of block.

Help classes:
block-condensed - remove padding
block-condensed-v - remove vertical padding
block-condensed-h - remove horizontal padding

This is universal block container that can be used everywhere as basic element. All features can be used here.

Condensed Block Mode

block-heading container for block head elements.

block-content recomended to use in block-condensed mode.

block-footer special container for buttons or summary information.

Block Buttons

Predefined container for buttons

Buttons sizes:
It's available to use any sizes of buttons or elements inside heading or footer.

Predefined Functions

We prepared ready to use functions for you

Delete Block

Predefined function delete block.

app.block.delete( ElementBlock, Callback );

ElementBlock (selector)
Block to remove.

Callback (function)
Callback function that fires after animation ends.

Toggle Block

Predefined function show and hide block content.

app.block.toggle( ElementBlock, Callback );

ElementBlock (selector)
Block to toggle.

Callback (function)
Callback function that fires after animation ends.

Works only if .block-content and .block-footer used.

Expand Block

Predefined function expand block.

app.block.expand( ElementBlock );

ElementBlock (selector)
Block to expand.

Block Loading

Predefined functions to show/hide loading layer

app.block.start( ElementBlock );

ElementBlock (selector)
Block to add loading layer.

app.block.finish( ElementBlock );

ElementBlock (selector)
Block to remove loading layer.

Styling Options

Group your information into nasty blocks.

Highlight Block

Easiest way to show important information.

Information:

Add class block-highlight to block to get block highlight.

Highlight On Hover

Easiest way to show important information.

Information:

Add class block-highlight-hover to block to get block highlighted on hover.

Block State

Another way to highlight block.

Other colors:

block-primary, block-success, block-warning, block-danger, block-info

Dividers

You can divide the information using features.

Simple divider

Simply divide your information.

Information:

Use <div class="block-divider"></div> to divide content.

This feature works only with between .block-content blocks.

Divider With Icon

Prittify your divider with icon.

Information:

Add icon to divider content to get this feature available.

This feature works only with between .block-content blocks.

Icon Direction

Place your icon wherever you want.

Information:

Use classes .dir-left, .dir-right. Middle direction is default.

This feature works only with between .block-content blocks.

Text Divider

Use text as divider for in your block.

Information:

Use class .block-divider-text to get text divider.

Block divider text

This feature works only with between .block-content blocks.

Icon In Text

Use icons to prettify your text.

Information:

Its possible to use all icon packages.

Block divider text

This feature works only with between .block-content blocks.

Custom Elements

Container for custom features inside divider.

Information:

You can use all features that supports *-sm mode inside this divider.

Block divider text

success

This feature works only with between .block-content blocks.

With Arrow

Container with top arrow.

Information:

Best way to connect visualy two blocks.

Add class .block-arrow-top to .block to get top arrow. Also use class .block-arrow-bottom to get bottom direction.

Panels

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

Panel heading without title

Panel content