Bootstrap Theme for Flynax...

[Steffen Buschkemper]

Bootstrap Theme Workshop

1. Grid Structure of page

The first part is a brief introduction of grid structure for flynax bootstrap theme.
The layout for flynax has follow parts.

Full Side = 1 column
Sidebar Left -> Content = 2 column
Content -> Sidebar Right = 2 column
Left -> Content -> Right = 3 column

Bootstrap provides this at the following layouts

Full Side = 100%
For responsive we must use for the booth content div follow class:

Only registered members can view the code.

Sidebar Left -> Content

Only registered members can view the code.

Content -> Sidebar Right

Only registered members can view the code.

Left -> Content -> Right

Only registered members can view the code.

col-lg-12, col-md-12, col-sm-12 -> width: 100%
col-lg-9, col-md-9 -> width: 75%
col-lg-6, col-md-6 -> width: 50%
col-lg-3 col-md-3 -> width: 25%

It distinguishes between the following media sizes

lg = large (Desktop or Laptop)
md = middle (Tablets)
sm = small (Smartphones, Handys)

The real media size will defined by div class container (div.container) through css.
For example

Only registered members can view the code.

With this basic structure we have the Flynax Layout Structure.
There are more grid styles, but i think thats the best for Flynax Bootstrap Template basic structur at begin.

I will later publish the code for the custom content.tpl in this thread.

Regards
Steffen