Dean Ranft is Third Place Winner in Sencha Theming Contest
We’d like to congratulate Dean Ranft on winning third place in the Sencha Theming Contest! Our goal was to highlight how easy it is to use the latest advancements in Sencha Themer to modify the theme of an existing application. For the contest, we used this conference application.
Here are two screenshots of Dean’s design.
Desktop View
Mobile View
Judges’ Comments
Our contest judges included product managers, engineers, and key members of our UX team. What they liked most about this design was:
- The background color of this app is a great alternative to a bright white background which could have a harsh contrast with black text.
- The blue and green colors used in this app complement each other quite well and have a fun modern feel.
- The overall simplicity of this app, especially the grid styling, creates a clean interface.
If you’d like to leverage Dean’s theme, you can access the package on GitHub.
How Dean Created His Design
We asked Dean 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 Ext JS, Sencha tools, Sass, and theming?
I started developing apps with Ext JS 3, but didn’t use it continuously. I’ve used Sass for five years. This was my first Ext JS theme using Themer, but I’ve developed, adapted, and extended website front-ends for almost 10 years.
How did you create this design?
I had a little bit of time before Christmas, and I headed over to the material design palette to find a color palette for the theme as a starting point. I picked the dark primary color from the website and used it as the base color in Themer. After I chose the base color, I used the 10% lighter and darker color feature from Themer to derive the lighter teal tone. For the accent colors (icons etc), I chose a blue tone that provided a nice contrast to the teal. In the end, I picked a light gray as the background color. In my opinion, this color is a bit easier on the eyes compared to the default white.
Where did you get your inspiration for the design?
Mainly from the teal/blue color palette in the material design palette.
Describe the process you used to create this theme.
I chose the Material Design preset in Themer to start this theme. Next, I set my chosen color (dark teal) as the base color and tested different color variations until I was satisfied with the look. Then, I applied the color schema to all the necessary components. If I was not able to target a component through Themer, I manually wrote Sass to apply any styles to that component.
Describe your experience using Sencha Themer.
I used the first EA of Themer that was released after SenchaCon. Starting a theme was pretty straightforward and easy. Styling the base colors and base elements was also no problem. The color picker with the lighter and darker feature was really handy.
About Dean:
Dean works as a Front-end Developer at dkd Internet Service GmbH based in Frankfurt, Germany. He spends his day developing and architecturing websites and web applications. As an experienced Ext JS developer, he also provides on-site consulting to support his customers.
Developing software without an architecture pattern may have been an option back then. However, that’s…
As a web developer, you know how popular JavaScript is in the web app development…
2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript…