SublimeText2, LESS css, and Bootstrap

image

I’ve finally managed to figure out how to download/set up Sublime Text 2 Packages, via the Package Control plugin, and oh man it is awesome. To be honest, I’m not sure how I got it working because I was trying it out yesterday and couldn’t figure it out at all (is it just a timing thing or was I temporarily brain-dead yesterday?).

So yeah, I normally work with Foundation for a base framework but for this project I was using Bootstrap. It was really easy (as expected, I suppose) and I could imagine myself switching to Bootstrap with my other projects if not for Foundation 4 becoming mobile-first recently.

So this is also the first time I’m using that framework with LESS css. I’m particular about colors on my text-editor, so yes, I really wanted to figure out installing packages on Sublime so I can have proper LESS Syntax (LESS-sublime on github).

image

And then I got SimpLESS to automatically convert the .less file to .css (because it’s free. Although I’ve seen similar plugins on Sublime (LESS-build and LESS2CSS), I just haven’t tried them.

The last time I read a SASS vs LESS article was like a year ago but I guess after this I could check out SASS too. Do you have a preference over one or the other?

I don’t know why I haven’t started with either SASS or LESS earlier (maybe I should have tried figuring out Sublime Text 2 more! Haha) but this makes me enjoy designing in the browser more.

That said, I’m coming down with the flu (AGAIN!). Stupid summer heat + afternoon rains. :’(

responsive design and client pitches

Right now, I’m testing out waters with a potential client who is requiring me to submit PSDs of 4 different resolutions (mobile phone, tablet, “medium” desktop, wide-screen desktop) and I’m taking around four hours just trying to design for 1 resolution of 1 specific screen.

How I would do it, personally:

  1. Design wireframes for the 4 different resolutions in HTML
  2. Do a PSD for the smallest and widest screens
  3. Create mocks for the 2 middle screens for one page
  4. Proceed with the PSD design for the rest of the screens
  5. Code the designs in HTML/CSS

So, since this is a “testing the waters” phase, I’m not sure it’s the best way to proceed with this workflow (PSD-first and with 4 resolutions per screen design) since it’ll cost me (and the client) more hours. D: I think I should email the possible client about it, and then see if he wants to push through with it still.

wordpress codes: advanced custom fields and grouping select repeater fields

Here’s an example of a repeater field on WordPress:

image

Basically, I wanted the page to render the service names under the similarly-labeled service labels.

My brain isn’t very good with the whole PHP logic thing, so I got the internet to help me out. I adapted this original response on StackOverflow and edited it to fit the Advanced Custom Fields code.

$options = get_field(‘products_and_services’);

foreach( $options as $k => $v ){

/* check for services */

if( $label!=$v[‘service_label’] ){

/* New Service */

if( $label!=false ){

/* Close the Previous Service */

echo ‘</ul>’;

}

/* Open the New Service */

echo ‘<h3>’ . $v[‘service_label’] . ‘</h3><ul>’;

$label = $v[‘service_label’];

}

/* Add a Label */

echo ‘<li>’.$v[‘service_name’].’</li>’;

}

/* Close that Last Service */

echo ‘</ul>’;

And it worked perfectly.

If you have tips on how to improve this then please tell me :)