Menu icon Foundation

My Posts

  • 3
    Replies
  • Equalizer panels not equal

    By Cole Beck

    htmlEqualizerjs

    Hi I am trying to use equalizer to manage the heights of some content panels I have set-up in a block-grid. The problem is that it (equalizer js) is applying the attribute of 'height:inherit;' to the content rather than a height given in pixels; leaving... (continued)

    Last Reply by Rafi Benkual almost 5 years ago



My Comments

Cole Beck commented on Robbert Holtkamp's post over 4 years

Wow, I had no idea what was causing this in my Foundation webapps, definitely going to try this out! Thanks!

Cole Beck commented on Amir's post over 4 years

You can set this in sass to remove the gutters on either side of block grid:

$align-block-grid-to-grid: false; //removes column gutter so edges of block grid align with grid

in combination with this:

<div class="row" style="background-color:gray;">
    <div class="small-12 columns">
        <ul class="small-block-grid-2 medium-block-grid-4" style="position:absolute; z-index:10">
            <li>
                <img src="http://placekitten.com/g/800/600">
            </li>
            <li>
                <img src="http://placekitten.com/g/800/600">
            </li>
            <li>
                <img src="http://placekitten.com/g/800/600">
            </li>
            <li>
                <img src="http://placekitten.com/g/800/600">
            </li>
        </ul>
        <video muted="" autoplay="" loop="" style="width:100%; height:100%;">
            <source src="http://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
        </video>

    </div>
</div>

I think that should get your kittens filling up the space you want, without flowing over.

Cole Beck commented on Semi Mase's post over 4 years

Deploying with Foundation is very quick, I would say the building all the backend components will be a much bigger task than building a front-end similar to Craigslists's.

Cole Beck commented on Onie Camara's post over 4 years

Can you just make a small image file and use it as an img tag?

Cole Beck commented on Joe Rutland's post over 4 years

Looks like you have solved the problem, I visited the site you posted and the parent links are working fine.

Cole Beck commented on David's post over 4 years

You can try giving your sub-nav a max-width, like so:

.sub-nav {
max-width: 50%;
}

Adjust the width as you need, hope that helps.

Cole Beck commented on Rafi Benkual's post over 4 years

Nice! I've had to use a very similar method to detach a footer and a breadcrumbs nav from the page to then bring it within the boundaries of an off-canvas navigation layout (so that all the content would get pushed over when the menu slid out). I couldn't control their initial placement so this was the best solution.

Cole Beck commented on Zurb Rules's post over 4 years

Hi Mike
I wouldn't change all column paddings to zero, there are built-in methods you can use to handle column padding. For example, excluding "columns" or "columns" altogether from a "small-12" (for instance, could be "medium-6", etc.) will drop the padding at the beginning and end. You can also use 'uncollapse' and 'collapse' to handle the padding, or "gutters" as they are referred to here in this snip from the Zurb docs:

<div class="row medium-uncollapse large-collapse">
    <div class="small-6 columns">
        Removes gutter at large media query
    </div>
    <div class="small-6 columns">
        Removes gutter at large media query
    </div>
</div>

Hope that helps.

Cole Beck commented on sergiu's post over 4 years

I didn't see a link to jQuery on there, try adding that before your foundation.min.js at the bottom and try again. Hope that helps.

Cole Beck commented on Mike Weisz's post over 4 years

I see. If you dig around the Zurb site you can find some more stuff that might interest you, like on the Building Blocks page:
http://zurb.com/building-blocks
or Pattern Tap:
http://zurb.com/patterntap

Posts Followed






  • 8
    Replies
  • contain Magellan to grid

    By David

    Magellan

    Hello, I would like to use Magellan as a sub nav. Is there an easy hack to contain the Magellan Nav to their designated grid while scrolling down (like in the example: http://foundation.zurb.com/docs/components/magellan.html). If I implement Magell... (continued)

    Last Reply by hassan almost 4 years ago




  • 1
    Reply
  • TopBar toggle not working!

    By sergiu

    topbartoggle

    I'm working with laravel and foudantion for a project and i can't make the topbar toggle function to work when i resize the browser or open the website from my phone. I pasted the code from my index page, that i obtained from viewing my home page. I'm usi... (continued)

    Last Reply by Cole Beck over 4 years ago



Following

    No Content

Followers

My Posts


My Comments

You commented on Robbert Holtkamp's post over 4 years

Wow, I had no idea what was causing this in my Foundation webapps, definitely going to try this out! Thanks!

You commented on Amir's post over 4 years

You can set this in sass to remove the gutters on either side of block grid:

$align-block-grid-to-grid: false; //removes column gutter so edges of block grid align with grid

in combination with this:

<div class="row" style="background-color:gray;">
    <div class="small-12 columns">
        <ul class="small-block-grid-2 medium-block-grid-4" style="position:absolute; z-index:10">
            <li>
                <img src="http://placekitten.com/g/800/600">
            </li>
            <li>
                <img src="http://placekitten.com/g/800/600">
            </li>
            <li>
                <img src="http://placekitten.com/g/800/600">
            </li>
            <li>
                <img src="http://placekitten.com/g/800/600">
            </li>
        </ul>
        <video muted="" autoplay="" loop="" style="width:100%; height:100%;">
            <source src="http://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
        </video>

    </div>
</div>

I think that should get your kittens filling up the space you want, without flowing over.

You commented on Semi Mase's post over 4 years

Deploying with Foundation is very quick, I would say the building all the backend components will be a much bigger task than building a front-end similar to Craigslists's.

You commented on Onie Camara's post over 4 years

Can you just make a small image file and use it as an img tag?

You commented on Joe Rutland's post over 4 years

Looks like you have solved the problem, I visited the site you posted and the parent links are working fine.

You commented on David's post over 4 years

You can try giving your sub-nav a max-width, like so:

.sub-nav {
max-width: 50%;
}

Adjust the width as you need, hope that helps.

You commented on Rafi Benkual's post over 4 years

Nice! I've had to use a very similar method to detach a footer and a breadcrumbs nav from the page to then bring it within the boundaries of an off-canvas navigation layout (so that all the content would get pushed over when the menu slid out). I couldn't control their initial placement so this was the best solution.

You commented on Zurb Rules's post over 4 years

Hi Mike
I wouldn't change all column paddings to zero, there are built-in methods you can use to handle column padding. For example, excluding "columns" or "columns" altogether from a "small-12" (for instance, could be "medium-6", etc.) will drop the padding at the beginning and end. You can also use 'uncollapse' and 'collapse' to handle the padding, or "gutters" as they are referred to here in this snip from the Zurb docs:

<div class="row medium-uncollapse large-collapse">
    <div class="small-6 columns">
        Removes gutter at large media query
    </div>
    <div class="small-6 columns">
        Removes gutter at large media query
    </div>
</div>

Hope that helps.

You commented on sergiu's post over 4 years

I didn't see a link to jQuery on there, try adding that before your foundation.min.js at the bottom and try again. Hope that helps.

You commented on Mike Weisz's post over 4 years

I see. If you dig around the Zurb site you can find some more stuff that might interest you, like on the Building Blocks page:
http://zurb.com/building-blocks
or Pattern Tap:
http://zurb.com/patterntap

Posts Followed

Following

  • No Content

Followers

  • No Content