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.
Quick update for Hugo and those annoyed by the strokes in grid.pdf!
Check 0.5.1 on the project page.
Hi! That’s great! Checking that out right now. By the way, a couple of days ago I thought asking you to consider including the possibility of adding empty lines to the layout to work has empty space between divs. I thought that it was too much to ask but since you have added the possibility to insert an empty row in the top, why not allow to insert empty rows anywhere directly from Boks?
The simplest way to do this is to add an HR box with a “space” class!
Thanks for updating! I’ve used boks several times now and it lets me make great layouts fast!. Fantastic.
Wow! a lot of great improvements since I last checked out Boks (v.1.6a). Just playing around with the latest version (v.0.5.1) something that occurred to me might be a useful addition on the Grid Settings dialog > Grid tab is a reset to default Blueprint CSS button/option.
I found myself playing around with various grid settings and then wanted to reset to the default Blueprint CSS dimensions but couldn’t immediately remember what they were.
Just a thought.
Another idea — which I realise takes it slightly outwith the Blueprint CSS realm and closer to 960gs would be an option to define an outer margin, i.e. left and right of .container, and set its width. That would certainly make this a much more flexible tool for those folks who like the 960 grid but are more familiar with the Blueprint CSS framework.
Hey, thanks for the update!
Is there any way to get baselines on the Grid.pdf?
I’ll try to add that in the next drop!
What about a checkbox to make the grid liquid based rather then fixed?
Hi there,
Just wanted to say thank you for spending your energy writing this application, I am not a designer but toying with it and it has helped me greatly. Very nice work.
Thank you and all the best
I’m rebuilding my website and have used boks to do it. Mind if I give you credit?
Sure do so!
And drop the link here! Thanks.
Thank you, it’s a very handy tools
I’ve just downloaded Bok and watched your videos.
I would just like to add my thanks for making this excellent tool available.
I work on Mac OSX 10.5.8
I’m trying 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 think I’ve heard about this bug before… Does right-clicking > Paste work better?
I’m writing an article 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 stripping out any of the Bluprint CSS that you don’t want. In fact, an additional option for using the 1KB grid would be awesome (http://www.1kbgrid.com/).
Thanks for making such a great fee tool, keep an eye out tomorrow for the article.
Josh Johnson
http://www.designshack.co.uk
hi, how would i integrate / specify a 100% pagewide div?
thx
Neither Blueprint nor Boks are design for fluid layout, at least not in the official versions; so you won’t be able to do that, sorry!
Would you consider doing something like this for boks – http://www.danclien.com/psd-grid-layout-generator/
A Photoshop PSD layout generator? This one only conforms to 960gs. It is unfortunately inconsistent with Blueprint and doesn’t offer as many options as it could. I believe once we have this, we can take over the world.
Boks can generate a PDF for you (see export options), just open it in Photoshop or in Illustrator and enjoy your grid!
Any luck adding baselines to the generated PDF?
In that case, I just exported a PDF and it’s width is smaller than the width should be.
@Eimhin Yeah, I should implement that… Probably in the next update!
@estevan Where did you import/open it?
Thank you for the great app!
Hi,
I have just updated to version 0.5.6 of boks, its a great app thanks for that, however there seems to be a problem with it.
If you open up the grid settings dialog to make adjustments and then save those adjustments it works fine but, if you try to open the grid settings dialog again to make say further adjustments you are presented with a blank dialog box.
It seems that you can only open the grid settings dialog once per session, is this by design or a bug
This is indeed a bug, I came across something weird like that, too; but couldn’t reproduce it…
I’ll fix this as soon as possible, thanks for posting it.
You’re welcome
As I said it is a great app
I’m experiencing the blank settings after making changes too. I’m able to get it back by closing the project & reopening it.
Also, a suggestion:
Include an option for starting/ending the layout with a gutter.
Probably only needing the starting gutter as the end is virtually irrelevant. Our grid overlays start with a gutter.
Love the project & will be immensely helpful getting off the ground quickly with Blueprint!
I’ve just uploaded a new version of Boks (0.5.7) which should fix this (big) issue. Kudos to Jon who helped me track this stuff down.
Boks 0.5.6 will probably prompt you with a blank update window in which you won’t be able to do anything (yes, that’s wack). So make sure you go to the download page and get the fresh update there…
Sorry for the inconvenience, folks!
Thanks for the quick update!
Do you think the start with a gutter option is feasible?
Huh, I forgot about that!
But I realize I didn’t really understand… If you want an empty gutter on the left and right of your layout, why not add a custom CSS adding a left and right margin to the “.container” selector? Thoughts?
Ok, I’m experiencing something else & I’m not sure if this was part of the bugfix for the blank windows . . . but . . .
I can’t close the settings or preview! Sure they disappear, but they are still listed in the task bar. I don’t recall having 3 windows open yesterday when I had the app open.
You’re right, the “blank bug” happened when closing the windows; so I decided to minimize them instead of closing them. I know it can be annoying but it’s the best I can do right now…
No other fix worked, sorry!
Ahh no problems. I figured it was part of the fix. Hope you can get that sorted out.
As for the gutter. A gutter before the first column to the left is more important. Yes adding it to the CSS of the container would work, but I’m just saying make it part of Boks because I’m not the only person that would want that.
Our total width is 1152 w/16 columns, 54px wide per column, 18px gutters. In Boks, I can only get to 1134 with 54+18. 1134 + 18 = 1152.
Thinking about it, having a gutter to the right is irrelevant because the content ends where it ends, but having 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.
Version: Boks 0.5.7
Just wondering what happened to css comments in the latest versions. I could be wrong but I’m sure that in earlier versions there were comments in the CSS that reflected the original BluePrint CSS.
Also, could you tell me what version of Blueprint Bok s0.5.7 is using?
Regards
Hey Tony,
be sure to uncheck “Compress CSS” in the “Export” tab to preserve comments in CSS files.
Boks uses Blueprint 0.9.1 since 0.3.3, and apparently it’s still the latest version around.
I hope this helps!
Thanks Quentin
Really appreciate the fast response.
I saw above the you used minimize to hid a bug, but I’ve found that it minimizes the system settings when I press ok and I can’t draw any boxes on the main window either, presumably because the system settings window is still open. Do you have a fix for this?
What you describe is not normal, you should be able to edit your layout, even if the Settings window is not closed (minimized). What happens when you try to do so? Could you send me a screenshot?
Thanks for reporting this.
@Quentin, I’m sure you’ve seen GridFox, which will display an opaque grid overlay on your page. They implemented what is called “horizontal offset” which is essentially what I’m looking to see if you could implement. The offset allows a gutter to start on the left hand side instead of a column. I hope that makes more sense when you see that.
It looks like I got it working. Looks like it was just UI qurkiness. I expected to be able to create a box when I click and drag on the whte area. Suggestion for future versions. In the min Boks window expand the columns overlay to the fully extend to the bottom of the window, and allow you to click anywhere to create boxes, but have it still snap to right below or next to the previous block. You know what I mean?
Having some problems with 5.6 and 5.7. Both versions open the grid settings dialog automatically and 5.7 opens the preview dialog automatically. When I try to close them, they are minimized, but do not close. I’ve rolled back to 5.1 for now.
Has anyone else experienced this problem?
@Iam: I see what you mean but I’m afraid I won’t change that. (Warning tech content ahead) Boks was written for Flex 3 which is now an old framework and big changes might do more harm than good. The “blank window” issue is a good (well, bad, in fact) example, sadly.
@Craig: Yes, this is normal. See previous comments (and my e-mail)!
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 Compass integeration.
It would be great because compass can work with Blueprint but output more semantic CSS without the need for the special blueprint classes. If that could be integrated somehow you’d have a killer app.
There is a bug when I start a project and want to change settings. The window of settings is empty.
Are you sure you’re using the latest version (check from the project page)? This issue has been reported and should be fixed, tell me if that’s OK.
Yes, Boks 0.5.6.
Mac OS X 10.6.4.
Settings empty.
My fault: I recently updated the site and didn’t upload the latest project page version. Should be fixed now, 0.5.7 is what you need!
Merci ! ;-)