Menu icon Foundation

Developer | Saint Louis, MO

I love to over-engineer situations, but am truly just looking for knowledge at the end of the day.

My Posts

  • 1
    Reply
  • Foundation 4 & 5 Harmony

    By Jack Keller

    legacybundler

    Okay, so I'm in the middle of a couple of projects using Foundation 4 w/ Sass, I'd LOVE to start this new one using Foundation 5 but cannot risk the legacy projects falling apart. Does anyone have a good workflow potentially using Bundler or something els... (continued)

    Last Reply by Jordan Humphreys almost 6 years ago


My Comments

Jack Keller commented on Ben Bonora's post over 5 years

I too would love to know how to add Compass into this, I'm used to using some of the functions Compass allowed before but alas there seems to be no clear route, the workaround I found was to run a config.rb and compass task in Grunt but surely there's a simple @import way to do this, no?

Jack Keller commented on Simon C's post almost 6 years

Generally this is something you solve with JS or filling with content unfortunately. CSS just doesn't have a logical way by itself to handle height: 100%;

Here's a snippet I use from time to time in jQuery with a mix of vanilla JavaScript.

The selectors, jQuery vs $ and etc may differ in your case but this gets you pretty close. I'm certain there are other tricks out there too.

 function updateSidebar() {
    var $width = document.documentElement.clientWidth,
        $height = document.documentElement.clientHeight,
        $main = jQuery('div[role=main]').height();

    if($width > 755) {
        if($main > $height) {
            jQuery('div[role="navigation"]').css({'min-height': $main});
        } else {
            jQuery('div[role="navigation"]').css({'min-height': $height});
        }
    } else {
        jQuery('div[role="navigation"]').removeAttr('style');
    }
}

// then call it on load AND browser resize

    $(window)
        .load(function() {
            updateSidebar();
        })
        .resize(function(){
            updateSidebar();
        });

Jack Keller commented on punkstjimmy's post about 6 years

My question is similar, I'm midway through a project using Foundation 4 w/ Compass, but so very anxious to start my redesign using Foundation 5, is there any way the pair can coexist? Like if I keep the structure the same in the old project and not upgrade it am I still running Foundation 4 there?

Hopefully this and the above question can be answered before I continue on with reckless abandon, as I do sometimes.

Posts Followed

  • 1
    Reply
  • Foundation 4 & 5 Harmony

    By Jack Keller

    legacybundler

    Okay, so I'm in the middle of a couple of projects using Foundation 4 w/ Sass, I'd LOVE to start this new one using Foundation 5 but cannot risk the legacy projects falling apart. Does anyone have a good workflow potentially using Bundler or something els... (continued)

    Last Reply by Jordan Humphreys almost 6 years ago



Following

    No Content

Followers

  • Full Width Row

    Hey guys, I’m just curious what you think the best practice is when I have a row that I need to be full width of the page. Because if I set a row to be the full width, then my interior subsequent row will be full width and not adopt the Foundation defa... (continued) Read More

    View More Posts by Alok Jethanandani

My Posts


My Comments

You commented on Ben Bonora's post over 5 years

I too would love to know how to add Compass into this, I'm used to using some of the functions Compass allowed before but alas there seems to be no clear route, the workaround I found was to run a config.rb and compass task in Grunt but surely there's a simple @import way to do this, no?

You commented on Simon C's post almost 6 years

Generally this is something you solve with JS or filling with content unfortunately. CSS just doesn't have a logical way by itself to handle height: 100%;

Here's a snippet I use from time to time in jQuery with a mix of vanilla JavaScript.

The selectors, jQuery vs $ and etc may differ in your case but this gets you pretty close. I'm certain there are other tricks out there too.

 function updateSidebar() {
    var $width = document.documentElement.clientWidth,
        $height = document.documentElement.clientHeight,
        $main = jQuery('div[role=main]').height();

    if($width > 755) {
        if($main > $height) {
            jQuery('div[role="navigation"]').css({'min-height': $main});
        } else {
            jQuery('div[role="navigation"]').css({'min-height': $height});
        }
    } else {
        jQuery('div[role="navigation"]').removeAttr('style');
    }
}

// then call it on load AND browser resize

    $(window)
        .load(function() {
            updateSidebar();
        })
        .resize(function(){
            updateSidebar();
        });

You commented on punkstjimmy's post about 6 years

My question is similar, I'm midway through a project using Foundation 4 w/ Compass, but so very anxious to start my redesign using Foundation 5, is there any way the pair can coexist? Like if I keep the structure the same in the old project and not upgrade it am I still running Foundation 4 there?

Hopefully this and the above question can be answered before I continue on with reckless abandon, as I do sometimes.

Posts Followed



Following

  • No Content

Followers

  • Full Width Row

    Hey guys, I’m just curious what you think the best practice is when I have a row that I need to be full width of the page. Because if I set a row to be the full width, then my interior subsequent row will be full width and not adopt the Foundation defa... (continued) Read More

    View More Posts by Alok Jethanandani