DevExtreme: Bootstrap integration (Coming soon in v16.1)

Don Wibier's Blog
24 May 2016

Since Bootstrap is one of the most popular responsive positioning frameworks out there - even Microsoft uses it in their web project templates - we have improved our own DevExtreme theming in v16.1.

What does this mean?

This means that our generic desktop theme for DevExtreme is visually compatible with the default Bootstrap theme.

img1

Theme Builder improvements

Our Theme Builder tool allows you quickly re-style the global theme colors.

In the pre-v16.1 versions of it, you only had 3 colors on the quick style page, where with the v16.1 version we have increased the number of global settings to create an identical look to Bootstrap.

img2

We’ve done some improvements on the color inheritance in the Theme Builder to match the appearance with Bootstrap.

Like the previous versions of the Theme Builder, there is the Advanced Theming feature which allows you to change specific elements per Widget

img3

Bootstrap, Less and Theme Builder?

A lot of custom Bootstrap themes are built with the CSS pre-processor less. If you import such a less file to the Theme Builder, it will analyze the variables in the file and use these for the newly created DevExtreme theme.

How to get started?

Once v16.1 is officially released, the Theme Builder tool on the DevExtreme web-site will be updated and you can start creating Bootstrap compatible themes.

5 comment(s)
Søren Nielsen
Søren Nielsen

Instead of forcing us to use the Theme Builder Tool, how about making a less file.

Its a really big annoyance to have to use an external tool to update our css, when a simple rebuild of the less file could do the work.

8 June, 2016
Welliton Toledo
Welliton Toledo

Just late. It should be announced at least a year ago, and, anouncing Material Desing now.

Very modest progress on Html controls.

Devx is loosing the track. I'll not renew my Universal subscription.

16 June, 2016
Pieman
Pieman

Big mistake this one. Why on earth do you go away from your beautiful light theme that was very neutral and replace it with something that only will fit in with blue? It doesn't make sense.

Yes, it's possible to make a custom theme looking like the old one, but that will then break on every major release from now on and make it a lot of work to update. At least you should keep the old theme available and update it like you do on the various mobile themes (iPhone, Android, Win10). Call it dx.light.classic and dx.light.classic.compact or something. Can you please do this?

29 June, 2016
Eugeniy Ki (DevExpress)
Eugeniy Ki (DevExpress)

You can import the following configuration to the ThemeBuilder to get a theme that looks like the old 'generic' theme:

{

   "version": "16.1.4",

   "themeId": "1",

   "hue": null,

   "items": [

   {"key":"@base-text-color","value":"#232323"},

   {"key":"@base-accent","value":"#606060"},

   {"key":"@base-border-color","value":"#d3d3d3"},

   {"key":"@badge-bg","value":"#31afe3"},

   {"key":"@texteditor-bg","value":"#fafafa"},

   {"key":"@radiogroup-bg","value":"#fafafa"},

   {"key":"@button-border-radius","value":"3px"},

   {"key":"@button-normal-bg","value":"#f5f5f5"},

   {"key":"@button-default-border-color","value":"#31afe3"},

   {"key":"@button-default-bg","value":"#31afe3"},

   {"key":"@checkbox-bg","value":"#fafafa"},

   {"key":"@list-group-header-bg","value":"rgba(96, 96, 96, 0.05)"},

   {"key":"@overlay-shader-bg","value":"rgba(0, 0, 0, 0.75)"},

   {"key":"@button-border-radius","value": "3px"},

   {"key":"@calendar-navigator-border-radius","value": "5px"},

   {"key":"@datagrid-columnchooser-overlay-border-radius","value": "0px"},

   {"key":"@switch-handle-border-radius","value": "2px"},

   {"key":"@validation-overlay-border-radius","value":"0px"},

   {"key":"@texteditor-border-radius","value": "0px"},

   {"key":"@texteditor-input-border-radius","value":"0px"}

   ]

}

25 July, 2016
KenK
KenK

Will importing of less also apply for the Aspx ThemeBuilder for ASP.NET Devex controls?

30 August, 2016

Please login or register to post comments.