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

Sencha Theming Contest: Announcing Third Place Winner – Erin Knight

October 14, 2015 633 Views
Show

Thank you to everyone who participated in our Sencha Theming Contest! We received some very well-designed and creative submissions. 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. We’ll be highlighting each of our three contest winners in this blog series.

Third Place Winner

Today, we are very pleased to announce that Erin Knight is our Third Place Winner. The following are some screenshots of Erin’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:

  • Creative design for tabs – especially the lip detail
  • Good use of fonts
  • Good styling of the template – margins and padding

If you would like to leverage Erin’s great design, you can access the package here.

How Erin Created Her Design

We asked Erin to answer a few questions about her experience with Ext JS and the process she went through to create her design.

How much experience do you have with Sass?
I first used Sass when styling Ext JS 4 apps and have used it since then.

Where did you get your inspiration for the design?
I knew I wanted to make a dark theme, because I hadn’t seen any default Sencha themes like that. Because it extends the Ext JS Neptune theme, I wanted to create a cool, outer space feel, and named mine “Vega”. I picked complementary shades of grey, blue, and teal to make a cohesive theme.

Describe the process of how you created this theme.
I started out by identifying what I didn’t like about the default app. In particular, where things looked too cluttered, or where functionality was unclear for a user. Next, I created mockups in Illustrator of what each screen would look like for both desktop and mobile. After I had visual designs to work from, I kept the Inspector open with Fashion to identify the variables I would need to change to match my visual designs.

Describe your overall experience in theming the app.
This was my first experience with Ext JS 6, so it was fun to play around with Sencha Inspector and Fashion. Every update of Inspector was more stable and easier to use. In my previous theming experiences, I had to live in the Sencha docs to find the right variable names. Using Inspector saves a ton of time because you don’t have to already know what you are looking for; you can search to find the right set of variables. This was also my first experience using any of the modern or touch components. It’s exciting to see how to develop a single app that can have both views.

About Erin:

Erin Knight

Erin is currently a front-end developer at Headspring. At her previous job, she used Ext JS daily to develop enterprise apps. She has done full-time web application development for 2 years, focusing primarily on Ext JS.

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