1. #1
    Sencha User
    Join Date
    Mar 2013
    Posts
    7
    Vote Rating
    0
    medv is on a distinguished road

      0  

    Default Extjs blank theme?

    Extjs blank theme?


    Hi there,

    The sass-compiled CSS includes not only specific styles for Ext components (ie border sizes and colors, line heights, font-sizes, shadows etc), but also core instructions for layout, backwards compatibility etc (for example overflow: hidden, zoom: 1, etc etc etc).

    At the moment I'm basically taking the giant compiled CSS, then "resetting" components that I would like to use. eg:

    Code:
    /* reset borders and paddings on ext containers */
    #ob .x-toolbar{padding: 0;}
        #ob .x-tab-bar{border-width: 0!important;}
            #ob .x-tab-bar-body{border-width: 0; height: 29px!important; padding: 0;}
                #ob .x-panel-body{border: 0;}
            #ob .x-tab-bar-strip{display: none;}
    This provides me with a "base" that I can go ahead and write my own design-specific rules for, without any unexpected surprises from Ext or having to use sass for things that ext's sass implementation is not convenient for.

    Is there a blank theme floating around, perhaps used internally by Ext? A theme that contains all layout and backwards-compatibility css only, without touching any specifics of style like shadows, dimensions, paddings etc. The current SASS implementation assumes a lot of things that I do not wish to have, and it's simply a hassle to read compiler errors when it gets a value it does not expect when I can target things how I want and have been doing for years with direct, vanilla css.

    If I understand correctly, if I use the "ui" declaration on a component or change its base class, I do not only get rid of the existing styling rules, but also layout and backwards compatibility and clever tweaky css that I still would like to have for the purposes of Ext.

    Am I misunderstanding something on a basic level? I just want to be able to start with a blank theme that does not break any Ext layout, but does not assume how I want my elements to look (ie. ONLY includes crucial layout and bugfix css, NOT stuff like borders and font size and line height).

    Bad:
    Code:
    10,000 Lines of Ext CSS -> targeted reset of specific components I want to style -> styles of those components
    Good:
    Code:
    Minimal Ext reset to help Layouts -> targeted styles of specific components I want to style

  2. #2
    Sencha User
    Join Date
    Mar 2013
    Posts
    7
    Vote Rating
    0
    medv is on a distinguished road

      0  

    Default


    I just discovered "base" and "neutral" themes. I will try to compile these - I hope the base theme is what I am talking about, fingers crossed.

  3. #3
    Sencha User
    Join Date
    Mar 2013
    Posts
    7
    Vote Rating
    0
    medv is on a distinguished road

      0  

    Default


    Couldn't work out for the life of me how to compile separate themes using the new package system. I'm just a designer, guys..

    In the end I just took the already compiled ext-theme-classic-debug.css and went through it, deleting everything other than what was commented as "compiled from ext-theme-base/..."

    The result ended up being pretty much what I wanted. There are still design-specific things like rounded corners on buttons, but I can deal with this - I was already overriding this and much much more before this. 15000 lines of debug css down to 7000 now.

    Seems to work OK between browsers. I have not tested IE6-7 as this is not required for my project. If anyone stumbles across this and like myself has no f*** idea what they are meant to do and does not want to kill their mouse scroll, here is the resulting base.css that I am including here - http://snipt.org/zgiy7

    In the meantime, if anyone can tell me what I might have culled that would hurt me down the track, then feel free to do so. As far as I can see now, I just need to go through everything like grid, buttons, and establish my own rules for font sizes and general layout (for example grid header sorter arrow needs dimensions and positioning now), which is what I wanted.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    Documentation for how to do this is being worked on.

    Basically, you will have to create a new theme package, which extends ext-theme-XXXXX whatever you want to base your theme on.

  5. #5
    Sencha User
    Join Date
    Mar 2013
    Posts
    7
    Vote Rating
    0
    medv is on a distinguished road

      0  

    Default


    Thank you for your response. Is there an eta on anything even minimal but functional that could be peeked in? Ultimately i just want to know what approach to take as i am beginning the ui code base of a very large application. My approach is working for me as it's vanilla and what is simpler than that. But if the docs are out soon then writing more ext-friendly code would have its own benefits.

    Yesterday I dove a bit deeper into sencha cmd3.1 and liked the more evolved sass implementation. The changelog gave me some direction in what to do with cmd. There was a version mismatch however (latest cmd required ext4.2.0.488 but the latest ext I got within 2 hours of getting cmd was .633. I tried to trick it by altering version files but i suspected the hash was how it knew anyway).

    Also, when I built my theme package extending base theme, it took like 30-40 seconds. Can i still use compass to then work with my theme with instant compilation times? If so, how?

  6. #6
    Sencha User
    Join Date
    Mar 2013
    Posts
    7
    Vote Rating
    0
    medv is on a distinguished road

      0  

    Default


    Just thought I'd chime in and confirm that the base stylesheet is not abstracted out enough. I have tested it by including it in kitchensink and it's obvious it breaks some layout things, as well as still including some theme-specific rules (blue boxes, rounded corners still present in some components). So it's not abstracted out enough yet. I will continue using my original approach of including the classic theme and doing a targeted reset on particular components I am planning to use. Not the best way, but at least it comes with certainty that things aren't going to be broken somewhere in a distant corner of my app.

  7. #7
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You cannot extend the base theme unless you really want to implement all details of how things lay out.

    You should extend the ext-theme-neutral

    That has just enough styling to lay things out correctly, but leaves just themeng concepts to extending themes.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,496
    Vote Rating
    44
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    But if you are happy with the shape of one of the built in concrete themes (like neptune or classic), it could be easier for you to extend them and change things which are controlled by vars.

    In that way you can change colours and sizes and images without having to build a theme for every widget from scratch.

Thread Participants: 1