7 Mar 2012 4:29 AM #1
CSS/SASS customization with ExtJS
We would like to consult with you regarding CSS/SASS customization with ExtJS.
We're working on an advanced application based on ExtJS framework and now we're starting to work on the design and graphics.
As we see it there are 2 options to customize the look&feel of our application:
1. Take Ext's SASS code and customize it - this will cause upgrades problem...
2. Take Ext's SASS code and extend it with our customized CSS.
We would like to here your opinion? What is the recommended way to do it?
We see there are config parameters we can change but it's not flexible for us.
7 Mar 2012 5:47 AM #2
If you're going to do more than change values of the exposed SASS variables or add new UIs with the SASS mixins, then there's always going to be a potential for upgrade problems, whether you're using SASS or plain CSS. I'd highly recommend using SASS as it is eminently more maintainable than straight CSS and gives you a lot more power and flexibility. But what you definitely don't want to do is change the Ext SASS source directly. I'd recommend using what mixins you can from the Ext SASS and adding some of your own mixins for any deeper changes you have to make. As a starting point, maybe something in this format:
$theme-name: 'custom'; /** * Set some values for global variables */ $base-color: #dbd9d9; // ... etc ... $include-default: false; @import 'ext4/default/all'; @import 'custom'; /** * Use some Ext mixins */ $button-default-base-color: #f8f8f8; @include extjs-button; // ... etc ... /** * Add some custom stuff too */ @include custom-button-overrides // ... etc ...
7 Mar 2012 7:39 AM #3
Thanks for your answer burnnat!
But this way I must use "!important"... right? and also I'll get unnecessary CSS code from Ext that I won't use in my application.
This is my thought, please tell me what you think:
I would like to design the slider component, what I'll do is copy the "_slider.scss" file to my own SASS folder and change it... then in my project file I'll replace the include to use my new file.
What do you think?
How can you do the slider design better?
7 Mar 2012 8:06 AM #4
It's really just a judgment call on your part, based on how much of the original you'll have to alter. If you'd keep most of the original with only a few modifications, then it could be better to accept some unnecessary CSS knowing it will save you headaches when updating later on. But on the other hand, if your updates are truly substantial and there's very little of the original code that you'd keep intact, then it could be better to copy-and-modify, as you suggest. Or maybe a hybrid approach would be best for you, where you apply overrides on top of the original code for some elements (say, buttons), and do a total rewrite for others (such as sliders).
Basically, you're going to have to make a tradeoff one way or the other. It's up to you to weigh the advantages/disadvantages and decide what will work best in your particular case. In the past, I've valued maintainability and upgradability higher and taken the "override" approach, but I've not had to make really large substantive changes to the theme - your situation may be different.
8 Mar 2012 12:17 AM #5