Hybrid View

  1. #1
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    6
    Vote Rating
    0
    nirzo is on a distinguished road

      0  

    Lightbulb CSS/SASS customization with ExtJS

    CSS/SASS customization with ExtJS


    Hi,


    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.


    Thanks!


    Nirzo.

  2. #2
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    410
    Vote Rating
    55
    burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough

      0  

    Default


    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:

    Code:
    $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 ...

  3. #3
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    6
    Vote Rating
    0
    nirzo is on a distinguished road

      0  

    Question Thanks, but...

    Thanks, but...


    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?

    Thanks again,
    nirzo.

  4. #4
    Ext JS Premium Member burnnat's Avatar
    Join Date
    Jun 2011
    Posts
    410
    Vote Rating
    55
    burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough burnnat is a jewel in the rough

      0  

    Default


    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.

  5. #5
    Ext JS Premium Member
    Join Date
    Sep 2011
    Posts
    6
    Vote Rating
    0
    nirzo is on a distinguished road

      0  

    Wink


    Many thanks for your answers!

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar