Honu Studios LLC Blog

New Blog Uses HTML5, CSS3 and the BluePrint CSS framework

8 February 2010 by Bret

It seems like we’ve been doing a lot of blog designs the last couple of weeks. One might even dare to call it a theme or a trend. Pretty soon we’ll be in need of a jingle. Just so we don’t disappoint, we want to tell you about a new blog we just finished for ActiveWrap, Inc over at blog.activewrap.com.

The new ActiveWrap blog runs on WordPress and was coded with HTML5 and CSS3. We took the design of ActiveWrap.com which I did in 2007 and brought it up to date. The original site design used XHTML transitional while the blog uses HTML5 with many of the cool new tags like header, footer, article and aside.

The Problem

When I did the original design I set the width of the site at 900 pixels and created all the graphics to match. You would think I would have used the same structure and made it easy on myself…nope. Instead I decided I wanted to use the BluePrint CSS framework that we’ve been using for awhile. I like the BluePrint framework because it makes structure really easy, and it includes some nice typography and form styles.

The problem with switching to BluePrint was that by default BluePrint is set up at 950 pixels. Thankfully, they have a nice Ruby script that allows you to customize the width and size of the grid columns so that you can essentially make the site whatever width you want to. So after doing a little math I was able to setup BluePrint to do 24 columns, each 28 pixels wide and a 10 pixel gutter, that brought the site width to 902 pixels.

For the geeks or anyone who cares, the formula I used to figure out the perfect width was: (xy) + ((x-1)z) or where x = 24 for the number of columns, y = 28 for the width of each column, and z = 10 for the distance between each column all in pixels or simply (24 x 28) + (23 x 10) = 902

I didn’t know at first if I was going to be able to get away with being only two pixels short or not on the graphics. I should have known better. A couple pixels short might as well be a football field. So, I had to go back into the source files and extend them by 2 pixels, all that just to use BluePrint. But in the end I think it was worth it.

Finally, in addition to some rounded corners here and there, I decided to put a little drop shadow on the header and content area just to add some CSS3 interest for the kids.

Overall the design ported over pretty nicely from XHTML to HTML5 and from Joomla 1.0 to WordPress.

Brian Culbertson Pulls Back the Creative Curtain

3 February 2010 by Bret

One of my favorite musicians and Jazz artists is Brian Culbertson. Culbertson is primarily a piano player but also plays the trombone and bass. His latest album, Live From The Inside, has been a constant in my playlist since I bought it. The album was recorded live at the Capitol Records building in Hollywood with a host of amazing musicians.

I love music where I can listen over and over again and hear something new almost each time. Live From The Inside is that kind of album. It has has staying power and the melodies are super infectious. I often find myself humming them throughout my day.

A must have companion to the album is the Live From The Inside DVD. As a musician, I love it when I can go beyond just listening to the music. The Live DVD lets the viewer play the metaphorical fly on the wall inside the studio. It’s truly musical voyeurism at its best. I actually wanted to see the DVD so badly that I purchased the album twice, once on Amazon Downloads then again just for the DVD.

If you’ve never listened to Culbertson’s music, take a listen to Live From The Inside. If you’re a fan of great music, even if you’re not into Jazz, you won’t be disappointed. He is a musicians artist, and Live From The Inside lets you peak inside the process of rehearsal and recording unlike I’ve never seen before.

From Window to Sliding Door

Culbertson’s latest endeavor takes the window that he opened with Live From The Inside and makes it a sliding door right into his studio. He has started a YouTube channel where he is posting almost daily video blogs of his whole process from writing through recording his new album which is due out later this year. In the first couple videos Brian takes the viewer on a tour of his studio. He talks about his gear and instruments, a total musicians dream. He follows the tour up with a visual walk through of his songwriting process. So far I haven’t missed a video and I look forward to watching as the album comes together over the next several months.

Being that Honu Studios is a creative agency, we naturally love creative things. Since I spend most of my day working online, I love it when I find a creative use of a web app or service. The way that Brian Culbertson is using YouTube to bring his fans into his process and pull back the curtain on his music is just awesome. It will be really cool to listen to the final product and be able to remember the video where that song was just a melody line and in its infancy. The videos also make for a good entertaining break from daily work.

One final note, as a coffee lover I have to point out that there is one thing missing from Brian’s studio, a Keurig brewer. There is no better coffee maker than a Keurig.

HonuStudios.com gets an HTML5 and CSS3 makeover

29 January 2010 by Bret

After experimenting with actual HTML5 tags and not just the doctype on Johnny Knight’s website, we decided to give our main site and this blog a little HTML5 and CSS3 makeover. So we converted the navigation to nav tags and the header and footer to header and footer tags.

For us it’s not about jumping on the latest in geeky coding trends, although it’s fun to learn new stuff. It’s more about cleaner, leaner, and prettier code. When it comes to coding, it’s always the goal to be able to do more with less. Which is why we’ve wholeheartedly embraced CSS rounded corners and drop shadows. It’s always a pain to create the graphics for something that seems so easily done in the browser.

As part of the makeover we changed the menu around and on the CSS side of things we added a semi-transparent box behind the links and a white drop shadow to give the menu a bit of a glow. To do the semi-transparent box we used the CSS background-color property setting it to rgba(36,62,115,0.5) the ‘a’ is for alpha, or the opacity channel, here were setting it to 50% opaque.

To finish the makeover, we decided to top the whole sundae off with a little CSS3 animation cherry up in the header on our main site. To see the animated cloud goodness though, you’ll have to have Safari, Chrome or Webkit.