Jesse Breuer’s invitation is awaiting your response

Bookmark and Share

Jesse Breuer’s invitation is awaiting your response

Bookmark and Share
Bookmark and Share
#39

Making forms responsive in twitter bootstrap.

So I’m building a form on a site using twitter bootstrap.

I see in the documentation http://twitter.github.com/bootstrap/base-css.html#forms

that forms can either be vertical by default, or horizontal by adding .form-horizontal class to the form tag.

But what I really want is a form that is horizontal at a large screen width and becomes vertical for mobile. Bootstrap doesn’t seem to support this out of the box.

My solution: Make the form horizontal, and use jquery to listen to screen width and remove the form-horizontal class below a certain width. Works like a charm. Here you go:

$(function () {
    $(window).bind(“resize”, formFixer);
});

    function formFixer( e ) {

    if($(window).width()<=480){
        $(‘form’).removeClass(‘form-horizontal’);
    }
    else{
        $(‘form’).addClass(‘form-horizontal’);
    }
}

Bookmark and Share

Portfolio

http://www.consumercredit.com/
Corporate website for American Consumer Credit Counseling. I designed this back in 2008. Currently working to move to cmsms replacing all old school javascript with unobtrusive JQuery.

http://www.consumercredit.org/
Site to highlight ACCC’s new Housing and Bankruptcy counseling departments. I built this in 2010. Will eventually become part of the cms managed consumercredit.com

http://www.talkingcentsblog.com/
A wordpress blog I set up for ACCC’s social media group, using the thesis theme with some minor customizations, added widgets, etc.

http://www.myfinancialpeaceofmind.com/
I designed the look and feel of this ASP.NET app. It is an online course on personal finance. Registration is free. please look around. I used the JQuery accordion widget for the course section. We customized the accordion with .NET to allow users to be able to go back to sections they’ve seen before but not skip ahead.

The layercake project
A php program to automate the math in css layout. A more flexible alternative to css grid systems.

Bookmark and Share

Graphics Software: Open Source or Cloud?

I have been in the process of trying to ween myself off of using Adobe products. I find them to be overpriced and full of features I never use. For my purposes as a web designer, their best graphics editor is actually Fireworks, although they seem to treat like a step child (which it is, acquired from Macromedia). So it is frustrating to see it not be updated with new features as much as photoshop and illustrator. Also I feel like it is cursed by being part of a suite. For example the html/css output could be much better, but then you might not buy dreamweaver.

So I got into Gimp which seems to be similar in many ways to photoshop. It’s biggest omission seems to be the lack of “smart objects” or ways to non-destructively edit. For example in photshop and fireworks, I can scale down a copy of a layer and scale it back up without losing the quality of the original. Gimp lacks that but it’s the only major issue I’ve found so far. I was also planning to check out inkscape as an alternative to illustrator. It is also free like Gimp.

A few weeks into experimenting with the above open source options, I stumbled upon a cloud solution: Aviary.com I love this concept. A suite of graphics programs including a raster image editor (pheonix) a vector image program (raven) etc. Also you can launch it from your browser which is convenient when you are working on your own website and need to create a graphic to fit into the page you are looking at.

In Aviary, you do everything online, and even save your projects online. I love the concept, because it means that I could work anywhere, anytime with an internet connection, not needing to have anything installed on the computer Im using.

After working through tutorials in Aviary’s pheonix program for a couple of weeks, I am agonized by missing features. In particular the lack of keyboard shortcuts for many tool settings. For example when using a brush or eraser in other programs, you can adjust the size using the keyboard leaving the brush on the canvas. In Aviary, I need to leave the canvas and adjust the size with my mouse. There are countless other examples where keyboard shortcuts are a part of my workflow. 

Another issue I am having with the “cloudness” is that it sometimes seems to get really clunky. I find my mouse sort of freezes up, and the only solution is to save, close and reopen. I basically found eveything taking much longer to do in pheonix than in any graphics program installed on my machine.

I love the cloud concept, but for now only as a concept. I feel like I have invested enough time in trying to love aviary warts and all, I will be moving back to Gimp. I will check up on Aviary in a year or so and see if it has grown into more of a true rival for a desktop application.

This brings me to a question. Can a small company really make a good graphics program on it’s own? Gimp’s strength is that it is open source and has been around for a while, so alot of people can contribute to it. I believe Aviary has funding, but Im not clear on how many people work on it. There is an API for connecting one’s own site to use Aviary’s features, but I didn’t see a way to extend it in my cursory examination.

Please post you thoughts in the comments. thanks

Bookmark and Share

Fixing The “Inside-Out” Css Box Model.

Quick, what is the biggest time waster in web design?

It is the fact that we are stuck with a css box model that is inside out.

The number we call “width” is the width of the inner content only.

The margins, padding and border add to the width to create a total outer width that we never directly work with, and yet is a more significant number with regard to layout.

Read More

Bookmark and Share

"Building a Blueprint" in Layercake.

In a previous tutorial, I demonstrated how to emulate a 960.gs style layout, and took you through the steps outlined in the nettuts tutorial on 960, and concluded by going on to do some things that are not possible with 960.
In this tutorial, I’ll show you how you could emulate the blueprint framework in layercake.

Read More

Bookmark and Share

Thanks for the Mention, Nathan Smith.

For the first few days after making version 1.0 of layercake public, there was no real action.

Read More

Bookmark and Share

"Doing a 960" in Layercake.

For the sake of comparison, This tutorial uses Layercake to recreate the steps in the Nettuts tutorial on 960.gs

Read More

Bookmark and Share