Web Development

Web page editing and design with Flux for the Mac

Vincent Danen gives you an overview of the Flux web editor, an advanced HTML5 web design application for Mac.

If you're a web design enthusiast, whether for work or as a hobby, the Mac has you covered. There are a few great web design and web editing tools available that range from cross-platform offerings to OS X native ones, tools that are full WYSIWYG implementations that support full web design and code editing, to strict code editors, CSS editors, or web language editors (such as editors for PHP or Ruby or Python). With so many to choose from, how do you know what tool is right for the job? The easy answer is to give them all a try, but with each application implementing things differently, different UIs, and different functionality, even that is not such an easy answer.

For myself, I've always been a strict text-based "dig into the code" kind of guy, so I always used a combination of TextMate (or vim) and Komodo for PHP-specific code. For the CSS needs, I used CSSEdit, which is a remarkably great CSS editor, but that is all it is. As a result, the sites that I've put together are very old school in terms of design, using tables and smaller CSS elements for positioning, and lots of trial and error for placement.

The downside of this method of web design is you get left out in the cold very quickly when it comes to HTML advances, such as the new features in HTML5.

As a result, I looked around at different editors and I think I've settled on one that may do the trick. The software is Flux, which I had previously looked at when it was at version 2, but Flux 3 is quite a step up in how to handle web design and presentation.

Flux allows you the option of starting with a blank slate or to use a few templates to start your project with. Flux works on a project basis; a number of pages that, together, create a site. It supports different project types including a standard web site, Wordpress theme, and Ruby on Rails. A standard site will get you started with an images/ folder, index.html and main.css files. Each project type will create a layout specific for that type, so a Ruby on Rails project will create a number of files for configuration, database settings, etc., that differ from a Wordpress theme project.

Flux has a Site Manager (Figure A) to organize the hierarchy of the site. Clicking on a file will open it, either in the WYSIWYG HTML editor or an external editor for CSS files.

Figure A

The Flux main window (Figure B), or Page Editor, takes a bit of getting used to. There is a lot there, and it can seem daunting at first (although this isn't a problem with Flux so much as it is with all of these types of applications, simply due to the sheer volume of functionality). It has a tabbed interface so you can have multiple files from your project open at once, and a two-pane interface that lists style elements in three views: a visual representation of CSS styles, or a "navigator" view that allows you to view all of the HTML elements in a page for easy selection, or a combination of the two. The main window displays the web page in an editable view, and as a result, it can be quite busy.

Figure B

Flux does not lend itself well to using tables for positioning elements; everything is pretty much done via CSS containers (or DIVs). The editing window makes it easy to select these containers and drag them around and position them on the page wherever you like. Selecting a DIV, you can use the Inspector (Figure C) to get into the nitty-gritty of CSS editing. Here is where you get to manipulate the fonts, fine-tune positioning, borders, margins, and everything else CSS-related.

Figure C

Flux allows you to easily jump to editing the code, if that is what you want to do. The editor is basic, but has the regular niceties such as syntax highlighting (for HTML and CSS), as well as auto-completion.

Finally, Flux has a built in FTP/SFTP client so you can edit files directly on your web server. Convenient if you don't use something like Transmit or ExpanDrive to make your remote server appear local.

All told, there definitely is a bit of a learning curve to Flux. Those who routinely use WYSIWYG HTML editors may find it easier to use than someone who comes from a plaintext background, but since I find them all a little confusing because of that, don't let my bewilderment stop you from giving Flux a try. It's a little on the pricey side, coming in at £69.99 ($112USD), but it's still in the same ballpark as other similar programs like Coda ($99USD) or Espresso ($80USD).

About

Vincent Danen works on the Red Hat Security Response Team and lives in Canada. He has been writing about and developing on Linux for over 10 years and is a veteran Mac user.

0 comments