Features / Usability

Posted by Torsten Fabricius 16 Sep 2015 14:18 GMT-0000 posts: 1563

Actually I do find this stil a bit confusing and try to add a few lines hoping to clarify thiungs and not to even meke it more confusing for our new community member ;-)

1.) Basically Bootstrap and thus Tiki's layout works with rows and columns

2.) You can put up to 12 columns into one row, as we have a 12 gutter system. One gutter's width is 1/12 th of 100% or optionally 1/12 of fixed width.

3.) The width of each column in a row is defined by a class set to the columns defining div element. This class does not define an absolute width, but it defines over how many gutters the column spans.
Example: a column class defining 3 gutters defines a width of 3/12 th of the conaining row.

4.) The brake point at which screen width the displayed column width changes to 100% is defined by the same class.
The brake points xs (extra small), sm (small), md (middle) and lg (large) are predefined in the Bootstrap based CSS file of the theme.

5.) The sum of the gutters (defining the width) of all columns in one row shall be exact 12.

Now some examples:

{CODE(color=html)}
a row with two columns, each 6/12th width and middle brake point:

content

content

a row with 3 columns, each 4/12th width and small brake point:

content

content

content

a row with 4 different width colums and small brake point, but made with Wiki Syntaxfor use in a wiki page:

{DIV(class="row")}

{DIV(class="col-sm-4")}
content
{DIV)}

{CODE}

You see, that in all cases the number of gutters sum up to 12.

Surely you can do more fancy stuff by using different brake points or by using additional classes like pull/push or visible/hidden classes, which use gutters and brake points aswell.

More information at http://getbootstrap.com or http://themes.tiki.org

Regards,
Torsten