Custom Webix skin

hainguyen · November 26, 2015, 1:50am

I want to create my own Webix skin. I want to custom every CSS classes of all Webix controls. I know I can use LESS file in folow url to create a new skin same as material design skin.

github.com

webix-hub/material-design-skin/blob/master/skins/debug/material.less

#border{
	.corners(@lefttop:0px, @righttop: 0px, @bottomright: 0px, @leftbottom: 0px){
		-webkit-border-top-left-radius: @lefttop;
		-webkit-border-bottom-left-radius: @leftbottom;
		-webkit-border-top-right-radius: @righttop;
		-webkit-border-bottom-right-radius: @bottomright;
		-moz-border-radius-topleft: @lefttop;
		-moz-border-radius-bottomleft: @leftbottom;
		-moz-border-radius-topright: @righttop;
		-moz-border-radius-bottomright: @bottomright;
		border-top-left-radius: @lefttop;
		border-bottom-left-radius: @leftbottom;
		border-top-right-radius: @righttop;
		border-bottom-right-radius: @bottomright;
	};
	.radius(@size){
		border-radius: @size;
	};
	.top(@size){
		-moz-border-top-left-radius:@size;

This file has been truncated. show original

But I’m not sure this LESS covers all style of all Webix controls. Can I use this LESS file or I need to modify webix.css file?

maksim · November 26, 2015, 12:44pm

But I’m not sure this LESS covers all style of all Webix controls.
Less file covers all styles. webix.css is a result of less-to-css processing.

You can grab material.less from the material package. As for other skins, you can grab them from the skinbuilder

http://webix.com/skin-builder/webix/flat.less

change the name of file to get less file for any other skin.

hainguyen · November 30, 2015, 3:29am

Thank you. Exactly I want.
I think it should has a document about this or less files shoud included in Webix package.