Aug 17

Save your CSS with the Flex 2: Styles Creator

Tag: Flex and RailsDerek Wischusen @ 9:07 pm

A while back I was playing around with the Flex 2: Styles Explorer (Developed by Adobe Consulting) and I thought to myself that it would be nice if you could save the CSS that you create with it.  Well, a little AS3 and Ruby later (see the previous post for details) and I present to you The Flex 2: Styles Creator. 

You can check it out here: http://www.flexonrails.net/stylescreator/public/

Simply use it as you would the Flex 2: Styles Explorer, but if you create something you really like, just click the Download CSS button (my minor contribution) in upper-right hand corner and download it to your machine.

In the future, I plan to build out the back-end so that you will be able to save to a database and share your Styles with everyone else.  I hope to get this done in a couple of weeks.

18 Responses to “Save your CSS with the Flex 2: Styles Creator”

  1. Peter Baird says:

    Derek,

    Very nice stuff. I’ve been currently working on a lot of updates to the style explorer, and one of the things that’s been on my “todo” list is add an “Export All CSS” functionality (or as you’ve more aptly termed it, “Download CSS”).

    I was wondering if I have your permission to include the work you’ve done in a next release of the Style Explorer, rather than duplicate work that’s already been done. I, of course, would reference your contribution in the source code as I have others, as well as in the blog posting when the next version is released.

    Please contact me offline at the email I’ve included.

    Thanks.

  2. sascha of H1DD3N.R350URC3 says:

    Very useful tool! But for Panels there seems no option to change the spacing between the outer panel frame and the inner one. Obvislious this is borderThicknessLeft, -right, -top etc. But it looks different. I never saw those thick borders around the Panel before.

  3. Mike says:

    Hi Derek,

    Styles Creator is nice :)

    Seems viewsource link is broken
    (Recognition failed for “/srcview/index.html”)

  4. Alex Muntean says:

    When I\’m trying to view the source…

    Routing Error
    Recognition failed for \”/srcview/index.html\”

     [Crap - I forgot to upload the files.  It works now.]

  5. Adam Di Carlo says:

    The URL http://www.flexonrails.net/stylescreator/public/ doesn’t seem to work for me. I’m using firefox. I just get a screen which is a single solid color.

  6. JKirby says:

    This is great. To take it a step further… I’m building a flex app where I’d love to build a configurator of the application where they adjust the LAF to generate a custom css (for the whole application) that could then be uploaded.

  7. Chris Seahorn says:

    Hi Derek,

    I wanted to mention I came across a minor issue when choosing a button bar theme color inside the buttons panel. It generates CSS that will flag a compile time error in FB2. I’ve notified Peter as well but wanted to mention it to you for your Styles Creator version. I haven’t miticulously gone through every panel to look for any others but this one I happened across last night testing a desktop version.

    Ex:

    ButtonBar {
    themeColor: #00ccff;
    buttonStyleName=”myButtonBar”;
    }

    Instead of:

    ButtonBar {
    themeColor: #00ccff;
    buttonStyleName: “myButtonBar”;
    }

    Nothing major but new users may get confused by the recommendations FB2 gives (mouseover fix suggestions doesn’t specify it’s the equal sign but instead recommends a left parenthesis)if they didn’t know the difference. Keep on with the great work!

    Chris

  8. Chris Seahorn says:

    Sorry to be a constant comment monster Derek :)

    I should have helped in my last comment by saying the fix is line 160 in as/Buttons.as (which you would of course have found but this will certainly speed it up for you )

    + ‘ buttonStyleName=”myButtonBar”;\n’

    should be:

    + ‘ buttonStyleName: “myButtonBar”;\n’

    Again, I left a comment at The Adobe Consulting site for that article but not sure how fast a turnaround that is. Since yours actually downloads the concatenated CSS and you have a huge RoR fanbase I figured I should mention it to you.

    Sorry again

    Chris

  9. MadeInFlex » Blog Archive » Estilos en Flex a través de CSS (MIF ONLINE I) says:

    [...] Flex Style Explorer modificado para guardar el CSS [...]

  10. flexonrails.net » Blog Archive » New version of the Flex 2 Styles Explorer released says:

    [...] you visit this site to use the Flex 2 Styles Creator to create and download CSS then you should definitely check out the new version of the Flex 2 Styles Explorer that Peter Baird [...]

  11. Как вставить swf файл в flex приложение « OM DESIGN says:

    [...] Flex Styles Creator Derek Wischusen: Flexonrails.net [...]

  12. FlexInflux » Blog Archive » New Flex Style Explorer: Jam-Packed with New Features says:

    [...] styles to an existing style sheet. Copy-and-paste seemed to be the simplest solution. Thanks to Derek Wischusen for the inspiration in getting this [...]

  13. FlexInflux » Blog Archive » The Flex Style Explorer is a Proud Papa says:

    [...] Styles Creator Derek Wischusen: Flexonrails.net Derek did some great work adding server-side css-file creation functionality to the Style [...]

  14. Dave Graham says:

    Hi Derek, thanks for a great resource.

    It would really be handy to be able to load a CSS file we’ve previously saved so we can continue working on a style over time.

    Cheers,

    Dave

  15. vodesign.ru/v blog» ????? ????? » Flex ?????????????? says:

    [...] Flex Styles Creator Derek Wischusen: Flexonrails.net [...]

  16. Flex Blog » Blog Archive » Flex Explorers that I found while googling says:

    [...] Styles Creator Derek Wischusen: Flexonrails.net Derek did some great work adding server-side css-file creation functionality to the Style [...]

  17. Ganesh says:

    Hi this very good. i have a doubt can we save as new css in to application
    then apply dynamically in run time. can you guide me please

    regards
    ganesh

  18. Susan Andes says:

    I love this app, but unfortunately for the past few days, rails isn’t launching. I get the following error message:

    Application error
    Rails application failed to start properly

    Could someone please check the backend?

Leave a Reply