JS Days 2025 is now live – Join 5,000+ devs for the premier virtual JavaScript event. Register Now

Dan Tilden Wins the Sencha Theming Contest

October 28, 2015 781 Views
Show

We are very excited to announce that Dan Tilden is the winner of our Sencha Theming Contest! Our goal was to highlight how easy it is to use the new features in Ext JS 6 such as Fashion and new tools such as Sencha Inspector to modify the theme of an existing application. For the contest, we used the feed viewer application.

Following are some screenshots of Dan’s submission.

Classic View:

Classic view

Modern View:

Modern view

Our contest judges included product managers, engineers, and key members of our UX team. What they liked most about this design was:

  • Very good adaption of Google’s Material design guidelines
  • Good details on transitions for hover states/selection, etc.
  • Nice choice of colors, clean look, good use of shadows
  • Well organized implementation
  • Quite a lot accomplished with relatively little code

If you would like to leverage Dan’s theme, you can access the package here.

How Dan Created His Design

We asked Dan to answer a few questions about his experience with Ext JS and the process he went through to create his design.

How much experience do you have with Sass?
I’ve been working with Sass for about 2 years; that’s when the company I work at began using Ext JS in their software. I’m now quite a fan of it, and I’ll use it instead of vanilla CSS, wherever possible.

Where did you get your inspiration for the design?
While the theme is largely based on Google’s material design, there are several areas where I deliberately diverged from the material design spec. Take, for example, the appearance of the tabs; in the material design spec, tabs don’t really look like physical “tabs” but instead appear as a row of text labels with a thick indicator line underneath the selected element. This is because the material design spec doesn’t allow elements to “pass through” other elements. I chose to use a more traditional “tab” appearance because I felt it was a better visual fit for the feed viewer app.

Describe the process of how you created this theme.
I began by drawing up some mockups of potential themes for the feed viewer app. While I had decided early on that I wanted to do something related to material design, I ended up drawing about 12 different iterations before I settled on the final design.

Once I had decided on the look of the theme, I began targeting and styling individual components in the feed viewer app to match my mockup. To avoid repeating work that the Sencha team had already done, I tried to rely on built-in Sass vars as often as possible, only falling back on creating specific style rules when absolutely necessary.

Describe your overall experience in theming the app.
I started web development back in high school, but the number of projects really depends on what you count as a “real” project! You can see some examples of my projects on my portfolio site: https://www.dantilden.com/

About Dan:

Theming Contest 1st Place Img3

Dan is a UX Designer working at Sicom Systems, Inc., where he designs software that makes managing the fast food restaurant empire fun and exciting! Sicom Systems Inc uses Ext JS in several of its products, which is how Dan became familiar with the technology. He maintains a custom theme package for use in some of the company’s web applications, which is how he became familiar with Ext JS theme development.

Recommended Articles

Guide to Estimating ROI When Switching From DIY Libraries to Full Software Development Platforms Like Ext JS

Teams started with Do It Yourself, or DIY, JavaScript tools like jQuery and Bootstrap. But those fall apart as projects scale. Scattered code, user interface…

Top Frameworks Developers Are Using for Custom Software Development in 2025

We’re seeing it more every year; teams aren’t settling for plug-and-play tools anymore. In healthcare, finance, logistics, and other data-heavy industries, there’s a clear shift.…

Meet Sencha AI Coding Companion: Your AI-Powered Assistant for Faster Ext JS Development

Building modern web applications should be exciting. But too often, developers find themselves buried in documentation, endlessly Googling framework quirks, or stuck solving the same…

Ext JS 7.9 & Rapid Ext JS V1.1 Have Arrived

The Sencha team is excited to announce the latest Ext JS version 7.9 and Rapid Ext JS 1.1 release – designed to accelerate development, enhance…

Top 10 JS Grid Customization Tips for a Better UI Experience

Grids are pretty much everywhere in web apps. Working with financial sheets, product details, or users? Then you’ve probably used a JavaScript grid. It makes…

Why Ext JS Framework is the Go-To Framework for Building Scalable and Data-Intensive Web Apps

Web apps are much more advanced now. They deal with large amounts of data and need to stay fast, even with many users. If you’re…

View More

Trusted by Top Developers: Learn how to enhance your development journey — for free

Get the latest newsletter keeping thousands of developers in the loop.

Loved by developers at