What is the difference between macflux and flux

You probably fall into one of two groups -- either you're already a web designer who wants to upgrade your toolkit to keep up with the latest HTML5 standards, or you want to be a web designer and you need to get started without all of that programming getting in the way. Is there an application that can fully satisfy everyone's needs? There is! It's called MacFlux!

MacFlux lets you create and publish professional looking websites that are compatible with HTML5 without any programming skill! With MacFlux , you'll have the best of both worlds -- a creative design environment that lets you unleash your ideas, plus free website templates to get you up and running quickly. It also includes a host of useful widgets for things like image galleries, calendars, maps, and more -- letting you up the cool factor in just a few clicks of your mouse.

When I said you don't need any programming skills, I really meant it! Old School Coders will appreciate the ability to type your code in manually and automatically have MacFlux display the results! Daily Bits Email. Sign Up! The email you entered is already receiving Daily Bits Emails! Eviandem Jul 27 Although I bought this software as a full version, I switched to Pinegrow. The user interface is simply too confusing and not very intuitive.

I never had the impression that I could ever use the software properly. Teksestro Apr 30 Flux Developer: please, update your software description here in MacUpdate - it looks bad for a company that does software for modern, mobile-first websites to be talking about 'XHTML' and 'Quicktime' and 'Flash'.

Also: please update your website, so its layout doesn't break on mobile. Again, it makes you look bad. Name conflict with F. Might be worth addressing this because it is frustrating.

Kudos to the team, they totally built an app that rivals others. Scott-C-H- Feb 8 Enough said, and yes, it's that bad. Scienceman Jan 6 Really expensive upgrades! Why-Not Dec 22 One of the best software trailers, ever. Might bring me back to using Flux. Currently, Pinegrow has me with their WordPress kit.

How to I purchase an upgrade from V4 to V6? Michael-Vilain Jun 19 I used Flux for a while to learn how it did what it did.

I also wanted to compare the flow of Dreamweaver vs. Flux vs. Clients were asking for web sites and I had to figure out what was easiest to use. For modifying Wordpress, Dreamweaver. For building ready-made sites from templates, Rapidweaver. I never did figure out where Flux fit. So I stopped using it. I explicitly said "Don't contact me" and up until recently, they didn't. I figured they hired some new marketing person who didn't understand "opt-out" or thought there was a statue of limitation on it.

I looked at their web site and that explains a lot. They also sell a tool to do bulk emailing. So I guess they were dogfooding. I'll steer clear of this company and their products from now on. RogerKatz May 7 The current version, which MacUpdate installs, is 6. Rochade Apr 26 Well, I give flux a try with each new version but still it can't get into my daily process because of the UI. It really is counter-productive and I never spent the hours it needs to adopt it. Sure, the idea of flux to sit between easy website creation tools and a fully fledged editor is great but the ui is too complicated to really use it.

I am much faster coding my sites by hand. Albertkinng Apr 26 I remember paying the full price for Flux 4 and I really never understand how to use it. I want to jump from Rapidweaver, I've been using Espresso lately to work with some pages but I really think Flux will be for someone like me graphic designer with intermediate knowledge of html5 and CSS3 do you think Flux 6 is good enough to understand and use this time? Sandro-Bilbeisi Feb 10 I purchased a copy of Flux V in a bundle , and was looking forward to updating to version 6.

Unfortunately, v6 now requires Mac OS X Mikael-B Jun 28 I still see no signs Flux have evolved to the stage where also hand-coders can use it. Can you code really fast in the current version or are there still a ton of dialogs to wade trough as in v.

I found v. The first object you create will have the body object as its parent, the body object can be considered to be the root object. Step 1 Select the parent, in this case , its the body element, so you can click almost anywhere on the page to select it. Step 2 Once the element is selected, we need to add a new div, a div can be considered to simply be a container for objects, than can be decorated as you see fit.

Use the Quick Div option, as this type of div comes pre-configured with cer tain values that make them easier to work with. The Containers menu has a lot of different type of objects to choose from, the differences are explained in the Flux Reference Manual, which is available from the Help menu. Step 3 Once you have created the new div, select it by clicking on it, and we can star t configuring it. The image below shows the new div is selected on the page.

Step 4 We want this object to become the main container on the page , and for it to float in the center. We will first set the size of the object, we want it to be px pixels px tall. See how there are already values is populated, this Quick values configured. Change the width value to and the height value to You will see the selected object on the page change Div width, and.

Note : At the top of the Inspector sections, you will see the word Inline, this means the values are being made directly to the element on the page, and NOT via an external style, dont worry about this, we will make it into an external style later.

Step 5 Now, we will change the color of the element, so we need to switch to the Fill area of the Inspector, and enable the backg round-color attribute. Once , the bac kground-color attribute is enabled, click the color well and choose the color you want the container to be. You can choose any color you like, but for this d e s i g n , we re c o m m e n d a light grey. Again, you will see the change happen immediately, and the element will be much easier to see on the page.

Step 6 The last step of this section is to put the container in the right place. At the moment, its on the page , in a fixed location, we want to make it centered. F l u x m a ke s c e n t e r i n g o b j e c t ver y easy, with the element still selected on the page , choose Auto Center from the Gear menu at the top right of the Inspector. You can also set the top value to a different value , around would probably be about right.

Your page should now look like the image display above. If you cannot see the blue margin areas, check that the Margins button at the bottom of the window is clicked on. The element we have just created has the CSS styling embedded inline, this is generally considered undesirable , and its better that styles are external.

In this section of the guide we are to conver t inline styles into external styles. Step 1 Make sure the element we have just created is still selected, and choose Create Style with Enter a name for your new external style , in this case , we will call it mycontent. Choose the stylesheet to save the style in, in our example , there is only one StyleSheet attached to our page , so we dont need to choose.

We also need to choose if we want to create the external style as an ID style or a Class style. In this case , choose ID. Lastly, we need to decide if we want Flux to remove the inline styles in the selected object, in this case , we do, so make sure this option is checked.

Flux has also linked the external style to the page element by setting the ID attribute in the page element. Step 1 Select the mycontent style in the styles list and open the Inspector. Step 2 Make sure you are editing the external style by checking the Inspector at the two locations pinpointed by the red arrows in the image below.

Select the All sides option, as we want the change the border on all the sides of the element. Change the style to solid, pick an appropriate color, and set the width to 2px. Changes will happen immediately.

Weve make quite a few changes, so now would be a good time to preview your page , Flux can preview your page in two different ways. Method 1 Choose a web browser installed on your system from the Preview submenu, which is found in the Page menu.

You may need to use Update option before any browsers appear in this list. Method 2 Another method of previewing, is to use Fluxs built-in web browser, to do this, simply press the middle section of the button bank at the top right of the Page Designer window. Fluxs built-in Preview function is ver y similar to the Apple Safari web browser supplied with your Mac.

Once you have finished previewing, press the Edit section of the button back to return to editing your page. Its recommended that you preview your page in a few different browsers, particularly Firefox, as many web users use this browser. Were finished editing our new object now, so to prevent accidental editing, we can loc k the object. To lock the object, make sure the object is selected, and choose Togg le Lock from the Edit menu, or use the shortcut Command-L. You wont be able to edit this object visually until you unlock it using the same method, although you can still edit the object using the Inspector Editor.

Locked objects are visually recognizable as their tags turn red, and the drag handles for resizing are disabled and grey. In this par t of the guide , we are going to create the bottom bar par t of the website , where we can write copyright information. Step 1 B e fo re we c re a t e o u r n e x t object, make sure you have selected the object that is intended to be its parent, i. Our next object is going to be a f l o a t i n g d i v, s o c h o o s e Floating Quick Div from the Containers menu.

You will see the object appear at the top left of the large grey element we created in the previous section. If it appears in the top left of the body element instead, then delete it, and tr y again, making sure you have the correct parent object selected.

Step 2 Click and hold the mouse button on the bottom right drag handle of the object, and drag the object to roughly the desired size , its width should equal that of the parent element, and its height should be about the width of a ballpoint pen. We can adjust it more accurately in the Inspector later, this is just an exercise to get used to using drag handles to resize an object. Step 3 Once you have dragged the object to roughly the correct size , use the Inspector to set the color to a dark grey color.

Step 4 Next, we need to make the object hug the bottom of its parent element. Step 5 Since we just used the drag handles to get it roughly the correct size , we can g e t e x a c t ly c o rre c t now using the Inspector.

Step 6 Like before , we have been making these changes inline, and now we want to make them external. So, just like weve done before , make sure the element we have just created is still selected, and choose Create Style with This time , we will call the style bottombar, and again, it will be an ID style.

Its impor tant you carr y out this last step, or the rest of the tutorial will not work correctly. The element we just created is intended to display copyright information, so lets enter some now. Step 2 Click inside the bottom bar we have just created. It may be difficult to see , but a flashing cursor should appear where you can star t typing. Step 4 Switch back to Edit mode to complete the text changes.

Save the document by pressed Command-S. The text weve just entered doesnt look ver y pretty, the alignment is wrong, the color is wrong and it needs to be moved down inside the object. First, lets tackle the color. Select the style in the Styles list and open Text section. Making sure you are editing the correct style by checking the top of the Inspector check the correct style is being edited, its pinpointed by the blue arrow in the picture to the right the Inspector to the.

Step 2 Enable the color attribute by clicking on it, and use the colorwell to select an appropriate color, maybe white , or a light grey.

As with the other attribute changes, you. Step 3 We v e c o r r e c t e d the color, so now lets take care of the alignment. Alignment is done in the same place in the Inspector. This time , enable the text-align proper ty, and set it to center.

Your text should now look similar to the picture below, both the color and the alignment are now correct. Its impor tant to realize that these changes are being made to the CSS style, and not the element, the element is linked to the style. At the moment, the text of our bottom bar is at the top of the element, it would probably look a lot nicer if it was pushed down a little more towards the centre of its container.

A good way to achieve this, would be to use padding. Padding is like the inner margin of an element, for example , if you had a container div with a paragraph of text within it, and you set a 1cm top padding, the text would star t flowing 1cm from the top of the div. The purple handles in the image above are the padding handles, they may be a different color on your Mac , but they are always the inner handles.

Step 1 Click and hold the mouse button on the top padding handle , you can visually adjust it, but first you will be asked if you want to make the padding inline or external. Make sure the bottombar style is selected, and press the Put it in selected style button.

Now you have chosen where to store the padding changes, you can use this handle to tweak the padding. There are a few impor tant points to be aware of. Step 2 As we explained in note b, the overall size has increased, so we need to adjust the height of the element to account for this. Adjust the size by tweaking the bottom square handle to adjust the height, since this box is still anchored to the bottom, only the height will change.

Again, the change you are making is explained at the bottom of the window. We recommend changing the height to around 20px. Once you have made these changes, use Command-L to lock the element. Step 1 Create another Floating Quick Div making sure to use the element selected in the image below as the parent.

Its always very important to get the structure of your site correct, if you dont, itll be difficult to rectify when the page gets more complex. Once you have created the new floating div, it should appear on your page in the same location as the image to the right.

If it does not, delete the div and tr y, again, making sure you have selected the correct element as the parent. A new style will be be created called. Select the style in the list, and either right-click your mouse , or control-click, to reveal the contextual menu. Choose Rename from the menu, and type in the new name. In this case , we will call the new style.

Step 3 Make sure the. Select the Fill section of the Inspector and enable the bac kground-color proper ty. Set the color to the same color as the bottombar style , the easiest way to do this is to use the color picker feature of the Mac OS X color palette pictured below. For large screens this setting is probably not strong enough to remove all alerting light. Working late : for extreme night owls, removes solar timing and gives 14 hours of bright waking light.

You can also use postal codes US only , the name of a nearby city, or map coordinates find them on the map at justgetflux. Fast transitions : 20 second fade at sunrise and sunset. When unchecked, f. Sleep in on weekends : For people who want brighter light later on Friday and Saturday nights and sleep in on Saturday and Sunday mornings.

Extra hour of sleep ages : Starts Bedtime one hour earlier for teens and other people who need a little more sleep. Expanded daytime settings : Warmer daytime settings to K for people who want to reduce eyestrain or match office lighting. Backwards alarm clock : Calculates how many hours remain until your wake time and gives reminders every thirty minutes when it gets very late. Dim on disable : Gentle fade on disable so it hurts less to check colors.

Darkroom mode also preserves night vision while using a screen. Movie mode : Lasts 2.