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 10 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 2 months

Thank you Gabriel! This is exactly what I was talking about! I'd love to know why it's explicitly removed. I feel like there has to be a (good?) reason, but I can't imagine what it would be. Thanks again for the super helpful info!

Roy Hinkley commented on Roy Hinkley's post 4 months

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 12 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 about 1 year

Can anyone offer any insights?
 
 

Roy Hinkley commented on Elisandro Martinez's post about 1 year

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 about 1 year

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 almost 2 years

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.

Posts Followed






Following

    No Content

Followers

My Posts

My Comments

You commented on Roy Hinkley's post 2 months

Thank you Gabriel! This is exactly what I was talking about! I'd love to know why it's explicitly removed. I feel like there has to be a (good?) reason, but I can't imagine what it would be. Thanks again for the super helpful info!

You commented on Roy Hinkley's post 4 months

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 12 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 about 1 year

Can anyone offer any insights?
 
 

You commented on Elisandro Martinez's post about 1 year

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 about 1 year

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 almost 2 years

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.

Posts Followed

Following

  • No Content

Followers