Menu icon Foundation

Designer | Cocoa, FL

My Posts


My Comments

Eric Bishard commented on marek's post about 2 years

I believe the current configuration is correct and better than F5, after all if you want to make it similar to F5, throw in an additional set of overrides!Agree with Rafi, I have used the new F6 modal and needed it to scroll, everything worked well out of the box.

Eric Bishard commented on Patrick Fraley's post almost 5 years

ckeditor is infact a great Rich Text Editor for Foundation and if you don't believe me, take a look at it in action here:

http://appstigate.com/smarteradmin/editor.html

That is a Foundation template that uses ckeditor. Will you have to do some tweaking YES, but you are not going to find an implementation of a Rich Text Editor that you will not have to tweak to fit your needs.

I have not used this next one, but http://quilljs.com/ is supposed to be great, but none of these are made for use with foundation. They are made for use with web apps, oh wait if you're using Foundation, you are probably building a web app.

A question like this is more suited for a Bootstrap forum. Foundation is not your all inclusive framework and there is no reason they would build a Foundation Rich Text Editor, it's too specific.

Eric Bishard commented on Jenny Shoars's post over 5 years

I tried the above solution with no results. I even removed the row-collapse which I think you meant to do on the second case example. I also tried

.column  .nopadding { padding: 0 0 0 0 } 

and

.column >  .nopadding { padding: 0 0 0 0 } 

putting a space between the two classes and a child extender (or whatever that is called). I also tried instead of using padding on the columns to instead use margin on the buttons but had no positive results. IN all of these cases I hade ZERO change in the output, as if there were no changes at all to the output. A lot of us would much rather use the normal grid instead of block-grid which uses. But I eventually had to use block grid to get anything close to what I wanted. But I'd rather use the normal grid SEE below

Can someone please help with this issue? We need a good way that we can selectively remove gutters and add custom padding. My purpose for using this is to create custom buttons that expand the full length of the div they are in to create a gird of buttons that are all the same size for use on mobile phones. Something like below:

This is what I want to use

<div class="row collapse show-for-small-only">
   <div class="small-6 columns"><a href="#" class="tiny button expand nopadding">Menu</a>
   </div>
   <div class="small-6 columns"><a href="#" class="tiny button expand nopadding">Delivery</a>
   </div>
   <div class="small-6 columns"><a href="#" class="tiny button expand nopadding">Dining</a>
   </div>
   <div class="small-6 columns"><a href="#" class="tiny button expand nopadding">Trans</a></div>
</div>

OR using block-grid

<div class="show-for-small-only">
   <ul class="small-block-grid-2">
     <li><a href="#" class="tiny button radius expand">Menu</a></li>
     <li><a href="#" class="tiny button radius expand">Delivery</a></li>
     <li><a href="#" class="tiny button radius expand">Dining</a></li>
     <li><a href="#" class="tiny button radius expand">Transportation</a></li>
   </ul>
</div>

To top it all off, If I could get the normal grid to work in this fashion, I would also like to figure out how to make the buttons expand to height as well. That is not as important. But desirable.

Eric Bishard commented on Adam D's post over 5 years

Looks like the PR has been merged, I have a sticky top-bar and a sticky magellan. I'd like to offset the magellan 60 pixels below the top of the screen as my top-bar is 60 pixels high. What do I need to do? I have updated my magellan.js file with the Pull Request changes. But none of the methods above are working for me either.

Eric Bishard commented on Eric Bishard's post over 5 years

Thats a lot of stuff to put in code pen. THis is a fairly simple question I would think. THere are only so many settings in Top-Bar. Just wondering why I get a color of #333 after I have set the above settings to be different colors. My code is setup correctly or I wouldn't have the other settings being overridden.

Eric Bishard commented on Peter Graff's post almost 6 years

@PeterGraff SO I implemented your navigation-Hybrid. I changed it up a bit, also added [Contain to Grid] wrapped around the Top-Bar section since I use the standard grid foundation provides. Nice work!

Eric Bishard commented on Peter Garner's post almost 6 years

I love it, it's like a little slice of stackOverflow. Just the good parts.

Eric Bishard commented on Rubén Santacruz's post almost 6 years

It's not a bug. Although it is the preferred way of importing normalize when using SCSS in Rails. They made it available for convenience, but didn't include it in the generator since normalize is technically an optional add-on, not a dependancy.

This statement is from elm232 @github.

In your foundation overrides file you should do something like this:

@import 'normalize';
@import 'foundation';

The github link provided above gives some insight to this issue,

Eric Bishard commented on Clay Hymas's post almost 6 years

The Zurb codec style guide refers to the predecessor of Foundation. Before foundation was foundation it was called the Zurb coded style guide. Eventually it became Foundation 1.0 which was not responsive. If it were available now (which I am most certain it is not) it would be a stripped down and dated version of Foundation that is not relevant anymore. The Zurb coded style guide was the jumping off point for both Foundation and Bootstrap. Johnathan Smiley and Mark Otto were both involved in the creation of this style guide. If you really wanted this legacy piece of code I would contact Johnathan on twitter and ask him if there is a copy laying around and if so, it may not be something they are releasing to the public.

As for the reason for loading the scripts at the bottom (anyone correct me if I am wrong). You don't want your javascript loading at the same time as the page being drawn and sharing its load time with other processes. This would create lag in the responsiveness of items that rely on those javascripts like orbit or interchange or anything javascript for that matter. Keep it at the bottom for performance reasons! I'm sure there are a few other reasons why it's a good idea, but that seems the most glaring reason to me.

Loading at the bottom improve render times of your page, it enables progressive rendering, you know that if the page render finally makes it to your javascript code that the necessary page elements have usually loaded already.

When you have scripts loading in your header they stop other downloads from taking place! This includes your styling, and will also stop your images from downloading until the script has finished.

This is because JavaScript files load synchronously.

Eric Bishard commented on Peter Graff's post almost 6 years

Off canvas was just a playground add-on in F4, so the fact that it is baked in is a huge plus in F5. This makes it a lot more accessible for those of use using ASP.Net or Rails and a package manager/asset pipeline type installation. Top-bar was their original navigation element and completely separate from off canvas. While I do agree a hybrid style nav using the best of both features is a great idea We should be happy that it was included in the framework. Just because they do something on their site doesn't mean that it should be default. You have to keep in mind the fact that most people use this functionality separately, consistency with naming and function is key when jumping from one version to the next so that things don't break for those not using these different elements together, but separately. Plus pigeon holing off canvas as just a navigational item is limiting what it can do. You can use it for flying in content from off page as well. Not saying that you are not grateful, just trying to give some insight as to why they are better on their own.

Posts Followed





Following

    No Content

Followers

My Posts

My Comments

You commented on marek's post about 2 years

I believe the current configuration is correct and better than F5, after all if you want to make it similar to F5, throw in an additional set of overrides!Agree with Rafi, I have used the new F6 modal and needed it to scroll, everything worked well out of the box.

You commented on Patrick Fraley's post almost 5 years

ckeditor is infact a great Rich Text Editor for Foundation and if you don't believe me, take a look at it in action here:

http://appstigate.com/smarteradmin/editor.html

That is a Foundation template that uses ckeditor. Will you have to do some tweaking YES, but you are not going to find an implementation of a Rich Text Editor that you will not have to tweak to fit your needs.

I have not used this next one, but http://quilljs.com/ is supposed to be great, but none of these are made for use with foundation. They are made for use with web apps, oh wait if you're using Foundation, you are probably building a web app.

A question like this is more suited for a Bootstrap forum. Foundation is not your all inclusive framework and there is no reason they would build a Foundation Rich Text Editor, it's too specific.

You commented on Jenny Shoars's post over 5 years

I tried the above solution with no results. I even removed the row-collapse which I think you meant to do on the second case example. I also tried

.column  .nopadding { padding: 0 0 0 0 } 

and

.column >  .nopadding { padding: 0 0 0 0 } 

putting a space between the two classes and a child extender (or whatever that is called). I also tried instead of using padding on the columns to instead use margin on the buttons but had no positive results. IN all of these cases I hade ZERO change in the output, as if there were no changes at all to the output. A lot of us would much rather use the normal grid instead of block-grid which uses. But I eventually had to use block grid to get anything close to what I wanted. But I'd rather use the normal grid SEE below

Can someone please help with this issue? We need a good way that we can selectively remove gutters and add custom padding. My purpose for using this is to create custom buttons that expand the full length of the div they are in to create a gird of buttons that are all the same size for use on mobile phones. Something like below:

This is what I want to use

<div class="row collapse show-for-small-only">
   <div class="small-6 columns"><a href="#" class="tiny button expand nopadding">Menu</a>
   </div>
   <div class="small-6 columns"><a href="#" class="tiny button expand nopadding">Delivery</a>
   </div>
   <div class="small-6 columns"><a href="#" class="tiny button expand nopadding">Dining</a>
   </div>
   <div class="small-6 columns"><a href="#" class="tiny button expand nopadding">Trans</a></div>
</div>

OR using block-grid

<div class="show-for-small-only">
   <ul class="small-block-grid-2">
     <li><a href="#" class="tiny button radius expand">Menu</a></li>
     <li><a href="#" class="tiny button radius expand">Delivery</a></li>
     <li><a href="#" class="tiny button radius expand">Dining</a></li>
     <li><a href="#" class="tiny button radius expand">Transportation</a></li>
   </ul>
</div>

To top it all off, If I could get the normal grid to work in this fashion, I would also like to figure out how to make the buttons expand to height as well. That is not as important. But desirable.

You commented on Adam D's post over 5 years

Looks like the PR has been merged, I have a sticky top-bar and a sticky magellan. I'd like to offset the magellan 60 pixels below the top of the screen as my top-bar is 60 pixels high. What do I need to do? I have updated my magellan.js file with the Pull Request changes. But none of the methods above are working for me either.

You commented on Eric Bishard's post over 5 years

Thats a lot of stuff to put in code pen. THis is a fairly simple question I would think. THere are only so many settings in Top-Bar. Just wondering why I get a color of #333 after I have set the above settings to be different colors. My code is setup correctly or I wouldn't have the other settings being overridden.

You commented on Peter Graff's post almost 6 years

@PeterGraff SO I implemented your navigation-Hybrid. I changed it up a bit, also added [Contain to Grid] wrapped around the Top-Bar section since I use the standard grid foundation provides. Nice work!

You commented on Peter Garner's post almost 6 years

I love it, it's like a little slice of stackOverflow. Just the good parts.

You commented on Rubén Santacruz's post almost 6 years

It's not a bug. Although it is the preferred way of importing normalize when using SCSS in Rails. They made it available for convenience, but didn't include it in the generator since normalize is technically an optional add-on, not a dependancy.

This statement is from elm232 @github.

In your foundation overrides file you should do something like this:

@import 'normalize';
@import 'foundation';

The github link provided above gives some insight to this issue,

You commented on Clay Hymas's post almost 6 years

The Zurb codec style guide refers to the predecessor of Foundation. Before foundation was foundation it was called the Zurb coded style guide. Eventually it became Foundation 1.0 which was not responsive. If it were available now (which I am most certain it is not) it would be a stripped down and dated version of Foundation that is not relevant anymore. The Zurb coded style guide was the jumping off point for both Foundation and Bootstrap. Johnathan Smiley and Mark Otto were both involved in the creation of this style guide. If you really wanted this legacy piece of code I would contact Johnathan on twitter and ask him if there is a copy laying around and if so, it may not be something they are releasing to the public.

As for the reason for loading the scripts at the bottom (anyone correct me if I am wrong). You don't want your javascript loading at the same time as the page being drawn and sharing its load time with other processes. This would create lag in the responsiveness of items that rely on those javascripts like orbit or interchange or anything javascript for that matter. Keep it at the bottom for performance reasons! I'm sure there are a few other reasons why it's a good idea, but that seems the most glaring reason to me.

Loading at the bottom improve render times of your page, it enables progressive rendering, you know that if the page render finally makes it to your javascript code that the necessary page elements have usually loaded already.

When you have scripts loading in your header they stop other downloads from taking place! This includes your styling, and will also stop your images from downloading until the script has finished.

This is because JavaScript files load synchronously.

You commented on Peter Graff's post almost 6 years

Off canvas was just a playground add-on in F4, so the fact that it is baked in is a huge plus in F5. This makes it a lot more accessible for those of use using ASP.Net or Rails and a package manager/asset pipeline type installation. Top-bar was their original navigation element and completely separate from off canvas. While I do agree a hybrid style nav using the best of both features is a great idea We should be happy that it was included in the framework. Just because they do something on their site doesn't mean that it should be default. You have to keep in mind the fact that most people use this functionality separately, consistency with naming and function is key when jumping from one version to the next so that things don't break for those not using these different elements together, but separately. Plus pigeon holing off canvas as just a navigational item is limiting what it can do. You can use it for flying in content from off page as well. Not saying that you are not grateful, just trying to give some insight as to why they are better on their own.

Posts Followed

Following

  • No Content

Followers

  • No Content