Introducing Boks, my latest and most ambitious AIR app to this day!
Do you design web pages? Do you write HTML and CSS? Ever heard about the Grid System and Blueprint CSS? Thought it was a pain to implement? Think again, fool!
Boks is some kind of WYSIWYG to help you setup a grid and baseline rhythm, build and fill your layout and export all this to HTML and CSS in no time.
Got your own CSS style already? No problemo, Boks can use them and eventually merge and compress them within a single “screen.css”. Your styles use images? Simply point to your asset directory and it will be included too! Afraid of breaking the baseline rhythm with you randomly sized images? Just select the “Add JS to fix baselines” option and you’re good to go!
Enough. Just go grab it (or just have a look at the lovely screenshots) and send feedback!
Apr 01, 2009: Update! I’ve done some wacky video screencasts that can help you understand everything about Boks, go and have a look! Yes, the sound is not perfect.
I was trying to install it in centos 5. I just clicked install in the home page. But it says download error. I have installed flash plugin. I also tried downloading the source code and install it using Adobe installer. But nothing happens.
I’m not sure AIR runs on Centos, or does it?
Is it possible to update the version of Blueprint shipped with Boks (by overwriting the CSS files with those from a newer version) or have you modified Blueprint in any way that would prevent doing this?
Boks *should* use Blueprint’s latest version (tell me if I’m wrong). But if you want to customize it, you can.
Just locate the “application storage directory” (depends on your OS) and you’ll find Boks’ template files. You can cutomize them but make sure you keep the variable placeholders, and optionally backup those changes as they will be overriden if/when Boks updates!
FYI – via email from http://www.dmxzone.com/ DMX have developed a free 960 Grid System Dreamweaver Extension. I have not yet tried the extension.
Perhaps a Dreamweaver extension is a possibility for Boks?
Reading an earlier comment, I think Boks-0.5.7 uses Blueprint-0.9.1. I did a “diff” against Blueprint-1.0 and there are differences. I believe the latest Blueprint was released 29/09/2010.
@John: The extension looks good but I’m afraid Boks is really designed to be a stand-alone app.
@Neil: You’re right, I didn’t notice Blueprint had been updated! Is there a newsletter or a feed I missed? Anyway, I’ll update Boks soon and integrate the changes.
Just updated Boks with Blueprint 1.0!
The nasty “update window bug” is still here so you’ll get a blank (well, blue/green) window: that means you need to update. Go to the project page to get it!
Hello, after version 0.5.6 I cannot select another markup type for some elements because of blank list. Please check this bug.
In 0.5.8 version you have <a> tags with color
settings. It would be great if Boks had an option to change this
default color.
@Netflash I recommend you override this setting by specifying a custom CSS file. Or you can find and edit Boks’ template files (in Program Files, on Windows)!
Hi Quentin
I would like to take this opportunity to wish you (and your commenters) a Merry Christmas and a Happy New Year
I’m having trouble installing Boks on ubuntu 10.04, the install button gives an error at the AIR install stage. I’ve installed adobeair from a repository. Can I download Boks by itself?
Yes, you can access the .air files by clicking on the version numbers in the “Versions” list (on the project page)! I hope this helps.
That worked. Thanks for your help, much appreciated.
Great tool and have been using it for a few months now but since the recent Air and software updates its stopped working for me – live view doesn’t display anything. Open URL doesn’t work or adding dummy text. Help! Am I missing something simple?
What operating system are you on?
Did you try uninstalling and re-installing the app? Or the AIR runtime?
Thanks – that seems to work. One thing – I am unable to close the Live preview or setting windows. They are always open now. Not a problem just different from before. I’m running Vista :(.
That’s right, this is not a bug but I admit it’s a strange way to bypass one. Couldn’t find a better way to fix it!
Love it. I think it really has potential to vastly improve my workflow.
Would be nice if it allowed importing of arbitrary html in addition to css, but i understand this may be considerably harder to implement.
Keep up the excellent work!
Found a small but important export “bug”: When you export the CSS, you have REMOVED the following definition:
.last{margin-right:0;}
…that MUST come AFTER the .column,.span-1, etc definition block because it adds a right-margin to all of those classes.
Please DISREGARD last comment…I think my CSS Editor removed it as redundant.
Boks is a great tool, no doubt about that. I would really like to be able to set left margins as well as right margins. I realise Boks was written to work with Blueprint and not 960gs or the 1kb grid. Please consider incorporating alternate css frameworks, or at least, offering left/right margin options. This air app really is worth further development. Everyone who has commented here has agreed with that.
OMG, with a nice php framework i built a site in hours. Thanks for the awesomeness. Keep good work.
I like to use 0 gutter width. Is there a way to color code the blocks to distinguish the columns? It all goes to one solid color when you don’t have a gutter width.
No, not really.
What I can suggest is that you set your gutter width to 1 when designing and then set it back to 0 when exporting… I hope this helps!
thanks, that’ll work :)
I’d like to see Boks modified so that the entire directory is not deleted before an export. By deleting everything in the directory, I’m prevented from putting the output directly under source control because things like .svn directories get deleted. That causes all sorts of trouble with subversion. It would be great if Boks just overwrote the files it needs to change.
Hey Mike!
I understand your needs but unfortunately I won’t have time to do that… Sorry!
i cant install it in my linux, i instaled the adobe air, and indicate error on install tha program…i use ubuntu 11.04, i alredy installed the adobe air, and now? what i can do?
I think (and hope) this could help!
Hi Quentin ,
I was wondering if time has come to make Boks capable of adaptive layouts with media queries. We can get some ideas from Less framework and make CSS outputs in context of landscape, portrait and device widths.
Just some food for thought.
Best,
Gaurav
Well, the idea has always been, and still is, great!
But unfortunately I don’t have enough time in my hands… I have a project to re-write Boks from scratch in order to make it more stable and handle more CSS frameworks. But this is only a project and I have no idea when and if I’ll be able to develop it!
By the way, if anyone wants to do so I can help him/her/them!
I love Boks. I tell everyone I can about it! The only thing in my wishlist is I’d love to be able to activate/deactive via checkbox the left and right outer columns as well. Amazing, lite and ultra efficient GUI.
now blueprintcss is Latest version: 1.0.1
when press cntrl-z all css that was added in settings goes away.
Salut Quentin. Excellent travail en passant. I just wanted to point out that on my system, when selecting the “Markup type” dropdown, I always only get DIV type, and it is valid for other types. All other items seem there but are blank. V. 0.5.8 Merci.
Yup, this is a Flex bug! First make sur the selected element is a wide as its parent (details about this on the FAQ page). If so, save and re-open your file, this could fix that…
I hope this helps.
Any chance of packing the app so it runs on top of Air for Android? It would be great on the Galaxy Note Tab or my Transformer Prime… :-)
Hey César, I’m afraid not: it would -unfortunately- not be as easy as it sounds.
Sorry about that!
1 Trackbacks