Webix provides 11 skins that you can use to change the overall look of your application:
Each skin requires including its specific CSS file.
All CSS files for skins reside in the codebase/skins folder of the package.
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">
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">
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">
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">
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">
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">
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">
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">
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">
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">
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">