Results 1 to 4 of 4

Thread: Architect project to make small 2nd CSS from theme colors

  1. #1
    Touch Premium Member
    Join Date
    Aug 2010
    Posts
    104
    Answers
    1

    Default Architect project to make small 2nd CSS from theme colors

    I want to do this in a way that can run in Architect.

    My my-all.css is 600kB, and let's not discuss that.

    But I also want a small CSS file, made from same theme, that I want to be used by small SVG icons I have such as resources/images/my-custom/my-icon.svg.

    I am afraid the big CSS would slow down small icons (in grid) too much. And, SVG has somewhat different needs such as "fill" and "stroke".

    Where do I put what file, etc, what options in Architect, to make this work?

    If you want to try something simple, here is

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
      <g opacity="0.7" stroke="black" stroke-width="2" fill="none">
        <rect x="1" y="1" width="14" height="14" rx="2" ry="2"/>
        <line x1="1" y1="4" x2="15" y2="4" stroke-width="1"/>
      </g>
    </svg>
    and I'd like it to use a CSS that is made from SCSS

    Code:
    rect, line {
      stroke: $base-color;
    }
    The linking of the CSS would be like

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <?xml-stylesheet type="text/css" href="my-theme-for-svg.css" ?>
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
      <g opacity="0.7" stroke="black" stroke-width="2" fill="none">
        <rect x="1" y="1" width="14" height="14" rx="2" ry="2"/>
        <line x1="1" y1="4" x2="15" y2="4" stroke-width="1"/>
      </g>
    </svg>
    But, how do I get Architect to make such an additional .css file?

  2. #2
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498
    Answers
    10

    Default

    You can add a CSS resource to your project and add any additional CSS as you want. If you're using custom themes, you can also add SCSS resources under the custom themes that will get compiled into the regular CSS.

  3. #3
    Touch Premium Member
    Join Date
    Aug 2010
    Posts
    104
    Answers
    1

    Default

    I had working what you said. But that doesn't automate adjusting that small CSS file for the SVG icons when $base-color changes.

    As you are saying, additional SCSS will get compiled into the regular CSS. I guess I could try whether that performs tolerably, linking that monstrous CSS to the tiny SVG files (which will get rendered many times in grids as icons). Wish we could make a second (or multiple) CSS files from SCSS.

    Which brings up another aspect: The ability to run just any script (or at least in some language) as part of an Architect build.

    Because, I w/could write a script that takes/copies colors from the regular CSS into a tiny CSS for the tiny SVG files. Would be nice if that script would execute as part of the Sencha Architect build.

    You'd not need to provide a GUI for that. Just implement and document: If a certain script (or several) are at a certain path (in a directory) then that script(s) will be executed by/after the build. Maybe one script(s) before, one after building? Given a choice, I'd take one script after building.

    Or maybe if I'd read Sencha Cmd documentation I'd know there is an option to run an additional script? Is there?

    (Node seems an attractive choice, but bash could be tolerable, that could be subject to discussion before implementing. I take anything, just to get it done.)

  4. #4
    Sencha User arnebech's Avatar
    Join Date
    Jun 2010
    Posts
    498
    Answers
    10

    Default

    Not too familiar with the area myself (so I won't be of much help), but you there should be integration hooks in Cmd for adding your own scripts. See
    http://docs.sencha.com/extjs/4.2.2/#...-customization

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •