Theming

Example : Table.

$header = ['#','Name', 'Mail'];
$data = [
  [1,'Name 1', 'Mail1@example.com'],
  [2,'Name N°2', 'second@example.com'],
];

Example : List

Get current theme.

$theme = \Drupal::theme()->getActiveTheme();

Theme name:

$theme_name = \Drupal::theme()->getActiveTheme()->getName();

Use custom twig template or alter an existence.

Create a custom module then use hook_theme()

For thah you must use an additional process.

1. Create a custom module (Example : Here we use mymodule)

Example :

<style>
#parent-div { display: flex; }
#el1 { order: 3; }
#el2 { order: 2; }
#el3 { order: 1; }
</style>

Compilers

1. COMPASS

Compass is a powerfull command line compiler

Install (Linux debian) : sudo apt-get install ruby-compass

Link : http://compass-style.org/help/documentation/command-line/

2. Koala

Word Wrap ( word-wrap )

Available values of word-wrap property: normal, break-word, initial, inherit

Example : Disable HTML word wrapping using CSS

.your-class{white-space:nowrap;}

Tuto English : 
CSS Box Model : http://www.w3schools.com/css/css_boxmodel.asp
CSS display Property - http://www.w3schools.com/cssref/pr_class_display.asp

Tuto (in French) : http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html

Example 1. Basic inline template

    $output[] = array(
      '#type' => 'inline_template',
      '#template' => '{{ yourvar }}',
      '#context' => array(
        'yourvar' => 'The Value',
      ),
    );