Menu icon Foundation

My Posts


  • 1
    Reply
  • Margins in XY Grid

    By Roy Hinkley

    xy gridXYgridmargintopbottom

    I've been experimenting with the new XY Grid and so far I think it's awesome! But I noticed a small issue and I was wondering if anyone could shed any light on it... I often have a need to build sites that feature both full-width content as well as 1200p... (continued)

    Last Reply by Roy Six 7 months ago






  • 2
    Replies
  • Text overlapping button

    By Roy Hinkley

    buttontextoverlap

    I'm having some issues with buttons, and the lack of questions in the forum about this issue makes me think that I'm overlooking something very obvious. I'm trying to have a button to the left, and text to the right. There will be several rows of these... (continued)

    Last Reply by Roy Hinkley over 2 years ago




My Comments

Roy Hinkley commented on Roy Hinkley's post 28 days

Check out this pen using Foundation 5: https://codepen.io/rafibomb/pen/YPwWYy
When using Chrome and Safari, typing something in the field shows the little (x) appear on the right side of the input. Clicking that little icon clears the search field. This doesn't seem to work in FireFox, at least not the version I'm using.
Here's the exact same code, but in Foundation 6.3 https://codepen.io/anon/pen/ypRNqZ
Notice how when you enter text in the field, no (x) icon appears on the right side. There is no way to clear the input from that field. This is the behavior with Foundation 6 on Chrome, FireFox and Safari.
 
 
 
 

Roy Hinkley commented on Mike Manfrin's post 9 months

I'd like to re-open this thread, if possible. I have a top nav bar that sticky-shrinks, followed by a large hero image with a horizontal form below the hero image. I want to have the horizontal form "sticky-stack" under the top nav when scrolled. I looked at the pen that Rafi posted above, but it seems to have some problems as it doesn't work or look right.
A fine example is here: http://demo.bigwhiteduck.com/sticky-grummage/, however, I don't know of or use this RapidWeaver software.
Does anyone know if it's possible, with Foundation 6.3.1 to get elements to sticky-stack? 

Roy Hinkley commented on Roy Hinkley's post 10 months

Can anyone offer any insights?
 
 

Roy Hinkley commented on Elisandro Martinez's post 12 months

I'm not sure what you mean by "use the same HTML layout". Do you mean re-create the same look of the site? You can build practically anything with Foundation, but it's not necessarily going to be easy to match an existing design. To make a tab navigation like that could be fairly complex.
 

Roy Hinkley commented on Elisandro Martinez's post 12 months

There is no conversion to Foundation or any framework for that matter. "Converting it to Foundation" would be another way of saying "rebuilding the theme using Foundation". You'll have to start from scratch.
If you decide to go that route, there is a really nice Foundation 6 blank starter theme called FoundationPress.
I might also add that you will probably want to start from scratch with a new WordPress installation as well. It appears that someone has really butchered the WordPress core of that site. IF you can get to the admin panel, there is an easy way to export all the content to import to a new WordPress install (Dashboard > Tools > Import and Export).

Roy Hinkley commented on Roy Hinkley's post over 1 year

Ah-ha! I get it now! It works well. Thanks Val!
By the way, that was just a typo on my part. I meant all:unset :)
However, I still feel like there should be a place where I can shut it off globally. In this instance, I only have one select that I have to deal with, but if I had several on a single form, I would have to add a separate ID to each one.
It would make a lot more sense if I could just disable the shadow globally rather than have to override each one individually. But this works for now and works well. Thanks again!
 
 

Roy Hinkley commented on Roy Hinkley's post over 1 year

Thanks Val! unset:all is pretty powerful. I never knew about that before.
This works
 
select:focus{

unset:all;

//additional styling here

}
but then I have to redefine the styles for :focus. That shadow is added somewhere, shouldn't I be able to just disable it somewhere?
 
 

Roy Hinkley commented on Stewart's post over 1 year

I'm going to say that yes, you could do that, but it would be tricky and likely cause more trouble than it's worth.
You basically need to do a full install of Foundation, then copy in your existing pages to the directory structure and link to the Foundation CSS and JS on each page that you're updating, then use the Foundation classes as you update your layout a little at a time. You may have conflicts with existing classes. For example, you may have classes called "column" or "row" that mean very different things to Foundation than what they mean to your existing site. There's also the possibility of JS conflicts for the same reason.
Personally, I think this would be a major headache and simply not worth the effort. I know from previous experience that you would likely spend a ton of time just getting stuff to work, you'll get it all to work, then when you're almost done you'll run into a conflict of some sort that you can't work around and the whole thing will be a bust.
A better option might be to just make a new Foundation site in a subdirectory and link to those pages as needed until the entire site is changed over. This could cause you some SEO trouble, but that's not my area of expertise so I couldn't say for certain.
 
 
 

Roy Hinkley commented on Roy Hinkley's post over 1 year

UPDATE: I added  aria-expanded="true" style="display:block" to the default item. That fixes issue #1. Now I'm just trying to figure out how toggling another panel open will close an already opened panel.

Roy Hinkley commented on Justin T's post almost 2 years

I came here to ask about the same issue. Here is the screenshot from EOA for Outlook 2007. It's the same for Outlook 2010, 2013 and 2016.
This is from a fresh install of Foundation for Email 2.1 with absolutely no additional classes added. The columns look fine on every other platform.
Is this a bug that should be reported in a bug tracker somewhere? I'll admit I'm really kind of clueless about what the proper protocol is to get bugs like this addressed, but I'd like to help if anyone knows the proper channels.
 
edit: Can confirm that adding valign="top" to the enclosing <th> solves the problem.

 

Posts Followed






Following

    No Content

Followers

My Posts

My Comments

You commented on Roy Hinkley's post 28 days

Check out this pen using Foundation 5: https://codepen.io/rafibomb/pen/YPwWYy
When using Chrome and Safari, typing something in the field shows the little (x) appear on the right side of the input. Clicking that little icon clears the search field. This doesn't seem to work in FireFox, at least not the version I'm using.
Here's the exact same code, but in Foundation 6.3 https://codepen.io/anon/pen/ypRNqZ
Notice how when you enter text in the field, no (x) icon appears on the right side. There is no way to clear the input from that field. This is the behavior with Foundation 6 on Chrome, FireFox and Safari.
 
 
 
 

You commented on Mike Manfrin's post 9 months

I'd like to re-open this thread, if possible. I have a top nav bar that sticky-shrinks, followed by a large hero image with a horizontal form below the hero image. I want to have the horizontal form "sticky-stack" under the top nav when scrolled. I looked at the pen that Rafi posted above, but it seems to have some problems as it doesn't work or look right.
A fine example is here: http://demo.bigwhiteduck.com/sticky-grummage/, however, I don't know of or use this RapidWeaver software.
Does anyone know if it's possible, with Foundation 6.3.1 to get elements to sticky-stack? 

You commented on Roy Hinkley's post 10 months

Can anyone offer any insights?
 
 

You commented on Elisandro Martinez's post 12 months

I'm not sure what you mean by "use the same HTML layout". Do you mean re-create the same look of the site? You can build practically anything with Foundation, but it's not necessarily going to be easy to match an existing design. To make a tab navigation like that could be fairly complex.
 

You commented on Elisandro Martinez's post 12 months

There is no conversion to Foundation or any framework for that matter. "Converting it to Foundation" would be another way of saying "rebuilding the theme using Foundation". You'll have to start from scratch.
If you decide to go that route, there is a really nice Foundation 6 blank starter theme called FoundationPress.
I might also add that you will probably want to start from scratch with a new WordPress installation as well. It appears that someone has really butchered the WordPress core of that site. IF you can get to the admin panel, there is an easy way to export all the content to import to a new WordPress install (Dashboard > Tools > Import and Export).

You commented on Roy Hinkley's post over 1 year

Ah-ha! I get it now! It works well. Thanks Val!
By the way, that was just a typo on my part. I meant all:unset :)
However, I still feel like there should be a place where I can shut it off globally. In this instance, I only have one select that I have to deal with, but if I had several on a single form, I would have to add a separate ID to each one.
It would make a lot more sense if I could just disable the shadow globally rather than have to override each one individually. But this works for now and works well. Thanks again!
 
 

You commented on Roy Hinkley's post over 1 year

Thanks Val! unset:all is pretty powerful. I never knew about that before.
This works
 
select:focus{

unset:all;

//additional styling here

}
but then I have to redefine the styles for :focus. That shadow is added somewhere, shouldn't I be able to just disable it somewhere?
 
 

You commented on Stewart's post over 1 year

I'm going to say that yes, you could do that, but it would be tricky and likely cause more trouble than it's worth.
You basically need to do a full install of Foundation, then copy in your existing pages to the directory structure and link to the Foundation CSS and JS on each page that you're updating, then use the Foundation classes as you update your layout a little at a time. You may have conflicts with existing classes. For example, you may have classes called "column" or "row" that mean very different things to Foundation than what they mean to your existing site. There's also the possibility of JS conflicts for the same reason.
Personally, I think this would be a major headache and simply not worth the effort. I know from previous experience that you would likely spend a ton of time just getting stuff to work, you'll get it all to work, then when you're almost done you'll run into a conflict of some sort that you can't work around and the whole thing will be a bust.
A better option might be to just make a new Foundation site in a subdirectory and link to those pages as needed until the entire site is changed over. This could cause you some SEO trouble, but that's not my area of expertise so I couldn't say for certain.
 
 
 

You commented on Roy Hinkley's post over 1 year

UPDATE: I added  aria-expanded="true" style="display:block" to the default item. That fixes issue #1. Now I'm just trying to figure out how toggling another panel open will close an already opened panel.

You commented on Justin T's post almost 2 years

I came here to ask about the same issue. Here is the screenshot from EOA for Outlook 2007. It's the same for Outlook 2010, 2013 and 2016.
This is from a fresh install of Foundation for Email 2.1 with absolutely no additional classes added. The columns look fine on every other platform.
Is this a bug that should be reported in a bug tracker somewhere? I'll admit I'm really kind of clueless about what the proper protocol is to get bugs like this addressed, but I'd like to help if anyone knows the proper channels.
 
edit: Can confirm that adding valign="top" to the enclosing <th> solves the problem.

 

Posts Followed

Following

  • No Content

Followers