3.1 Unstyled list

Remove the default user agent style on list with .list-unstyled

• • Eggs
  • Milk
  • Beers

<ul class="list-unstyled">
	<li> Eggs </li>
	<li> Milk </li>
	<li> Beers </li>
</ul>

3.2 Standard list

A standard list in ev-fdm. You can add the base class .ev-list to any div. All of its direct children will be styled like list element.

• • Eggs
  • Milk
  • Beers

<ul class="ev-list">
	<li> Eggs </li>
	<li> Milk </li>
	<li> Beers </li>
</ul>

3.2.1 List without separator

Remove separators between items of the list

• • Eggs
  • Milk
  • Beers

<ul class="ev-list ev-list-activable ev-list-no-separator">
	<li> Eggs </li>
	<li> Milk </li>
	<li> Beers </li>
</ul>

3.2.2 Activable lists

For activable list, you can add the .ev-list-activable. This useful with the activable-set directive.

• • Eggs
  • Milk
  • Beers

<ul class="ev-list ev-list-activable">
	<li activable> Eggs </li>
	<li activable class="active"> Milk </li>
	<li activable> Beers </li>
</ul>

3.3 Item styling

You can style add any of the following class to a child element of an ev-list class

• .ev-separator-top

  Add a strong separator to the top of the element

  • Eggs
  • Milk
  • Beers
• .ev-separator-bottom

  Add a strong separator to the bottom of the element

  • Eggs
  • Milk
  • Beers

<ul class="ev-list ev-list-activable">
	<li> Eggs </li>
	<li> Milk </li>
	<li class="{$modifiers}"> Beers </li>
</ul>

3.4 Tables

ev-table style table in the same fashion as lists. Useful for keeping a visual coherence thougout your app.

• Beer	Price
  Chouff'	5€
  Kwak	6€
  Brooklyn Lager	4€

<table class="ev-table">
     <thead><tr>
         <th> Beer </th>
         <th>Price</th>
     </tr></thead>
     <tbody>
         <tr> <td>Chouff'</td> <td>5€</td> </tr>
         <tr> <td>Kwak</td> <td>6€</td> </tr>
         <tr> <td>Brooklyn Lager</td> <td>4€</td> </tr>
     </tbody>
</table>

3.4.1 Activable Tables

Just add ev-table-activable to enable the activable behaviour. The rows of the table will then be clickable.

• Beer	Price
  Chouff'	5€
  Kwak	6€
  Brooklyn Lager	4€

<table class="ev-table ev-table-activable">
     <thead><tr>
         <th> Beer </th>
         <th>Price</th>
     </tr></thead>
     <tbody>
         <tr> <td>Chouff'</td> <td>5€</td> </tr>
         <tr class="active"> <td>Kwak</td> <td>6€</td> </tr>
         <tr> <td>Brooklyn Lager</td> <td>4€</td> </tr>
     </tbody>
</table>

3.4.2 Table without separator

Markup

3.4.3 Row fit content

You can force a row to exactly fit its content by adding the class ev-row-fit-content to one of its cell

Markup