DevExtreme - New Compact Material Design Theme (v19.1)

Our versatile DevExtreme library has added a new set of Material Design themes which are beautiful but more importantly, compact:

We introduced a set of themes based on Google's Material Design last year. Now, let's dive into why we made a set of compact versions of these themes.

Compact vs Standard

The original DevExtreme Material themes are great for a mobile UI. With large editors, buttons, and tall data grid rows, these themes are great as a touch-friendly interface.

But this extra space for mobile UI is not as useful for other interfaces. For example, high-density apps like CRM systems or desktop web apps. To address this, we created the DevExtreme Compact Material Themes.

In the compact versions, we decreased the indents, icons, and font sizes. By making these elements smaller, we increased space for the number of UI elements. Therefore, you can show more details on the same screen as compared to the standard material theme.

While the sizes are different, rest assured, the set of colors are the same. In both sets of our Material Design themes, the light and dark themes for blue, lime, purple, teal, and orange colors are identical.

Demo

Custom Themes

You can also create your own custom themes based on our new compact themes. Use the latest version of the DevExtreme CLI tool and customize any DevExtreme theme.

Learn how more here: DevExtreme CLI - Custom Theme Generation

Limitations

While you can use the DevExtreme CLI (see previous section), we haven't finished the support for the DevExtreme ThemeBuilder yet. We're working on it and it'll be available in a future release.

Angular, Vue, React, ASP.NET MVC / Core and more

DevExtreme support many frameworks, so the new themes are available for: Angular, Vue, React, jQuery, Knockout, ASP.NET MVC and .NET Core.

Test It Now (and provide feedback)

Test-drive the public beta now. Use the npm pre-release package:

npm install --save devextreme@19.1-next

Then let us know your experience with these new themes.

Your Feedback Counts

We’d like to hear from you about your development plans and needs. Feel free to leave comments below, open Support Center tickets for detailed discussions or take part in conversations in our GitHub repository.

For some quick feedback, please submit your responses to this short survey:

Join the Webinar

Sign up for the upcoming "What's New in v19.1 - JavaScript: jQuery, Angular, React, and Vue" webinar where:

• you'll see all the new features/tools/components in v19.1 and
• you can ask questions and interact with our devs

Register today: https://register.gotowebinar.com/register/83799677038249484

Free DevExpress Products - Get Your Copy Today