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

Example 1. Basic inline template

    $output[] = [

      '#type' => 'inline_template',

      '#template' => '{{ yourvar }}',

      '#context' => [