Skins

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

  1. Material (default skin)
  2. Mini
  3. Flat
  4. Compact
  5. Contrast
  6. Willow
  7. Dark

Each skin requires including its specific CSS file.

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

Using Skins

In order to apply the selected skin correctly, you should take two steps:

1. Include the .css file of the necessary skin into the document's head:

<link href="../codebase/skins/flat.css" rel="stylesheet" type="text/css">

2. Choose either of the two ways given below:

  • the simplest and recommended way is to initialize the app within the webix.ready() function:
webix.ready(function(){
   webix.ui({..});
});
  • or you can also define a global webix_skin variable before including webix.js into the app:
<script>
webix_skin = "flat";
</script> <script src="../codebase/webix.js" type="text/javascript" charset="utf-8"></script>

Material

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

Applying the "Material" skin to the app

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

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

Mini

To apply the Mini skin, include the mini.css file:

Applying the "Mini" skin to the app

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

Flat

To apply the Flat skin, include the flat.css CSS file:

Applying the 'Flat' skin to the app

<script src="../codebase/webix.js"></script>   
<link href="../codebase/skins/flat.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">

Willow

To apply the Willow skin, include the willow.css file:

Applying the 'Willow' skin to the app

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

Dark

To apply the Dark skin, include the willow.css file:

Applying the 'Dark' skin to the app

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

Using Icons

Default font icon packs

Webix provides two predefined sets of icons depending on the used skin:

1. Webix Awesome Icons for Flat, Compact and Contrast skins - based on Font Awesome 5 collection

2. Webix Material Icons for Material, Mini, Willow, and Dark skins - based on Material Design Icons collection

Check the related sample to see the list of available default icons:

Related sample:  Icons Cheatsheet

The default Webix icons can be set in two ways:

  • via the view config as icon:"wxi-name"
// using a default icon
{ 
    view:"icon", 
    icon:"wxi-pencil"  }
  • via HTML as span class="webix_icon wxi-name"
<span class='webix_icon wxi-pencil'></span>

Learn more about icons usage with widgets.

Custom font icon packs

It is possible to include any custom font icon pack for any skin. For this, you need to:

  • include the desired font icon pack into HTML page;
  • set the full name of the icon you want to use:
// using a Font Awesome icon
{ view:"icon", icon:"fas fa-envelope"}
// using a Material Design icon
{ view:"icon", icon:"mdi mdi-email"}

For example, you can use:

Skin Builder Tool

The Webix library provides a handy tool Skin Builder that allows you to choose some of default skins for your interface and apply your designer skills to create a custom skin.

Customizing Skins

There is a possibility to adjust the sizes of UI elements globally by changing skin JS settings.

The default settings for each skin are stored in the webix.skin.{skin_name} object and include a number of options, which you can freely redefine. For instance, the default "flat" skin comes with the following options:

webix.skin.material = {
    topLayout:"space",
    //bar in accordion
    barHeight:44,           //!!!Set the same in skin.less!!!
    tabbarHeight: 42,
    sidebarTitleHeight: 44,
    rowHeight:36,
    toolbarHeight:44,
    listItemHeight:36,      //list, grouplist, dataview, etc.
    inputHeight: 38,
    buttonHeight: 38,
    inputPadding: 3,
    menuHeight: 36,
    labelTopHeight: 22,
    propertyItemHeight: 28,
    unitHeaderHeight:36,
 
    timelineColor:"#1CA1C1",
    timelineItemHeight:70,
 
    inputSpacing: 4,
    borderWidth: 1,
 
    sliderHandleWidth: 14,
    sliderPadding: 10,
    sliderBorder: 1,
    vSliderPadding:15,
    vSliderHeight:100,
    switchHeight:22,
    switchWidth:50,
 
    //margin - distance between cells
    layoutMargin:{ 
        space:10, wide:10, clean:0, head:4, 
        line:-1, toolbar:4, form:8, accordion: 2  
    },
    //padding - distance inside cell between cell border and cell content
    layoutPadding:{ 
        space:10, wide:0, clean:0, head:0, 
        line:0, toolbar:2, form:17, accordion: 0  
    },
    //space between tabs in tabbar
    tabMargin: 0,
    tabOffset: 0,
    tabBottomOffset: 0,
    tabTopOffset:0,
    tabbarWithBorder: true,
 
    customCheckbox: true,
    customRadio: true,
    sidebarMarkAll: true,
    noPoint: true,
    borderlessPopup: true,
 
    popupPadding: 0,
 
    calendar:{ timepickerHeight:24 },
    calendarHeight: 70,
    padding:0,
    accordionType: "accordion",
 
    optionHeight: 32,
    organogramLineColor: "#CCD7E6"
};

You can also make changes in the currently used skin by accessing its settings via the $active keyword. The example below shows how you can change the height of all inputs in your application:

webix.skin.$active.inputHeight = 50;
 
webix.ui({
  rows:[
    { view:"text", label:"Text"},
    { view:"combo", label:"Combo" },
    { view:"datepicker", label:"Date" },
  ]
});
Back to top