Documentation

Skins

Webix provides 11 skins that you can use to change the overall look of your application:

  1. Flat (default skin)
  2. Compact
  3. Touch

  4. Air

  5. Air Compact
  6. Clouds
  7. Glamour
  8. Light
  9. Metro
  10. Terrace
  11. Web

Each skin requires including its specific CSS file.

All CSS files for skins reside in the codebase/skins folder of the package.

Flat

To apply the Flat skin, include the default CSS file:

Applying the 'Flat' skin to the app

<script src="../codebase/webix.js"></script>   
<link href="../codebase/skins/webix.css" rel="stylesheet" type="text/css">

Compact

To apply the Compact skin, include the compact.css file:

Applying the 'Compact' skin to the app

<script src="../codebase/webix.js"></script>   
<link href="../codebase/skins/compact.css" rel="stylesheet" type="text/css">

Touch

To apply the Touch skin, include the touch.css file:

Applying the 'Touch' skin to the app

<script src="../codebase/webix.js"></script>   
<link href="../codebase/touch.css" rel="stylesheet" type="text/css">

Air

To apply the Air skin, include the air.css file:

Applying the 'Air' skin to the app

<script src="../codebase/webix.js"></script>   
<link href="../codebase/air.css" rel="stylesheet" type="text/css">

Air Compact

To apply the AirCompact skin, include the aircompact.css file:

Applying the 'AirCompact' skin to the app

<script src="../codebase/webix.js"></script>   
<link href="../codebase/skins/aircompact.css" rel="stylesheet" type="text/css">

Clouds

To apply the Clouds skin, include the clouds.css file:

Applying the 'Clouds' skin to the app

<script src="../codebase/webix.js"></script>   
<link href="../codebase/skins/clouds.css" rel="stylesheet" type="text/css">

Glamour

To apply the Glamour skin, include the glamour.css file:

Applying the 'Glamour' skin to the app

<script src="../codebase/webix.js"></script>   
<link href="../codebase/skins/glamour.css" rel="stylesheet" type="text/css">

Light

To apply the Light skin, include the light.css file:

Applying the 'Light' skin to the app

<script src="../codebase/webix.js"></script>   
<link href="../codebase/skins/light.css" rel="stylesheet" type="text/css">

Metro

To apply the Metro skin, include the metro.css file:

Applying the 'Metro' skin to the app

<script src="../codebase/webix.js"></script>   
<link href="../codebase/skins/metro.css" rel="stylesheet" type="text/css">

Terrace

To apply the Terrace skin, include the terrace.css file:

Applying the 'Terrace' skin to the app

<script src="../codebase/webix.js"></script>   
<link href="../codebase/skins/terrace.css" rel="stylesheet" type="text/css">

Web

To apply the Web skin, include the web.css file:

Applying the 'Web' skin to the app

<script src="../codebase/webix.js"></script>   
<link href="../codebase/skins/web.css" rel="stylesheet" type="text/css">

Back to top