Balean UI Design

Style definitions

Screen sizes

The Balean theme can work with grid css libraries. To configure grid libraries, the theme configures the following variables:

Variable	Default value	Description
`$columns`	12	The number of columns in the grid.
`$container-base-width`	1364px	The full width of the container. One column is then 1364/12 px wide.
`$base-spacing-unit`	16px	The base spacing between columns.
`$container-offset`	`$base-spacing-unit`	The white space around a container.
`$wide`	1400px	The width definition of a wide screen (16/9).
`$desktop`	1024px	The width definition of a desktop screen (4/3).
`$tablet`	768px	The width definition of a tablet screen.
`$mobile`	576px	The width definition of a mobile devide screen.

Fonts, colors and logo’s

Check the pages for each subject:

Basic Elements

Boxes

Check the boxes page

Buttons

Button regular

<a class="bui-button" href="#">Submit</a>

Submit

Button primary

<a class="bui-button bui-button--primary" href="#">Submit</a>

Submit

Button x-small

<a class="bui-button bui-button--x-small" href="#">Submit</a>

Submit

Button small

<a class="bui-button bui-button--small" href="#">Submit</a>

Submit

Button big

<a class="bui-button bui-button--big" href="#">Submit</a>

Submit

Shapes

Organic shape

<div class="bui-shape--organic-shape bui-shape--width-50 bui-section-item--left">
  <div class="bui-shape--content">Lorem ipsum dolor sit amet</div>
</div>

Lorem ipsum dolor sit amet

Rounded rectangle

<div
  class="bui-shape--rounded-rectangle bui-shape--width-50 bui-section-item--right bui-bgcolor__bui-primary-color-1">
  <div class="bui-shape--content">Lorem ipsum dolor sit amet</div>
</div>

Lorem ipsum dolor sit amet