Camille Blogs a Bit

Writing about design, technology, maybe philosophy, and daily living (in Singapore)

Menu Close

Category: Code (page 2 of 3)

Supporting IE8 with Foundation by ZURB

Since I’m using Foundation 4 for Save22, and they’ve pulled the plug on IE8 (and lower) support, here are some incredibly useful codes on Git that you’ll probably need if you want it to work properly in IE.

Just note that without these fixes, IE8 will render the website’s mobile layout instead of the desktop layout.

Grid fix – https://gist.github.com/zurbchris/5068210

Use the desktop header instead of the mobile version – https://gist.github.com/tmayr/5190565

Trying to make Sections / Tabs work in a specific way on IE8, desktop – https://github.com/zurb/foundation/issues/2031

the zero (or negative) height problem of elements inside an initially hidden container

phew, that was a long title. But it took me a while to figure out too. basically, I was working on creating a grid with list elements having the same height. I had done this before on Save22’s older version, and had made a function for it:

  function same_height(container) {
            var items_height = [];

            $(container).each(function() { 
                items_height.push($(this).outerHeight());
            });

            var tallest_content = Math.max.apply( null, items_height );

            $(container).each(function(){
                var item_height = $(this).parent().height();
                $(this).css('height', tallest_content);
            });

        }

same_height('ul#cat-list li');

I’m using Foundation 4 for this project, and I initially put the grid behind a hidden Section tab.

The jQuery code wasn’t working. For hours I couldn’t figure out why, until Mark asked the right question: “is it initially hidden?” and pointed me to a fix someone had made:

https://coderwall.com/p/r855xw

Although I think it means I have to integrate the jQuery with the Section JS of Foundation if I want to keep it hidden, or code my own tabbed fix for this. It just meant: it wasn’t fast enough for me to implement via just the framework + my own code, as I had originally thought. But because I learned of the actual problem later in the day, I already created a different design compromise wherein I made the grid visible already, instead of being hidden.

I’ll see if I have time to make a real fix for this, since there are other pages/components I think I need to finish first.

bootstrap: two toggle buttons on the nav bar

Problem: Both menus on the mobile version collapses when the buttons are pressed. You only want one menu to unfold at a time. 

Found a fix here: http://jsfiddle.net/gNUEx/

Modified the code a bit:

  var navbar = $('.navbar');

  navbar.on('click', '[data-toggle="collapse"]', function(event){
   var $target = $($(this).data('target')); 
    if(!$target.hasClass('in'))
      $('.container .in').removeClass('in').height(0);    
    })

front-end to server-side workflow

There’s a different workflow for everybody so I’m wondering what other people’s workflow are when it comes to doing front-end and then server-side.

I would usually:

  1. code the base template in PHP (so I have separate header / footer / and content pages. If I need specific body classes, I just write up functions quickly).
  2. upload the PHP files to my personal server to show the client for approval
  3. apply the code to the CMS (WordPress, python, etc.), whichever it is the devs are using. I’m not always part of this though.

How about you?

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.