Row

container

Responsive grid row.

Example
Col2
Col4
Col6
HTML code 
<DIV class="row">
    <DIV class="col col-md-2">Col2</DIV>
    <DIV class="col bg-gray col-md-4">Col4</DIV>
    <DIV class="col col-md-5">Col6</DIV>
</DIV>
Type molecule
Group container
Todo
Väri ym asettaminen? Nyt voi käyttää yleisiä class -asetuksia:
- bg-green setBg(lime)
- ext-red setColor(red)
- align-right setAlign(right)
- corner-round setCorner(round)
- border-green setBorder('green')

Miten padding, margin -määritykset? row oletuksena left,right padding.

Eri kokojen asetukset:
- col: col-xs-4
- offset: col-xs-offset-8
- push: col-xs-push-4
- pull: col-xs-pull-4
- eq: row-xs-eq (soluista tasakorkeat)
- align: Esim. normaalissa right,left pienemmässä left,left
More examples

Bg, border, text, alignment

On left
On center
On right

Offset

Offset3 -> Col3

PHP

Wrapper to use element through PHP

Extends eUiElement
Render html
Create arguments
Methods
Method name Description
newCol(title, id, url) Add new col and return it.
addCol(title, id, url) Add new col and return row.
addCols(array) Add multiple cols and return row.
Code example

Create row and cols

$Row = $this->get('ui', 'row')
  ->addCol(4, 'Four cols')
  ->addCol(2, 'Two cols');

Add new col and save it to variable

$Row = $this->get('ui', 'row');
$Col = $Row->newCol(2, 'Col2');

All parameters as array

$Row = $this->get('ui', 'row', Array(
    'cols'       => Array(
        Array(
            'cols'    => '2',
            'content' => 'Col2'
        ),
        Array(
            'cols'    => '2',
            'offset'  => '3',
            'content' => 'Col2'
            'class'   => 'text-red bg-blue corner-round border border-green'
        )
    )
));

Javascript

Wrapper to use element through Javascript

Code example

Basic example

var $Row = cms.get('ui', 'row')
  .addCol(4,'Four cols);

$Col = $Row.newCol(8).append('Eight cols')

Styles

Elements Css style

no-padding
Col3
No-padding
Col3