Flux: A New look at WYSIWYG

I am a big fan of the WYSIWYG (What You See Is What You Get) concept. Applications like RapidWeaver, and Sandvox make it easy to create a website with pre-designed templates, and edit them to your hearts content. Over the past few months I have been learing as much as I can about web development, to the point where these applications have begun to become limiting.

One application that is relatively new to the WYSIWYG scene is Flux, from The Escapers. This app aims to give you complete control over the look and feel of your websites, while not limiting you to only being able to adjust a few parameters of pre-installed themes.

When you first open up Flux, you can either start a new website from scratch, or from one of the included templates. If you decide to go from scratch, Flux can automatically create an index.html file, and CSS file to get you started. Once that is done, you can add additional pages/CSS files to your hearts content.

Double clicking an HTML file will open up Flux’s main window. This window is where the bulk of your web development will take place. Double clicking on a CSS file will greet you with the alert: “CSS files are created and modified by Flux, they should not be edited externally. If you still want to open the file, press ‘Open’,” which in my eyes is a big downfall of Flux. There are some things that are easier to edit in say TextMate or CSSEdit, so it would be nice if there was a way to edit CSS files externally, and have the changes reflect in Flux. When asking the developer about this, I received this response:

Right now, you *could* edit CSS in other editors, but it’s really not something we recommend, basically because Flux supports CSS fairly well, but it does not support some of the more esoteric features, and also there is some CSS “shorthand” we don’t support yet, this means that someone could type in valid CSS which Flux might take a dislike to. Similarly, Flux supports new CSS features like@fontface rules, which other editors may not, and then they might end up messing up Flux’s valid CSS. It’s something we are thinking about and will probably try to support sometime in the future.

This might be something we see in the future of Flux’s development.

With external editing aside, lets move on to Flux’s main window. The main window of Flux is organized into three panes. Your CSS styles are in the left pane, you build the website in the middle pane, and the right pane is where you will edit your CSS styles. There is also an option to have the pane where you edit your CSS display under the styles in the left pane.

The first thing that I always do when creating a website is add the metadata. To do this in Flux, you can click on the “Page Attributes” button in the toolbar at the top of the page. You can add in your page title, keywords description and author. The other tabs are where you can add custom code/attributes, javascript files, and CSS files. make sure before you start building your website that there is a CSS file in the CSS tab. If not, drag the one you created earlier into the pane from the site manager.

To begin building a website, you have to add an element. For this review, I’ll begin by adding a div in the middle of the page, and call it “contentcontainer.” To do this, click “New Element” in the top left corner, and click “Div.” You can resize the div to whatever you please by dragging its handles. To add a CSS style to this div, right-click and select “Create style with…” or use the keyboard shortcut Control-Command-S. This will open a dialogue window that lets you name your style. Once you have created your style, you can begin to edit your div in the right-hand pane.

Selecting the div in the middle pane, or the style in the left pane, will open the CSS Editor. You can edit all things you would expect in the editor, like position, Size, Fonts, Decoration, Shadow, Padding etc., and you can add in your own attributes if you would like. Clicking a checkbox beside an attribute drops down its options. For example, if I select “Fonts” I can choose the fonts that I want displayed in that div. This makes creating the CSS for your site easy, as most of the values for that attribute are right there in the editor.

One of the really neat feature of Flux is its built-in image effects. If you add an image right into the site manager, you can apply many different image effects, from adjusting the color, to adding scrapbook tape to it (like you see in the screenshot further below). The window is a little buggy, you have to resize the window in order to see all of the options for some effects, though I have notified the developers of this problem, and hopefully it will be fixed soon. If you add an image from the site manager to your site and then add effects to it, the changes are not reflected in the Edit view, but they are in the Preview view (which I will touch on in a second). Maybe we will see this in a future update.

Flux has 3 main views. The Edit view, which we have been working in the length of this review, the Preview view which lets you preview your webpage using WebKit, and Live Preview which allows you to publish your page to a server, to preview it online. When you are ready to publish your website to the world, you can publish it by clicking “Publish” in the File menu, or upload the files in the folder Flux created in your documents folder to wherever you like.

Flux’s abilities extend far beyond what I have demonstrated here thus far. It supports adding JavaScript actions, embedding PHP, Flash, Java and even support for Ruby on Rails. I am not going to talk about all that today, but I thought I should let you know that it is all there. Flux lets you design and build websites without having to conform to a pre-designed theme, or having to code everything by hand. If you want, you can still use Flux’s built-in templates, which are very customizable.

Besides the few bugs I mentioned above, I have had quite a bit of trouble with the Undo/Redo in Flux. For example, I added an image into Flux and then deleted it. I then entered some text and deselected everything. Clicking Edit>Undo got rid of the image, but overlooked the fact that I had even just entered in some text. Just like with the other bugs, I have notified the devs of this abnormality, and it will hopefully be fixed in a future update.

Flux is $69 from The Escapers.