Académique Documents
Professionnel Documents
Culture Documents
net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 1
Flux is a WYSIWYG website editor for Macs. Now, before you curse under your breath about how much you hate WYSIWYGs, you should know that Flux is different and is both powerful and flexible enough to be used by professional web developers. Today Ill introduce you to Flux by creating a super simple web page from scratch (no annoyingly rigid templates). Along the way well see what a typical workflow looks like and why it just might be the best visual web editor Ive ever used.
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 2
So Dreamweaver is for professionals but has a steep learning curve and iWeb is for laymen and has almost zero learning curve (and consequently zero flexibility), where is the happy medium? Enter Flux. Flux is a visual web design application for people that hate visual web design applications. The workflow has been carefully crafted to mirror the way you code sites by hand. The best part: its completely flexible. There are some included templates but Ive never even really bothered with them because Flux makes it easy to design from the ground up, just like I would if I were writing out the code manually. Enough talk, lets see Flux in action.
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 3
Pretty simple right? It almost looks like one of the cheesy templates that come with these types of apps but as I said above, well be building this from the ground up.
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 4
When you double click on the HTML file, youll be taken into the main Flux interface. As you can see, theres a lot going on here. In fact, we could spend the entire tutorial just discussing each button and feature. However, to make things less boring, well go straight to the building and introduce features as they come up. I definitely recommend that you download the demo and poke around the interface to familiarize yourself with it.
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 5
To do this, click on the Inspector button at the top (looks like a pair of binoculars). This will bring up what is in my opinion, the heart of the app. Here youll create styles and define the look for every element that you create inside of Flux. The output of the Inspector is CSS and all of the controls inside are labeled with the CSS properties youre used to working with.
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 6
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 7
This should create a little empty box with guides on your canvas.
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 8
Just as we did before, select the element and open the inspector. Under Position & Size, set the width to 700px and the height to 810px. Make sure to clear out the default values for top and left while youre at it.
Auto-Centering An Element
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 9
Now, if youre a web developer you already know exactly how to center this div: set the margins to auto. You can go in and do this manually or simply click on the little gear at the top right of the Inspector and go down to Auto Center.
Adding a Shadow
At this point you should have the basic frame for the site.
Just for fun, I want to show off some of the Webkit CSS3 features built into Flex. If you click on Webkit in the inspector, youll see a handful of fun CSS properties: box-shadow, box-
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 10
reflect, webkit transitions, etc. Unfortunately, there arent any Mozilla equivalents, but you can always drop those into the code manually. To add a shadow to our container, just click on the property and adjust the settings.
Inline Styles?
Keen observers have probably noticed by now that the styles weve been creating are set to inline. This is one of the quirks of the Flux workflow. For some strange and unknown reason, all of your styles are set to inline by default. Its actually a bit easier to setup elements in Flux when they are set to inline so the Flux website recommends that you first set up an element the way you want it in the manner that we have above, then convert the styles into something that will appear in the external stylesheet.
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 11
Fear not, this is a quick and pain-free process. Select the object you want to convert, rightclick on it and select the Create Style with option. This will bring up the following dialog that will allow you to assign an ID or Class to the object.
Doing this will create a little icon on the left with the ID we just applied. This area is basically an outline of our CSS file. Now when you want to change the properties of that container, youll double click on the icon here to launch the inspector.
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 12
double click inside of it to type inside of it (this essentially creates a p tag). Once you type out what you want, you can style the text however you like. As you can see below, Ive added settings for color, font-family, text-transform, text-align and font-size.
Next, do the same thing for the text below the headline.
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 13
That should give you a nice typographical header for your page. Remember to convert both of these elements to external styles just like we did before.
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 14
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 15
One thing to note is that to create a link, you simply select an element or block of text and go to Edit>QuickLink. With that, the page should be all finished!
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 16
If we want to look at and edit the code at any point, just hit Command-3 to bring up the code viewer.
Flux spits out nice clean code that fully integrates with the development process. You can do as much or as little as you want with the WYSIWYG interface and do the rest by hand. Since Flux uses only plain old HTML and CSS files, you can even work on the site in your favorite code editor as you build in Flux. The workflow is completely open so that if at any point you just want to do something the way you always have, youre free to do so!
Built-in layout modules for fast prototyping Live Browser View JavaScript, PHP, and all that jazz WordPress Theme Support Reusable Code Snippets History Palette
http://designshack.net/articles/html/how-to-build-a-website-with-flux-3-a-coders-wysiwyg/
pg 17
Widget palette Create easy galleries and jQuery effects HTML5 Support Google Font API Support Tons more that I dont even know about yet!
Closing Thoughts
I first used Flux a couple of versions ago (Flux is now in its third iteration), and loved the idea but wasnt crazy about the execution. It felt a little buggy (all that is fixed now) and really didnt seem that easy to just pick up and run with. However, that encounter was quite brief and Ive always wanted to go back and really give it a proper run through. Ive played with Flux for the past two days and have to say that, once I took the time to figure out the proper workflow, working with Flux was a dream. It definitely takes a little while to figure out all the quirks but once you do they dont eat up any time at all and feel quite natural. At the very least, Flux is awesome for prototyping. Fans of designing in the browser instead of Photoshop will see most of their concerns addressed here as you are forced to design using actual CSS properties and positioning rather than Photoshop effects. My favorite part about the app is that it doesnt corner you into using it through the whole process. There arent any Flux project files to worry about, only the files you would normally use to build a site. This means you can switch to a different app or even pass the project off to a colleague or client who neither needs Flux or need ever know you used it. If youre a developer who codes by hand that often dreams of a WYSIWYG that doesnt suck and can actually plug into the way you currently work, I highly recommend that you give Flux a shot. It can be a little frustrating at first, but take the time to push through that and figure out how to really use the app properly and Ill wager that you might just think its the best WYSIWYG youve ever used.