Menu icon Foundation

Developer | San Cristobal, Venezuela

Front end Developer, Musician. Using Foundation, Sublime Text, Emmet, SASS, GIMP, Grunt, jQuery, Firefox, Thunderbird, Azumi, Gibson, Mollard and so...

My Posts

No Content

My Comments

Jesus Lugo commented on Bijesh Amatya's post over 3 years

My recommendation:

Do, create, taste, get errors, fix them... repeat

The real learning comes by doing, you can use a pet project, a portfolio page for a friend, a local organization which needs a site (and you do it pro-bono), the real challenges becomes the basis for the real knowledge. Obviously you shouldn't take a big site as a first task, but a simple blog layout for an imaginary persona, can be a nice starting challenge.

Buying a book is an option too, I'd prefer (for myself) a project and the resources in thousands of articles, posts, forum and even Slack.

Good luck with the learning!

Jesus Lugo commented on Brandon's post almost 4 years

Hi Brandon,

I don't see anything in block grid documentation to do so, however, if you add the following class to the CSS code:

.block-grid-collapse > li {
  padding: 0
}

And use the class in the block grid container, will do the work. Of course you can edit the Foundation settings and make all block grids having zero padding, that would be a site-wide solution, what I propose here is a per-element solution.

Hope this can help

Jesus Lugo commented on Kevin's post over 4 years

Kevin,

Have you tried just using padding-top instead for #title ?, I think that could make the job. Not sure if adding overflow:hidden to #gradient would work in your case... Another thing you can do is add an element to do the "spacing", so you can remove it when there's little space available (like on mobiles).

I've always think on the grid as relationship between elements, and the flowing across devices... A stiff margin looks kinda awkward to me... In your case, I'd use 9.37rem instead of the 150px, or even use a percentage, but that's my point of view.

Hope this can help

Jesus Lugo commented on Dan Trobak's post over 4 years

Hi Dan, you can set a JavaScript call to open menu on document load:

$('.off-canvas-wrap').foundation('offcanvas', 'show', 'move-right');
$('.off-canvas-wrap').foundation('offcanvas', 'hide', 'move-right');
$('.off-canvas-wrap').foundation('offcanvas', 'toggle', 'move-right');

Jesus Lugo commented on Martin Pešout's post almost 5 years

Hi Martin,

In the Zurb guide to Foundation tooltips (http://foundation.zurb.com/docs/components/tooltips.html) states "On a small device, the tooltips are full-width and bottom aligned", however you can inspect the styles and override to match your needs (just make sure you're adding the code to the small breakpoint).

Jesus Lugo commented on Ashley Wilson's post almost 5 years

Hi Ash,

Have you tried to use a element instead?, something like:

<button class="button checkout-button" type="submit" name="checkout" ><i class="fi-paypal"></i>Checkout</button>

Hope this helps

Jesus Lugo commented on Lance Gundersen's post almost 5 years

Hi Lance,

You could set the image as background (css) for the container of that top section... or set position absolute for an img element, located inside that container (I'd prefer the first one).

Do you have issues with the image thing?, or the overall layout?... in the Foundation kitchen sink (http://foundation.zurb.com/docs/components/kitchen_sink.html) you can see a lot of UI elements, you can take those as guide... I'd work the line under "new puppy", "classes", etc, with a background image for the container.

Hope this can help you.

Posts Followed




  • 74
    Replies
  • Foundation 5 and IE8

    By James Cocker

    ie8Foundation 5usage

    Firstly, I know, I know, IE8 is nearly dead and the recommended way to use Foundation on it is to stick with version 3. However, I have a new site build coming up which unfortunately requires IE8 support, and I'd really like to use the new Foundation 5 wi... (continued)

    Last Reply by manav singh 10 months ago


Following

Followers

My Posts

No Content

My Comments

You commented on Bijesh Amatya's post over 3 years

My recommendation:

Do, create, taste, get errors, fix them... repeat

The real learning comes by doing, you can use a pet project, a portfolio page for a friend, a local organization which needs a site (and you do it pro-bono), the real challenges becomes the basis for the real knowledge. Obviously you shouldn't take a big site as a first task, but a simple blog layout for an imaginary persona, can be a nice starting challenge.

Buying a book is an option too, I'd prefer (for myself) a project and the resources in thousands of articles, posts, forum and even Slack.

Good luck with the learning!

You commented on Brandon's post almost 4 years

Hi Brandon,

I don't see anything in block grid documentation to do so, however, if you add the following class to the CSS code:

.block-grid-collapse > li {
  padding: 0
}

And use the class in the block grid container, will do the work. Of course you can edit the Foundation settings and make all block grids having zero padding, that would be a site-wide solution, what I propose here is a per-element solution.

Hope this can help

You commented on Kevin's post over 4 years

Kevin,

Have you tried just using padding-top instead for #title ?, I think that could make the job. Not sure if adding overflow:hidden to #gradient would work in your case... Another thing you can do is add an element to do the "spacing", so you can remove it when there's little space available (like on mobiles).

I've always think on the grid as relationship between elements, and the flowing across devices... A stiff margin looks kinda awkward to me... In your case, I'd use 9.37rem instead of the 150px, or even use a percentage, but that's my point of view.

Hope this can help

You commented on Dan Trobak's post over 4 years

Hi Dan, you can set a JavaScript call to open menu on document load:

$('.off-canvas-wrap').foundation('offcanvas', 'show', 'move-right');
$('.off-canvas-wrap').foundation('offcanvas', 'hide', 'move-right');
$('.off-canvas-wrap').foundation('offcanvas', 'toggle', 'move-right');

You commented on Martin Pešout's post almost 5 years

Hi Martin,

In the Zurb guide to Foundation tooltips (http://foundation.zurb.com/docs/components/tooltips.html) states "On a small device, the tooltips are full-width and bottom aligned", however you can inspect the styles and override to match your needs (just make sure you're adding the code to the small breakpoint).

You commented on Ashley Wilson's post almost 5 years

Hi Ash,

Have you tried to use a element instead?, something like:

<button class="button checkout-button" type="submit" name="checkout" ><i class="fi-paypal"></i>Checkout</button>

Hope this helps

You commented on Lance Gundersen's post almost 5 years

Hi Lance,

You could set the image as background (css) for the container of that top section... or set position absolute for an img element, located inside that container (I'd prefer the first one).

Do you have issues with the image thing?, or the overall layout?... in the Foundation kitchen sink (http://foundation.zurb.com/docs/components/kitchen_sink.html) you can see a lot of UI elements, you can take those as guide... I'd work the line under "new puppy", "classes", etc, with a background image for the container.

Hope this can help you.

Posts Followed

Following

Followers