Skins

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

  1. Air
  2. Air Compact
  3. Clouds
  4. Compact
  5. Contrast
  6. Flat (default skin)
  7. Glamour
  8. Light
  9. Material Design
  10. Metro
  11. Terrace
  12. Touch
  13. Web

Each skin requires including its specific CSS file.

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

Skin JS File Config

Below you will find the full skin.js file for the Flat skin:

webix.skin.flat = {
    topLayout:"space",
    //bar in accordion
    barHeight:46,           //!!!Set the same in skin.less!!!
    tabbarHeight: 46,
    rowHeight:34,
    toolbarHeight:46,
    listItemHeight:34,      //list, grouplist, dataview, etc.
    inputHeight: 38,
    buttonHeight: 38,
    inputPadding: 3,
    menuHeight: 34,
    labelTopHeight: 22,
    propertyItemHeight: 28,
 
    inputSpacing: 4,
    borderWidth: 1,
 
    sliderHandleWidth: 16,
    sliderPadding: 10,
    sliderBorder: 1,
 
    //margin - distance between cells
    layoutMargin:{ 
        space:10, wide:10, clean:0, head:4, line:-1, toolbar:4, form:8, accordion: 10  
    },
    //padding - distance insede cell between cell border and cell content
    layoutPadding:{ 
        space:10, wide:0, clean:0, head:0, line:0, toolbar:4, form:17, accordion: 0  
    },
    //space between tabs in tabbar
    tabMargin:4,
    tabOffset: 0,
    tabBottomOffset: 6,
    tabTopOffset:1,
 
    customCheckbox: true,
    customRadio: true,
 
    popupPadding: 8,
 
    calendarHeight: 70,
    padding:0,
    accordionType: "accordion",
 
    optionHeight: 32
};

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">

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">

Contrast

To apply the Contrast skin, include the contrast.css file:

Applying the 'Contrast' skin to the app

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

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">

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">

Material Design

To apply the Material Design skin:

  • download it from a separate repository at github.com
  • copy files into codebase folder of Webix UI package
  • include the material.css file:

Applying the 'Material Design' skin to the app

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

You can read a more detailed article about the usage of Material Design skin.

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">

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">

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