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

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.

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.

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

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.

Free DevExpress Products – Get Your Copy Today

The following free DevExpress product offers remain available. Should you have any questions about the free offers below, please submit a ticket via the DevExpress Support Center at your convenience. We’ll be happy to follow-up.

Don Wibier (DevExpress)

Tags

JavaScript, HTML5, v16.1, Bootstrap

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

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

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 Kiyashko (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

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.

Need help or require more information?

Announcing DevExpress Universal v22.2

DevExpress Wins 20 Visual Studio Reader’s Choice Awards