Joshua Milford: Blog

LESS

Andy Clarke:

If your CSS is complicated enough to need a compiler or pre-processor, you’re fucking doing it wrong!

Earlier this week, I decided to find out what all the fuss over LESS was about. Now I know. It’s because it’s awesome.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions.

I figured it would be a useful tool to do simple things like use variables for colors. If you do this, you can “re-skin” a site in two or three lines of CSS, right? I also thought it would be really great for vendor prefixes. For example, just do something like:

.border-radius(@rad: 5px){
    -moz-border-radius: @rad;
    -webkit-border-radius: @rad;
    etc.
}

Now, you don’t have to remember differences in syntax for different browsers. You just get all div{.border-radius(10px)}. Plus, if a vendor changes their implementation of something, you just have to update it in one place. But you can do a ton more, like defining your favorite .clearfix method as a variable and maybe removimg some markup. The more I used it, the more creative I got with it.

So, without further ado, here are some things I’ve done with LESS:

960 Grid System (kinda’)… but fluid… and with LESS

// Define some variables
@body: 960;
@margin: 10;

// Do maths
.grid(@span){
    float:left;
    width:(((@span * 80) / @body) * 100%) - ((@margin / @body) * 200%);
    margin:0 (@margin / @body) * 100%;
}

// Make magic happen
#about-us{.grid(4); }
#sidebar{.grid(8); }

Baseline Grid with Everything in Ems

// Define some variables
@font-size:16;
@line-height:1.5;
@font-family: ‘georgia’;

// Do maths
@font-size-em: (@font-size / 16) * 1em;
.grid(@span){
    float:left;
    width:(((@span * 80) / @body) * 100%) - ((@margin / @body) * 200%);
    margin:0 (@margin / @body) * 100%;
}
.getSize(@size, @top-margin: 2, @bottom-margin: 1){
    @new-size: (@size / @font-size) * 1em;
    @new-height:(@line-height * @font-size) / (@new-size * @font-size) * 1em;
    @new-margin: @margin * @new-height;
    font-size: @new-size;
    line-height:@new-height;
    margin:(@top-margin * @new-height) 0 (@bottom-margin * @new-height) 0;
}

// Make magic happen
h1{.getSize(60);}
h2{.getSize(36);}
h3{.getSize(24, 2, 0);}

Disclaimer

I realize, these may not be the most efficient or effective ways to do things, but I just started learning it, okay?

I’m not completely sold on a deployment strategy yet. Compiling it is a must for a production environment, and that’s easy with LESS.app. But once a project is live, I’m not sure what I’ll do about making quick one-off updates to the style sheet.

So, go try LESS.

PHP Checkboxes with Empty Values

When I’m processing forms and updating data with PHP, I do this alot:

foreach($_POST as $key=>$value){
    $fields[$key] = $value;
}
$db->update(‘table’, $fields, “id = $fields[‘id’]”);

Everything works great. But a checkbox in the form can throw a wrench into this sweet automation. Look at this:

<input type="checkbox" name="some_field" value="1" />

If the checkbox is checked, you’ll get $_POST[‘some_field’] = 1, which is great. But if it’s not checked, you won’t get $_POST[‘some_field’] = 0. Instead you’ll get “<insert cricket noise>”.

Here’s a quick workaround:

<input type="hidden" name="some_field" value="" />
<input type="checkbox" name="some_field" value="1" />

That’s it. Just put a hidden input with the same name as your checkbox and no value (or you could use “0” if you want). Then if the checkbox isn’t checked, you’ll get $_POST[‘some_field’] = 0.