Placeholders for desktop and mobile views

Question

There is a rather challenging task to implement, which broke my mind completely. Maybe someone will advise how to generate the algorithm based on the following description.

Objective

I have a single container with blocks of static width say 150px . The width of the container for desktop devices is say 600px and for mobile devices is 450px . This means that in the desktop version I have 4 blocks in a row and in the mobile version there are 3 blocks in a row. To complete all space left in a row (if any) I need to add placeholders which look like other blocks but with no content and of different colour. The number of added placeholders should always be the same but some should be hidden in the desktop version and some should be hidden in the mobile version. I need to use CSS for hiding and displaying the placeholders on different screens and JavaScript for adding placeholders on page load.

Examples

Consider the following markup for 5 blocks with content and 3 placeholders :

<section>
    <article>Article 1</article>
    <article>Article 2</article>
    <article>Article 3</article>
    <article>Article 4</article>
    <article>Article 5</article>

    <span>Placeholder 1</span>
    <span class="mobile-hide">Placeholder 2</span>
    <span class="mobile-hide">Placeholder 3</span>
</section>

DEMO: http://jsfiddle.net/5qpsj/

Here I have 1 basic placeholder and 2 placeholders that are hidden on mobile screens. However if the number of content blocks is 4 , then the combination of placeholders becomes different, displaying only 2 placeholders that must be hidden on desktop screens:

<section>
    <article>Article 1</article>
    <article>Article 2</article>
    <article>Article 3</article>
    <article>Article 4</article>

    <span class="desktop-hide">Placeholder 1</span>
    <span class="desktop-hide">Placeholder 2</span>
</section>

DEMO: http://jsfiddle.net/5qpsj/1/

I have tried different number of content blocks and created the following table of possible combinations:

---------------------------------------------------------------------
| Blocks | Placeholders | <no class> | .mobile-hide | .desktop-hide |
---------------------------------------------------------------------
|      0 |            4 |          3 |            1 |             0 |
|      1 |            3 |          2 |            1 |             0 |
|      2 |            2 |          1 |            1 |             0 |
|      3 |            1 |          0 |            1 |             0 |
|      4 |            2 |          0 |            0 |             2 |
|      5 |            3 |          1 |            2 |             0 |
|      6 |            2 |          0 |            2 |             0 |
|      7 |            3 |          0 |            1 |             2 |
|      8 |            1 |          0 |            0 |             1 |
|      9 |            3 |          0 |            3 |             0 |
|     10 |            2 |          2 |            0 |             0 |
|     11 |            1 |          1 |            0 |             0 |
|     12 |            0 |          0 |            0 |             0 |
|     13 |            3 |          2 |            1 |             0 |
|    ... |          ... |        ... |          ... |           ... |
---------------------------------------------------------------------

Starting from 13 blocks the combinations remain the same as for 1 block, 2 blocks, etc. Personally I don't see any pattern in these numbers, which stops me from writing appropriate algorithm for adding placeholders and setting the required classes on page load.

Of course I could hard code the values from 0 to 12 number of blocks, or use approach which checks the width of the container on page resize and add/remove required number of placeholders (performs badly!), but my aim is to generate the code, which does all this job once on load, and then rely on CSS only.

So basically, something like that:

for (var i = 0; i < [number_of_placeholders]; i++) {
    var placeholder = document.createElement('span');
    if ([condition]) {
        placeholder.className = 'mobile-hide';
    }

    if ([condition]) {
        placeholder.className = 'desktop-hide';
    }

    section.appendChild(placeholder);
}

Do you have any ideas?

Answer 1

So, here is my approach. Feel free to replace the jQuery bits with VanillaJS. You could probably get a bit cleverer with the placeholders needed and calculate whether there are some shared among desktop and mobile. I just added them separately and would let CSS take care of that. See my example here http://jsfiddle.net/yThng/ (add more .block s and run again to see that it works):

function generatePlaceholders(){
    var mobileRowCount      = 3, // blocks per row on mobile
        desktopRowCount     = 4, // blocks per row on desktop

        // how many blocks are there?
        blockCount          = $('.block').length,

        // how many placeholders on mobile/desktop needed
        mobilePlaceholders  = 0,
        desktopPlaceholders = 0,

        // iterator
        i;


    // use modulo to see if there are rows that are not filled (on mobile)
    if( blockCount%mobileRowCount > 0 ){
        // if there are, calculate how many placeholders needed
        mobilePlaceholders = mobileRowCount - blockCount%mobileRowCount;
    }

    // same as above, but for desktop
    if( blockCount%desktopRowCount > 0 ){
        desktopPlaceholders = desktopRowCount - blockCount%desktopRowCount;
    }

    // append needed desktop placeholders
    for( i=0; i < desktopPlaceholders; i++ ){
        $('#container').append('<div class="desktop-only-placeholder" />');
    }

    // append need mobile placeholders
    for( i=0; i < mobilePlaceholders; i++ ){
        $('#container').append('<div class="mobile-only-placeholder" />');
    }
}