TOKI WOKI. 

Looks like this could be some­thing really cool once it matures a bit. I liked the live pre­view sys­tem. Though, it was a bit hard for me to under­stand what the out­put should be. But then again, I don’t usu­ally do html devel­op­ment these days, so not very famil­iar with the grid. :)

One sug­ges­tion though. I’d try to imple­ment an undo/redo in there. I found myself want­ing to remove some­thing I added and auto­mat­i­cally hit­ting Command+Z, but noth­ing happened.

You could have an API, so peo­ple could cre­ate plu­g­ins to export stuff in other css frame­works, like 960.gs or YUI Grids.

awe­some.

Great idea and awsome app. I’d sec­ond Jens’s idea of undo though to make it more useable.

This is great, I’m def­i­nitely going to use it next time I need to cre­ate a layout.

Nice!

Very nice! Is it pos­si­ble to use a cus­tom doc­type, or base tem­plate ? (Adding meta…)

Nice job anyway !

Two thumbs up.. way way up!!

Hi, great app. One issue I have, copy paste txt (in html win­dow) does not seem to work. I am using OS is 10.4 on mac, is this what is caus­ing the issue?

Many thanks.

You’re right, it works when using the ctrl+click menu. Just not when using the short­cut com­mand. The same issue occurs in the html text edi­tor, as well as all other text edit­ing fields.

Thanks

Amaz­ing app, very very use­ful, con­grat­u­la­tions.
I check all your screen­cast and I can­not resolve this problem…

I see in the “markup type” only “divs”… but in your screen­cast “fill­ing your lay­out” you show dif­fer­ent markup ele­ments like

Check this “screen“
http://skitch.com/maty/bm3di/only-divs

Thanks in advance…

Yes!
You was right, thanks a lot…

Hav­ing trou­ble adding style to a id selector.

html:

css:
div#topbox {background-color: “orange”; }

Can this code be added to screen.css? Or must it be an exter­nal “style.css”? I’ve tried both approaches sev­eral ways with­out suc­cess. It is prob­a­bly some­thing sim­ple I’m miss­ing. TIA

never mind…operator error ‘_’

Just dis­coverd your app, the more i m work­ing with it the more i love it. This could be my miss­ing link between grid­based design and good markup. Just wanted to let you know..have to go now and con­tinue with to play Boks;-)

When the app works out the way i hope it will, im gonna use it as a stan­dard in my work­flow. As soon as i ll have a project fin­ished, just started today to fid­dle around with it, i ll let you know. Thanks again for your work!

Great , awe­some, Beauty, now i don’t’ need a Dreamweaver. thx for mak­ing such a use­ful and beau­ti­ful appli­ca­tion. mak­ing a grid lay­out was never easy before this. you did a great job and peo­ple will love u.

Some advice

1. Add a dummy text (lorem ipsum) gen­er­a­tor
2. Add a dummy image place holder gen­er­a­tor
3. Add html com­ment like auto­mat­i­caly after every div clos­ing accord­ing to div id for exam­ple : where header div would be closed.

To under­stand my #2 see this http://tinyurl.com/c5vwch

for #3 see the source code of this url how he added com­ment as a indi­ca­tion of clos­ing div. it would be a good thing http://tinyurl.com/da994w

some more thing if you can

4. Add a PX to em con­verter like this http://tinyurl.com/7p3h75

5. See this for some more ideas to make BOKS more tim­saver http://tinyurl.com/dcdv44

6. Give us a option to include a code of Google hosted JavaScript libraries. http://tinyurl.com/aqxe6w

one ques­tion

Are you mak­ing this on more spe­cific Blue­print CSS frame­work or for all grid based framework?

uhmm.. it seems that the max­i­mum col­umn width is 100px. is that cor­rect? I would like to make a grid that has a total width of 750 pix, divided into 3 koloms of 250 px with 10px gut­ters. Could you point me a direc­tion as how i could work that out? Thanks!

please give us a jquery solu­tion of image base­line fix.

I already embarked on the 6 col­umn:-) Would be great if you man­age to push the lim­its even fur­ther, untill then i ll work my way around it and well …all­right then.. i ll open dreamweaver to adjust things;-)

wow you re fast!:-)

Thx for update and com­ments on clos­ing div.

Do we need to remove older ver­sion to install newer?

Amaz­ing app..

Here’s the jQuery ver­sion of the fix images…
Google code path (for script include) http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js

/* Quentin T - http://toki-woki.net - Originally coded for Boks (http://toki-woki.net/p/Boks/) */
function fixImageBaselines(selector) {
    $(document).ready(function() {
        var sbl = $(document.body).css('line-height');
        var bl = parseInt(sbl);
        if (sbl.indexOf('pt') != -1) bl = parseFloat(sbl) * (20 / 14.94); // IE!
        $(selector).each(function() {
            var $item = $(this);
            if ($item.height() % bl != 0) {
                var $d = $('<div />');
                $d.css({
                    'padding-bottom': (bl * (Math.ceil($item.height() / bl)) - $item.height()) + 'px',
                    'background': 'transparent url(' + $item.attr('src') + ') no-repeat 0 0',
                    'width': $item.width(),
                    'height': $item.height()
                });
                $item.replaceWith($d);
            }
        });
    });
}

The js in the post was cut of..
Here’s a link to the func­tion :
http://paste2.org/p/187118

Short on time today so will check it out tomor­row but on fore­hand: thanks for the update, Quentin! Great 300px col­umn width!

thx erik

Just like to say a very big thank you. It’s a great time saver.

Thank you for this tool. I love it!!! It’s a TIme Saver!!!

Respekt!

This is a non-disputed most use­ful appli­ca­tion for Blue­print CSS Frame­work users. I’ve already Done and request to all to give some small con­tri­bu­tion to respect and encour­age Quentin T and his knowl­edge and time.

Pls Donate here : http://toki-woki.net/donation.html

Thanks again Quentin T for such a won­der­ful application.

Just added in Blue­print CSS Wiki http://is.gd/uf5X

Great Job. Thank you so much.
I used this tool for 2 days so far. It is just what I need.
for improve­ment, I sug­gest:
1.Please con­sider RTL sup­port. There is an RTL plu­gin for blueprint.css.
2. Add func­tion to pre­view.
3 Output.html gets over­writ­ten every time I export a lay­out. I sug­gest adding func­tion to rename the HTML and the css folder.

Thank you for shar­ing this help­ful tool.

Can you recom­pile so that the appli­ca­tion doesn’t require unre­stricted access to my file sys­tems? On install, that warn­ing wigs me out.

i saw your tuto­r­ial that you post
there’re error on the 3 tuto­r­ial that I am not able to check
is it pos­si­ble that you can fix them?

thank you

D’abord bravo pour cette appli­ca­tion. beau travail !!!

Je suis en train de tester ça mais je bute sur un truc tout bête, à savoir une inser­tion d’image. J’ai bien noti­fié un dossier source image ainsi qu’une css per­son­nelle.
Et je tombe tou­jours sur un “?” dans dans un carré dans la pre­view.
Merci de me don­ner des pistes pour dépa­touiller de ça.

Dans mon exem­ple :
dans la seule div sur la grille.

Merci beau­coup pour ta disponi­bil­ité. Je viens de trou­ver mon erreur de débu­tant. Pour con­tribuer à la com­mu­nauté Boks, c’était la suiv­ante : il faut pré­ciser la taille de l’image (en ayant choisi le cas de déclarer son dossier images dans le settings).

Exem­ple :

<img src="css/images/logo.gif" width="100" height="100" />

Et là, on a bien son image dans la preview !

Bon, après plusieurs essais, je note que “live pre­view” est très aléa­toire. En tous cas “le open pre­view url” de cette fenêtre sem­ble fonc­tion­ner cor­recte­ment.
Peut être une mau­vaise instal­la­tion ou paramé­trage de ma part, c’est bien pos­si­ble. Est-ce que d’autres per­son­nes on ren­con­tré ce problème?

Hi Quentin, thx alot for the app, it’s amazing:)

I’ve been work­ing on a new lay­out for my online port­fo­lio, and it works really well, except for the the nav­i­ga­tion.
http://www.jacobbalslev.dk/projekt/index.html
The 2 links WORK and INFO below my logo changes posi­tion. It’s not a big deal, it’s like a cou­ple of pix­els, but I can’t fig­ure out how to fix it. Maybe you can help me out?:)

Thanks in advance Jacob Balslev

Thx alot Quentin:)

Hi, I saw your AIR app on refreshingapps.com, I real­ized a lit­tle log­ging library for flex/air devel­op­ers which allows to write, read, dis­play, fil­ter and backup log files.
You can get it here http://www.daveoncode.com/2009/05/11/air-application-logging-flex-extension

I hope you will find it some­how use­ful and you will try to inte­grate it in your work.
Any feed­back is welcome.

Thank you

Great work! One sim­ple issue though:
After export, I am look­ing to make fur­ther changes to the CSS. How­ever, what­ever pro­gramme I open the CSS files in, there are no line breaks. Is this intended? All the CSS code just runs con­tin­u­ous. Is there any­thing I’m doing wrong?

Apolo­gies, you’re right :)

Really love Boks. I’d ide­ally like to incor­po­rate this into Word­Press. But how easy is it to use the CSS from Boks over to Word­Press. Like your have for this blog I guess.

Thank you Quentin for your quick and help­ful reply. I’ll have to play and see how it looks.

Is there any rea­son you didn’t use it for your Blog though.

Thank you again Quentin.

Just one more ques­tion. Can you reopen your exported pages in Boks?

great app, I use it a lot.

one small thing though: copy and paste via the key­board doesn’t work. is this an Air issue, or some­thing wrong on your side?

Hi Quentin

I can’t copy/paste using short­cuts keys in the HTML code field — I have to use right-click/control-click.. I’m on Mac/OSX.

It would be nice to able to size HTML content/base divider upwards a bit too — a pane-resize abil­ity would be great.

Thanks again for a cool app.
Alan

Oh yeah: A CTRL-R to refresh the Live Pre­view would be my last request (of the day)!

Quentin,

Thanks for this great app. Blue­print CSS has recently been updated to ver­sion 0.9. Are you going to update Boks to this lat­est ver­sion of Blue­print CSS?

Thanks.

Thanks..

/k

Hey Quentin

Thanks — I just updated to 2.3 and so far, so great!

The lower pane resizes, the copy-and-paste via right-click on a mac works, and the short­cuts for refresh­ing all work too.

Thanks again — you just made my weekend!

All the best,
Alan

Just curi­ous why the gen­er­ated css doesn’t include the input and textarea spans that are in BP 0.9. Are they not spe­cific to the grid?

Hi,

very nice work, this is a good way for webdesign.

I have attach an exter­nal CSS for edit­ing my per­sonal styles after export but this CSS is always reset after a new export.

merci pour ta réponse,
“reset” n’est pas le bon terme, je refor­mule ma demande.

1 — J’attache une feuille de styles externe
2 — Je fais un export
3 — Je mod­i­fie ma feuille de styles externe
4 — Je mod­i­fie mon fichier Boks
5 — Je fais un nou­vel export
6 — Ma feuille de styles externe a perdu les mod­i­fi­ca­tions faites en étape 3

J’aimerai donc pou­voir garder une feuille de styles autonome avec tou­jours la même URL.

Merci et encore bravo.

Hi Quentin

Sorry: seems like I got my bug-list mixed up.

On a mac: in the html field Apple C,X,V still doesn’t work to copy/cut and paste.

The odd thing is that Apple Z, Y for undo/redo works, and Apple-S works to save, etc. Could it be because these com­mands are also detailed in the Edit (and other) menus, and the cut/copy/paste com­mands are not?

These com­mands all work via the right-click/control-click.

Has any­one man­aged to fig­ure out where on a Mac/OSX the ‘page-template.htm’ is stored? I’d like to edit that, but can’t find it.

This is also quite handy — http://davidwalsh.name/google-load — if you are look­ing at includ­ing libs by default..

Great­est app of the year from my P.O.V
RTL within it will be great.
I’m going to use it for my next lay­outs
thank you so much

Eden

I’m new to all this, but I love your Bok. Ques­tion: when I go to live pre­view, my para­graphs repeat through­out the length of the screen. How do I cut it off, so that I can see just what I for­mat­ted? I hope that makes sense. I’m still on the tit as far as geek squawk. ;)

Hi, thx for this great app, first !!! It’s really nice to could cre­ate blue­Print web tem­plates with Bocksin train on a EEEpc run­ning Ubuntu ;=)

So , i ve a ques­tion about addi­tion­als class : append and prepend, i don’t ander­stand how it works in Bocks. when i test this i’v a prepend class added auto­mat­i­caly on an ele­ment when there is an empty col­umn on left … but don’t add a append class when there is an empty col­umn on the right of the ele­ment. When i had it man­u­ally it break all the design when i do a pre­view.
– i’ve mess some­thing ?
– may it ‘ll be nice to have a spé­cific mar­gin color or a pre­view for this type of elements ..

Thx for your answer

Not sure how to explain it. Ok, let’s see…I enter 3–4 para­graph areas, with the dummy con­tent, but when I go to pre­view, I have mul­ti­ple para­graphs with the dummy con­tent. Maybe this isn’t a prob­lem. Maybe it’s some­thing that’s there the back end, but won’t be there on the front end??

Great pro­gram — thanks for putting this together.

I’m try­ing to use the jQuery plu­gin to adjust the images to keep the base­line con­sis­tent. It works great except for images that are floated left or right within a . For some rea­son the left, right info is being ignored. The base­line remains con­sis­tent but now all the images have their own paragraphs.

What should I do?

Man­aged to get it to work by only apply­ing it in cases where an image is not floated left or right.

My ques­tion now is about using the fix base­line on QT movies. I set up a div for the JS to fix, and it does, but unfor­tu­nately it wipes out the movie as well (just dis­ap­pears). Any ideas?

Well, it might be too late for me. I man­aged to fix the base­line QT prob­lem through some math oper­a­tors already present in my CMS (Expres­sio­nEngine). In other words, I turned off the jQuery fix for the QT images. The javascript works great though for cen­tered images — thanks!

Great app — for those of you look­ing for page-template.html — it is in applications/Boks.app (right click and select “pack­age con­tents” then contents/resources/data). Hope this helps :)

thanks kyle, nice one.

hello — really like boks as a poten­tial time­saver but like many i guess, am hav­ing prob­lems with floated images — have tried all the seem­ingly log­i­cal ways of point­ing to the fix base­line updates but to no avail in any browser — is there an idiots guide to doing this out there? — i’ve looked all over but can’t find one — help! — it’s putting me off an oth­er­wise excel­lent idea — thanks

Thanks Quentin for the nice App. Its the first time I really enjoy CSS lay­out! Blue­print alone is already excel­lent and Boks makes it even nicer. I didn’t expect that the Adobe Air UI would be so responsive.

I see your app is mostly build on OSS soft­ware; when are you going to open­source Boks ;-)

Is it pos­si­ble to run this appli­ca­tion online? If so, can you pro­vide the steps. Thanks

wow — I cracked a nod in the cred­its! nice one Quentin!

Great app! Just one issue: After the suc­cess­ful instal­la­tion on my Kubuntu sys­tem (64bits), when try to run the appli­ca­tion (via desk­top short­cut), it won’t.

It prompts the fol­low­ing error on the shell: $ /opt/Boks/bin/Boks
Error load­ing the run­time (libadobecertstore.so: can­not open shared object file: No such file or directory)

Maybe a Adobe AIR instal­la­tion issue on 64bits sys­tems so a workaround is cre­at­ing a syn­link through the fol­low­ing com­mand : sudo ln –s /usr/lib/libadobecertstore.so /usr/lib32/libadobecertstore.so .

And Boks will run fine.

Bon­jour,
Tout d’abord bravo pour cette excel­lente appli­ca­tion qui rend de nom­breux ser­vices pour une mise en page claire, sim­ple et effi­cace… Merci
comme il est souligner plus haut au sujet de l’utilisation de la con­struc­tion Css 960, est-il pos­si­ble dans un futur proche de pou­voir choisir parmi les deux types de con­struc­tion (blue­print ou 960) lorsque cela est pos­si­ble ?
Merci d’y penser.

Awe­some! Thank you for cre­at­ing this.

+1 for adding 960.gs option

You’re wel­come Toki Woki! Great app indeed. I voted too.

Hi!
Thanks fpr the great Tool!

I don’t know blue­print very well, but it’s pos­si­ble to have a font switch to choose other fonts like Helvetica/Arial?? It will be great.

Voted.

Your app is the only grid/css gen­er­a­tor I’ve used that made me feel like I was fully in con­trol of my grid. Thanks! Voted (2.8% at the moment).

Hola :)

I really like your idea and appli­ca­tion.
And I would like to con­tribute. You say it’s on google-code, but couldn’t find the source anyhwere.

1. Would like to add pro­files option to tar­get cms’s and make it pos­si­ble to add cms vari­ables (to put in con­tent in that sec­tion in example).

2– If you design that part mod­u­lar as eclipse, one can extend the mod­ule and all ben­e­fit from it. (more cms sup­port in example)

3. The abil­ity to change the grids tech­nique from yui/blueprint or 960.gs or custom.

I find the 1st point the most impor­tant to me. I couldn’t find a bug in your appli­ca­tion yet.
It would be very kind of you if you could make the source avail­able in google-code, I could fork it and push changes back to you and you decide if you like it or not.

Respects sir :)

I voted for BOKS!

Hi! Great job… I’ve given a lot of twit­ter love since I found Boks.

One feature-request would be to remove redun­dancy when using ids kind of like compress.rb’s seman­tic classes. (http://jdclayton.com/blueprints_compress_a_walkthrough.html, scroll down a bit)

This is an awe­some app. I’ve been using it to rebuild a web­page that is bloated with tables and inline CSS and have been mak­ing great progress. Good Job

Great prod­uct! Is is pos­si­ble to extend the export process to include sup­port for run­ning an XSL trans­form against the gen­er­ated XHTML code. It looks like there is sup­port for per­form­ing an XSL trans­form in Adobe Air. See link below.

http://blogs.adobe.com/briggs/2008/05/using_air_for_xslt_processing.html

If you could per­form an XSL trans­form, devel­op­ers could then per­form post pro­cess­ing on the gen­er­ated XHTML In our case, we could trans­form the fol­low­ing BOKS gen­er­ated state­ment into some­thing we could use with our CMS platform.

BOKS GENERATED STATEMENT

<div class="span-24 last" id="breadcrumb"></div>

ITTRIUM TRANSFORMED STATEMENT

<div class="span-24 last" id="breadcrumb"><ittrium:view name="BREADCRUMB"/></div>

I know I can man­u­ally insert our code in the HTML con­tent win­dow, but when the code is more com­plex, it is easy to code errors. We could elim­i­nate many errors by run­ning a trans­form against the BOKS gen­er­ated code.

With this solu­tion, devel­op­ers could eas­ily extend the BOKS sup­port for their own needs.

Thanks for your con­sid­er­a­tion. If there is source code that we can mod­ify our­selves, we would gladly imple­ment and shared our solution.

Would some one make the first video of a site being com­pleted with BOKS? Lets build a library of tuto­ri­als which I believe would fur­ther expand the pop­u­lar­ity of this sys­tem hence more plugins.

Hi, i tried to install boks on my pc and but my nor­ton AV (nor­ton Inter­net Secu­rity 2010) block and remove it auto­mat­icly. Nor­ton iden­ti­fies boks.exe as “A pro­gram was behav­ing sus­pi­ciously on my computer”

Any idea?

Hi Quentin,
Thanks for your response
I’m hav­ing the same prob­lem with your WebKut app but no prob­lem with Kuler adobe app.
Here’s screen­shot of my desk­top : http://img27.imageshack.us/img27/5299/bokks.png

Great app! Nice work.

It would be great if the export process didn’t blow away all the files in the css direc­tory. That way you could keep all of your cus­tom css files in there as well.

Yes, I’m using the Merge CSS files within screen.css and it works fine, except if I store my cus­tom css in the css direc­tory cre­ated dur­ing the export process, it gets deleted when I export again and is not included in the screen.css file. It works fine as long as I put my cus­tom css files in a dif­fer­ent direc­tory. It’s not really a big deal, but boks uses the same direc­tory struc­ture that I have used in the past (applicationRoot/css/) and I didn’t make allowance for that.

This app rocks, Kudos Quentin :)
Just one com­ment: i noticed that the out­put is not lat­est Blue­print ver­sion 0.9.1,.or at least the IE con­di­tional con­di­tion in the out­putted HTML page does not reflect it. May i ask on which BP ver­sion is BOK based?
Thanks!

Could you make Open/Save but­tons for the lay­out? Right now, you can only save project when clos­ing the app.

Yep, sorry, saw it later (I’m on a Mac, and since I did’t see the app name in the menu, I thought it wasn’t this app’s menu… Silly me)

This app is a com­plete breath of fresh air! Thanks so much for shar­ing it with us.

Thanks for this good and use­full works.
Do you think it’s pos­si­ble to inte­grate sass syn­tax stylesheets sup­port in Boks? Sass a great way to write css (see http://sass-lang.com) and it would be a per­fect complement.

Sure, it’s a big job to inte­grate Com­pass, but there is a short­cut : Boks can accept addi­tional sass files to be con­fig­ured (+sass), and con­vert them in css style with the sass com­mand “sass style.sas style.css” before mer­gin and before a live preview.

Ok, nice to you.

After over 10 years of web devel­op­ment I can tell you that this is the most impres­sive lit­tle tool I’ve seen. I hardly ever used any visual edi­tors. Most of the tools I used were self devel­oped. I stopped work­ing on web pages about 3 years ago, prob­a­bly because I didn’t have a tool like that. :) Con­grats! Keep up the great work. I can’t wait to see what this evolves to.

Does Bok only sup­port Blue­Print or does it also sup­port 960gs ?

hi Quentin. just a quick ques­tion here. what ver­sion of blue­print u cur­rently use?
i found the tem­plate files u men­tion ear­lier, and i com­pare it side-by-side with BP 0.9 and it has some differences.

btw, on a Mac the tem­plate files is inside the app itself. just right-click, choose “Show Pack­age Con­tents”, and it’s under “Con­tents > Resources > data”.

I have one prob­lem: yes­ter­day i saved a project (my first) to .bok file. Today i can’t open it. Any thoughts?

Hi Quentin
Tell me where to send it please, you have my e-mail address. Thanks!

oic.. thx for the quick response :)
btw, if i want to update it myself. is it safe to replace the tem­plate files with the lat­est ver­sion of Blueprint?

thx

nice :) will try it. i’ll get back to u if i have any prob­lem :P

thx!

first: very nice soft­ware!
in a saved .bok file i can’t lower the amount of columns under grid>grid settings

Yes, indeed! that is the thing. it would be a nice addi­tion to indi­cate that in the appli­ca­tion, either visual, either by a message.

I like Boks and I use it.

Is there a way to use boks with css sprite (http://www.ajaxbestiary.com/Labs/SilkSprite/)?
I didn’t suceed to do it. Where must I put the sprites.png and sprite.css?

Fine, I found it : I only need to change the path of sprites.png in sprite.css. Bock is even greater now!

Hi Quentin,
Is it pos­si­ble for a boks “gut­ter­less blue­print ver­sion”.
gaurav

http://github.com/baldwindavid/gutterless_blueprint_css

great! thanks for the new release. keep it coming!

Hi Quentin,
thank you very much for your acknowl­edg­ment and time.
this upgrade did it !!!
Best,
gaurav

Hi Quentin,
Some feed­back on the new update : Looks like the max­i­mum columns you can have is restricted to “50”. Is there a way to make this flexible?.

I am link­ing a screen-shot which shows where the col­umn num­bers are locked.
Max con­taine size is 500px and max span lim­its to 50.

http://www.richbyte.com/srceen.jpg

big thanks,
gaurav

I under­stand your approach to set up the lim­its to the numeric steppers.

This is what I see at the gutter-less blue­print grid file as the last span-x value.
“.span-150, div.span-150 {width:1500px;margin:0;}”.

I think this might be a fea­si­ble limit for aver­age web lay­outs width which are recently rang­ing to 960 to 1000px widths.

What do you think?

best,
gaurav

Hi Quentin,
Thanks for the update. This has made Boks more ver­sa­tile.
Best,
gaurav

Gotta tell you — Boks and your excel­lent video tuto­ri­als have been the most help­ful of all the hun­dreds of web pages/sites I’ve vis­ited in order to learn about frame­works. I’m not the smartest CSS kid on the block and using your Boks util­ity I’ve not only gained some prac­ti­cal under­stand­ing of how frame­works work, but I’m well on the way to doing stuff that a week ago seemed impos­si­ble to me.

Boks is great and the time and energy you’ve put into Boks and your tuto­r­ial vids is hugely appreciated!!!

I’m def­i­nitely a fan :)

I’ve yet to under­stand why so many web design­ers are so neg­a­tive about css frame­works. Maybe they feel threat­ened by the fact that now we can break free of three-columnitis :)

Hey, the ulti­mate ver­sion have a prob­lem on my iMac run­ning snow leop­ard, when i run set­tings i can’t see noth­ing any­more.
See here: http://skitch.com/rubenrojas/nmypu/boks-settings

I can’t find the words to thank you. I have been look­ing for soooo long for a pro­gram that would do what yours do. I feel in heaven!

Hi, I’m hav­ing the same prob­lem with Nor­ton detect­ing, block­ing and remov­ing the Boks exe­cutable from my PC. The only infor­ma­tion Nor­ton offers is that is behaves sus­pi­ciously (it doesn’t say exactly how) and then removes the boks.exe file auto­mat­i­cally. I can pro­vide the infor­ma­tion Nor­ton gives me, but I doubt it will be of any use.

Hi, boks is awe­some, thanks for share it! i use it in all my new projects!!
quies­tion: do you intend to make a ver­sion for eslas­tic tem­plates?
I have imple­mented blue­print to work with per­cent­ages rather than fixed width, so I think it shouldn’t be so com­pli­cated boks not deploy it? what do you think about it ?

best regards!

Is boks fully portable? I’d like to run it off of a usb key.

Hi, i want to try your soft­ware, but can’t install it in air. It’s say “Sorry, some error occurred. Error# 2004″.
Do you have any sug­ges­tion about this air prob­lem?
Thank you.

Just found this sweet soft­ware, and must say i am impressed. looks very solid. are you still work­ing on this ?
if so, i’d like to ask for a lit­tle enhance­ment: could you please check if it would be pos­si­ble to choose between:
a) use Google CDN or offline
b) than choose some dif­fer­ent ver­sions of js-libs (if we’re on CDN)
c) add jquery-ui lib

a) if the user decides to use local ones, why not just let him point to some (and copy them automag­i­cally into the project … )
>b) i was just think­ing about http://code.google.com/intl/de/apis/ajaxlibs/ those, either com­pressed or uncom­pressed (? or will com­pressed be good enough ? i guess so — KISS!)
>c) yes, point c is use­less to some degree.

but let me add some other points:

d) add html5 doc­type
e) would be nice to save some pref­er­ences as ‘projects’ although one can man­age that already … it’s just not that “visible”.

Yeah, if you could imple­ment google.load() with some options it would be per­fect, just to give a choice. Keep work­ing on it, it’s a great tool! (wait­ing for HTML5 + CSS3 implementations)

[brag­ging]
I just redesigned my site (port­fo­lio and blog, dif­fer­ent plat­forms) using Boks. It reduced my build­ing time with more than two weeks. Great job!
[/bragging]

I just used Boks (and Blue­printcss) for the first time yes­ter­day. Wow! What a pow­er­ful combo. You just brought the joy back into web design. Thank you!

Thanks for pro­duc­ing this fine soft­ware!
It would be nice to load an image as a back­drop. I could sketch a lay­out and then use boks to cre­ate it.

Hi, first of all, great appli­ca­tion! I have a ques­tion for you. If you gen­er­ate for instance a grid with 16 Columns, 40px for the width and 20px for the gutt­ter, you will get a 960px lay­out. Can you tell me why does the grid.pdf have gut­ters of 21px and columns of 39px? This error is caused by a 1px on each side of gut­ter columns. Why are you adding these bor­ders to the gut­ter columns in the pdf? Thanks for your help on this.

Wooohooo! Nice, you’ve put the Google AJAX CDN, thanks!

Hi! That’s great! Check­ing that out right now. By the way, a cou­ple of days ago I thought ask­ing you to con­sider includ­ing the pos­si­bil­ity of adding empty lines to the lay­out to work has empty space between divs. I thought that it was too much to ask but since you have added the pos­si­bil­ity to insert an empty row in the top, why not allow to insert empty rows any­where directly from Boks?

Thanks for updat­ing! I’ve used boks sev­eral times now and it lets me make great lay­outs fast!. Fantastic.

Wow! a lot of great improve­ments since I last checked out Boks (v.1.6a). Just play­ing around with the lat­est ver­sion (v.0.5.1) some­thing that occurred to me might be a use­ful addi­tion on the Grid Set­tings dia­log > Grid tab is a reset to default Blue­print CSS button/option.

I found myself play­ing around with var­i­ous grid set­tings and then wanted to reset to the default Blue­print CSS dimen­sions but couldn’t imme­di­ately remem­ber what they were.

Just a thought.

Another idea — which I realise takes it slightly out­with the Blue­print CSS realm and closer to 960gs would be an option to define an outer mar­gin, i.e. left and right of .con­tainer, and set its width. That would cer­tainly make this a much more flex­i­ble tool for those folks who like the 960 grid but are more famil­iar with the Blue­print CSS framework.

Hey, thanks for the update!

Is there any way to get base­lines on the Grid.pdf?

What about a check­box to make the grid liq­uid based rather then fixed?

Hi there,

Just wanted to say thank you for spend­ing your energy writ­ing this appli­ca­tion, I am not a designer but toy­ing with it and it has helped me greatly. Very nice work.

Thank you and all the best

I’m rebuild­ing my web­site and have used boks to do it. Mind if I give you credit?

Thank you, it’s a very handy tools

I’ve just down­loaded Bok and watched your videos.
I would just like to add my thanks for mak­ing this excel­lent tool available.

I work on Mac OSX 10.5.8
I’m try­ing to paste text into the HTML Text box but it doesn’t accept paste. Not sure if it should accept paste but it would be nice if it did.

I’m writ­ing an arti­cle about Boks and thought you’d like to know! I love the app and wanted to help you out with some exposure.

I’d love to see some extra options for strip­ping out any of the Bluprint CSS that you don’t want. In fact, an addi­tional option for using the 1KB grid would be awe­some (http://www.1kbgrid.com/).

Thanks for mak­ing such a great fee tool, keep an eye out tomor­row for the arti­cle.
Josh John­son
http://www.designshack.co.uk

hi, how would i inte­grate / spec­ify a 100% pagewide div?
thx

Would you con­sider doing some­thing like this for boks — http://www.danclien.com/psd-grid-layout-generator/

A Pho­to­shop PSD lay­out gen­er­a­tor? This one only con­forms to 960gs. It is unfor­tu­nately incon­sis­tent with Blue­print and doesn’t offer as many options as it could. I believe once we have this, we can take over the world.

Any luck adding base­lines to the gen­er­ated PDF?

In that case, I just exported a PDF and it’s width is smaller than the width should be.

Thank you for the great app!

Hi,

I have just updated to ver­sion 0.5.6 of boks, its a great app thanks for that, how­ever there seems to be a prob­lem with it.

If you open up the grid set­tings dia­log to make adjust­ments and then save those adjust­ments it works fine but, if you try to open the grid set­tings dia­log again to make say fur­ther adjust­ments you are pre­sented with a blank dia­log box.

It seems that you can only open the grid set­tings dia­log once per ses­sion, is this by design or a bug

You’re wel­come

As I said it is a great app

I’m expe­ri­enc­ing the blank set­tings after mak­ing changes too. I’m able to get it back by clos­ing the project & reopen­ing it.

Also, a sug­ges­tion:
Include an option for starting/ending the lay­out with a gutter.

Prob­a­bly only need­ing the start­ing gut­ter as the end is vir­tu­ally irrel­e­vant. Our grid over­lays start with a gutter.

Love the project & will be immensely help­ful get­ting off the ground quickly with Blueprint!

Thanks for the quick update!

Do you think the start with a gut­ter option is feasible?

Ok, I’m expe­ri­enc­ing some­thing else & I’m not sure if this was part of the bug­fix for the blank win­dows … but …

I can’t close the set­tings or pre­view! Sure they dis­ap­pear, but they are still listed in the task bar. I don’t recall hav­ing 3 win­dows open yes­ter­day when I had the app open.

Ahh no prob­lems. I fig­ured it was part of the fix. Hope you can get that sorted out.

As for the gut­ter. A gut­ter before the first col­umn to the left is more impor­tant. Yes adding it to the CSS of the con­tainer would work, but I’m just say­ing make it part of Boks because I’m not the only per­son that would want that.

Our total width is 1152 w/16 columns, 54px wide per col­umn, 18px gut­ters. In Boks, I can only get to 1134 with 54+18. 1134 + 18 = 1152.

Think­ing about it, hav­ing a gut­ter to the right is irrel­e­vant because the con­tent ends where it ends, but hav­ing one to the left where the start of the design begins would be nice within Boks.

@Quentin

Glad I could help

Hello

Thanks for Boks.

Ver­sion: Boks 0.5.7

Just won­der­ing what hap­pened to css com­ments in the lat­est ver­sions. I could be wrong but I’m sure that in ear­lier ver­sions there were com­ments in the CSS that reflected the orig­i­nal Blue­Print CSS.

Also, could you tell me what ver­sion of Blue­print Bok s0.5.7 is using?

Regards

Thanks Quentin

Really appre­ci­ate the fast response.

I saw above the you used min­i­mize to hid a bug, but I’ve found that it min­i­mizes the sys­tem set­tings when I press ok and I can’t draw any boxes on the main win­dow either, pre­sum­ably because the sys­tem set­tings win­dow is still open. Do you have a fix for this?

@Quentin, I’m sure you’ve seen Grid­Fox, which will dis­play an opaque grid over­lay on your page. They imple­mented what is called “hor­i­zon­tal off­set” which is essen­tially what I’m look­ing to see if you could imple­ment. The off­set allows a gut­ter to start on the left hand side instead of a col­umn. I hope that makes more sense when you see that.

It looks like I got it work­ing. Looks like it was just UI qurk­i­ness. I expected to be able to cre­ate a box when I click and drag on the whte area. Sug­ges­tion for future ver­sions. In the min Boks win­dow expand the columns over­lay to the fully extend to the bot­tom of the win­dow, and allow you to click any­where to cre­ate boxes, but have it still snap to right below or next to the pre­vi­ous block. You know what I mean?

Hav­ing some prob­lems with 5.6 and 5.7. Both ver­sions open the grid set­tings dia­log auto­mat­i­cally and 5.7 opens the pre­view dia­log auto­mat­i­cally. When I try to close them, they are min­i­mized, but do not close. I’ve rolled back to 5.1 for now.

Has any­one else expe­ri­enced this problem?

I really love boks and now that I see it’s updated I love it even more. What I’d love to see, but I’m not sure how hard that would be is Com­pass integeration.

It would be great because com­pass can work with Blue­print but out­put more seman­tic CSS with­out the need for the spe­cial blue­print classes. If that could be inte­grated some­how you’d have a killer app.

There is a bug when I start a project and want to change set­tings. The win­dow of set­tings is empty.

Yes, Boks 0.5.6.
Mac OS X 10.6.4.

Set­tings empty.

Merci ! ;-)

I was try­ing to install it in cen­tos 5. I just clicked install in the home page. But it says down­load error. I have installed flash plu­gin. I also tried down­load­ing the source code and install it using Adobe installer. But noth­ing happens.

Is it pos­si­ble to update the ver­sion of Blue­print shipped with Boks (by over­writ­ing the CSS files with those from a newer ver­sion) or have you mod­i­fied Blue­print in any way that would pre­vent doing this?

FYI — via email from http://www.dmxzone.com/ DMX have devel­oped a free 960 Grid Sys­tem Dreamweaver Exten­sion. I have not yet tried the extension.

Per­haps a Dreamweaver exten­sion is a pos­si­bil­ity for Boks?

Read­ing an ear­lier com­ment, I think Boks-0.5.7 uses Blueprint-0.9.1. I did a “diff” against Blueprint-1.0 and there are dif­fer­ences. I believe the lat­est Blue­print was released 29/09/2010.

Hello, after ver­sion 0.5.6 I can­not select another markup type for some ele­ments because of blank list. Please check this bug.

In 0.5.8 ver­sion you have <a> tags with color
set­tings. It would be great if Boks had an option to change this
default color.

Hi Quentin
I would like to take this oppor­tu­nity to wish you (and your com­menters) a Merry Christ­mas and a Happy New Year

I’m hav­ing trou­ble installing Boks on ubuntu 10.04, the install but­ton gives an error at the AIR install stage. I’ve installed adobeair from a repos­i­tory. Can I down­load Boks by itself?

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 soft­ware updates its stopped work­ing for me — live view doesn’t dis­play any­thing. Open URL doesn’t work or adding dummy text. Help! Am I miss­ing some­thing simple?

Thanks — that seems to work. One thing — I am unable to close the Live pre­view or set­ting win­dows. They are always open now. Not a prob­lem just dif­fer­ent from before. I’m run­ning Vista :(.

Love it. I think it really has poten­tial to vastly improve my workflow.

Would be nice if it allowed import­ing of arbi­trary html in addi­tion to css, but i under­stand this may be con­sid­er­ably harder to implement.

Keep up the excel­lent work!

Found a small but impor­tant export “bug”: When you export the CSS, you have REMOVED the fol­low­ing definition:

.last{margin-right:0;}

…that MUST come AFTER the .column,.span-1, etc def­i­n­i­tion block because it adds a right-margin to all of those classes.

Please DISREGARD last comment…I think my CSS Edi­tor removed it as redundant.

Boks is a great tool, no doubt about that. I would really like to be able to set left mar­gins as well as right mar­gins. I realise Boks was writ­ten to work with Blue­print and not 960gs or the 1kb grid. Please con­sider incor­po­rat­ing alter­nate css frame­works, or at least, offer­ing left/right mar­gin options. This air app really is worth fur­ther devel­op­ment. Every­one who has com­mented here has agreed with that.

OMG, with a nice php frame­work i built a site in hours. Thanks for the awe­some­ness. Keep good work.

I like to use 0 gut­ter width. Is there a way to color code the blocks to dis­tin­guish the columns? It all goes to one solid color when you don’t have a gut­ter width.

thanks, that’ll work :)

I’d like to see Boks mod­i­fied so that the entire direc­tory is not deleted before an export. By delet­ing every­thing in the direc­tory, I’m pre­vented from putting the out­put directly under source con­trol because things like .svn direc­to­ries get deleted. That causes all sorts of trou­ble with sub­ver­sion. It would be great if Boks just over­wrote the files it needs to change.

i cant install it in my linux, i instaled the adobe air, and indi­cate error on install tha program…i use ubuntu 11.04, i alredy installed the adobe air, and now? what i can do?

Hi Quentin ,
I was won­der­ing if time has come to make Boks capa­ble of adap­tive lay­outs with media queries. We can get some ideas from Less frame­work and make CSS out­puts in con­text of land­scape, por­trait and device widths.
Just some food for thought.
Best,
Gaurav

I love Boks. I tell every­one I can about it! The only thing in my wish­list is I’d love to be able to activate/deactive via check­box the left and right outer columns as well. Amaz­ing, lite and ultra effi­cient GUI.

now blue­printcss is Lat­est ver­sion: 1.0.1

when press cntrl-z all css that was added in set­tings goes away.

Salut Quentin. Excel­lent tra­vail en pas­sant. I just wanted to point out that on my sys­tem, when select­ing the “Markup type” drop­down, 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.

Any chance of pack­ing the app so it runs on top of Air for Android? It would be great on the Galaxy Note Tab or my Trans­former Prime… :-)