Recent Comments

Pssst: sed 's/speces/spaces/g'

Hello!

What about Resource Routes with segment keys? I can't seem to get thing to work in that particular case. Please review: http://stackoverflow.com/questions/17201127/how-can-i-use-private-pub-with-a-resource-route-that-has-a-segment-key

Awesome, thanks!

You don't need to change the import at the bottom. On line #63 of the foundation_and_overrides.scss file there is a list of all the modules and you can just set the one you don't want to false and they'll be excluded.

Respond.js will make Foundation work. I would suggest adding it right after your stylesheets to prevent flash.

Also for IE7 support you will need the box-sizing polyfill found here https://github.com/Schepp/box-sizing-polyfill

For those using turbolinks, you will need to modify the application layout to include all assets in the header. Foundation includes javascript in the body by default.

I wonder if there is also a way to add custom select box without wrapping it in tag?

ok cool, that worked. i just did:

$(document).foundation().foundation("reveal",
{
    opened: function(data) {
        $(document).foundation('forms', 'assemble');
    }
});

Excellent screencast,
I've been using it for a while, imho bootstrap is easier to use, but foundation is easier to customize

if your form is preloaded with the page it should work. Foundation uses javascript to create custom select, checkboxes and radiobuttons, if you load it on demand you need to run the custom-form javascript after.

Example:

$(document).foundation('forms', 'assemble');

For more information check Foundation - Javascript

Spent whole day attempting to adapt Foundation to my existing application with simple_form. Nothing is works out of box, and documentation for Twitter Bootstrap is way better.

@FabricioFlores, have you been able to address the filter chain halted issue. I am having the same problem. What is the fix?

Wow, just had a look at Interface Kit (InK), it's really nice. I think I prefer it over Twitter Bootstrap. I looked at Zurb Foundation quite a while back, might need to re-evaluate it too. Thanks for sharing!

Are there any good reasons why psubscribe wouldn't work in the latest Rails4.rc1?

The rest of the tutorial's working a treat, I just cannot for the life of me figure out psub..

I am trying to pass this polling off to a web worker because my UI is not responsive for the duration of the polling. I am stuck on calling the ajax request and then returning that to the main thread so that I can append it.

Has anyone else moved something like this to a web worker? If so, how?

Hello,

I had some trouble getting custom jobs to work.
Requiring the job.rb file was not enough, I had to configure autoload paths.

Placing my jobs in #{root}/jobs and setting this in application.rb did the trick!

config.autoload_paths += %W(#{config.root}/jobs)

Thanks! Saved me some time working this out.

Please check my issues at Stackoverflow

http://stackoverflow.com/questions/17168782/rubber-and-amazon-ec2-ror-hosting-issue

debugger don't work properly with ruby 2.0. Try this https://github.com/deivid-rodriguez/byebug. It's almost the same. But it don't work with ruby 1.9.x. For ruby 1.9.3 works debugger fine.

Mr. Bates, this is awesome. Thanks very much. :)

I solved this problem, but now I got another problem

c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/lib/excon/midd
lewares/expects.rb:10:inresponse_call': MissingParameter => Source group ID mi
ssing. (Fog::Compute::AWS::Error)
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/connection.rb:353:in response'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/connection.rb:247:inrequest'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/middlewares/idempotent.rb:12:in error_call'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/middlewares/base.rb:10:inerror_call'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/connection.rb:260:in rescue in request'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/connection.rb:220:inrequest'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/middlewares/idempotent.rb:12:in error_call'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/middlewares/base.rb:10:inerror_call'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/connection.rb:260:in rescue in request'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/connection.rb:220:inrequest'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/middlewares/idempotent.rb:12:in error_call'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/middlewares/base.rb:10:inerror_call'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/connection.rb:260:in rescue in request'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/connection.rb:220:inrequest'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/fog-1.12.1/lib
/fog/core/connection.rb:25:in request'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/fog-1.12.1/lib
/fog/aws/compute.rb:385:in_request'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/fog-1.12.1/lib
/fog/aws/compute.rb:380:in request'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/fog-1.12.1/lib
/fog/aws/requests/compute/revoke_security_group_ingress.rb:54:inrevoke_securit
y_group_ingress'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/fog-1.12.1/lib
/fog/aws/models/compute/security_group.rb:218:in revoke_port_range'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/cloud/aws.rb:381:inremove_security_group_rule'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/cloud/aws.rb:454:in block (2 levels) in sync_security_groups'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/cloud/aws.rb:437:ineach'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/cloud/aws.rb:437:in block in sync_security_groups'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/cloud/aws.rb:393:ineach'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/cloud/aws.rb:393:in sync_security_groups'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/cloud/aws.rb:254:insetup_security_groups'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/cloud/aws.rb:72:in before_create_instance'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/thread_safe_proxy.rb:13:inmethod_missing'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/recipes/rubber/instances.rb:267:in block in create_instance'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/1.9.1/monitor.rb:211:inmon_s
ynchronize'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/recipes/rubber/instances.rb:266:in create_instance'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/recipes/rubber/instances.rb:230:inblock (2 levels) in create_instanc
es'

I also got same error. You found any solution ??

Hi
I followed this tutorial, but I found error.

c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/lib/excon/midd
lewares/expects.rb:10:inresponse_call': The key pair 'ginfy' does not exist (F
og::Compute::AWS::NotFound)
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/connection.rb:353:in response'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/excon-0.23.0/l
ib/excon/connection.rb:247:inrequest'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/fog-1.12.1/lib
/fog/core/connection.rb:25:in request'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/fog-1.12.1/lib
/fog/aws/compute.rb:385:in_request'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/fog-1.12.1/lib
/fog/aws/compute.rb:380:in request'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/fog-1.12.1/lib
/fog/aws/requests/compute/run_instances.rb:119:inrun_instances'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/fog-1.12.1/lib
/fog/aws/models/compute/server.rb:179:in save'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/fog-1.12.1/lib
/fog/core/collection.rb:52:increate'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/cloud/fog.rb:30:in create_instance'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/thread_safe_proxy.rb:13:inmethod_missing'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/recipes/rubber/instances.rb:311:in create_instance'
from c:/RailsInstaller/Ruby1.9.3/lib/ruby/gems/1.9.1/gems/rubber-2.5.2/l
ib/rubber/recipes/rubber/instances.rb:230:inblock (2 levels) in create_instanc
es'

Why it is not found my key-pair pem file? Please help.

Could you tell me how did you float image above the paragraphs.In my refinery WYMediator, image couldn't be placed the postion I want it.

I followed through the debugger and discovered it is not a MiniTest issue. The message is coming from ActiveSupport::Testing::TaggedLogging.

All fixed!

I'm having a blast with MiniTest, thanks for the cast to get me started.

BTW, does anyone know what the heck is going on here? I cant get rid of these INFO logs when running rake test:

Run options: --seed 49565

# Running tests:

I, [2013-06-17T20:13:58.081793 #4983] INFO -- : ------------------------
I, [2013-06-17T20:13:58.081875 #4983] INFO -- : UserTest: test_the_truth
I, [2013-06-17T20:13:58.081903 #4983] INFO -- : ------------------------
.

Finished tests in 0.004575s, 218.5792 tests/s, 218.5792 assertions/s.

1 tests, 1 assertions, 0 failures, 0 errors, 0 skips

The INFO log shows up for every test.

-1 for the Presenters.

Awesome screencast. For anyone attending LoneStarRuby we'll be running a Foundation training on Thursday morning.

No, I didn't know that those exist!

Thank you!

I too was hoping this episode would touch on using mixins and what some best practices might be. Personally I think mixins are the killer feature Foundation has over Bootstrap. Great screencast nonetheless and thank you Ryan for putting it together, here's to hoping for a PRO episode for semantic Foundation :-D

I too was hoping this episode would touch on using mixins and what some best practices might be. Personally I think mixins are the killer feature Foundation has over Bootstrap. Great screencast nonetheless and thank you Ryan for putting it together, here's to hoping for a PRO episode for semantic Foundation :-D

+1 I'm looking for a sample as well. Would be really helpful to get this kind of example because I like the forms object approach that much.

For interested in I encourage to check another solution: InK

hey, how do you open that color selection dialog?

+1 for follow up, the screencast is not very useful if it doesn't cover cancellation. Great screencast anyway!

Nice! Would like to see the Foundation's Javascript widgets compared to Bootstrap's.

Have you tried JS libraries that add media queries support to IE7 and IE8, like Respond.js?

Big fan of Foundation. Thanks for another great screencast!

Just wanted to point out a small typo on the application.html.erb code in the show notes. The section is closed with a closing div tag on line 18.

Do custom form in zurb work on ajax? I am not able to to get it to work. I have the form in reveal modal loaded using ajax. But the select boxes are not custom. Anyone have a clue?

I'm not a huge fan of simpleform this is why I did the foundation_rails_helper

Here is how I handle Simple_Form errors and foundation 4 ( by default I prefer to use field labels as prepends. Enjoy

  SimpleForm.setup do |config|
    config.wrappers :default, class: 'input row',
      hint_class: :field_with_hint, error_class: :errors do |b|
      b.use :html5
      b.use :placeholder
      b.optional :maxlength
      b.optional :pattern
      b.optional :min_max
      b.optional :readonly
  
      ## Inputs
      b.wrapper tag: :div, class: 'large-16 small-16 columns' do |c|
        c.wrapper tag: :div, class: 'row collapse' do |d|
          d.wrapper tag: :div, class: 'large-4 small-4 columns' do |e|
            e.use :label, wrap_with: {tag: :span, class: :prefix}
          end
          d.wrapper tag: :div, class: 'large-12 small-12 columns' do |e|
            e.use :input
          end
        end
        c.wrapper tag: :div, class: 'row collapse' do |d|
          d.wrapper tag: :div, class: 'large-16 small-16 columns' do |e|
            e.use :hint,  wrap_with: { tag: :span, class: :hint }
            e.use :error, wrap_with: { tag: :small, class: :error }
          end
        end
      end
    end
    config.default_wrapper = :default
    config.boolean_style = :nested
    config.button_class = 'button'
    config.error_notification_tag = :div
    config.error_notification_class = 'alert-box alert'
    config.label_class = 'control-label'
    config.form_class = :nice
    config.browser_validations = false
  end

I handle this by keeping my edits clean, and in place of the existing options. So, rather than putting all of my customizations in one place in the file, they're spread out in the locations where the options originally appeared.

Then, I accept the changes from rails generate foundation:install for the foundation_and_overrides.scss file - allowing it to overwrite my customizations. I handle the difference(s) in git, by staging/committing all the lines that don't affect me & comparing the lines that do affect my customizations.

So far, I've generally been able to discard the changes to application.html.erb - I just take a quick peek at the diff from within the rails generate foundation:install command to be sure.

That sounds like a nice feature. I wonder if there are any major downsides.

We used it on http://www.moviebreak.de/

It is a German Movie Website.

We had trouble with the mobile first aspect on IE8, because IE8 doesn't support media queries.

I hated to use !important all the time to override Foundation defaults.

One of the biggest advantage (in my opinion) of Zurb compare to Bootstrap is the customisation.
Really easy with Zurb instead of fighting with existing bootstrap styles.

https://github.com/plataformatec/simple_form#zurb-foundation-3
Event if it's foundation 3, I think it works with current version 4.
Form css haven't changed that's much.

I got following Error:
Error: A field was longer or shorter than the server allows.

Here my code:

require 'rubygems'
require 'active_merchant'
ActiveMerchant::Billing::Base.mode = :test
credit_card = ActiveMerchant::Billing::CreditCard.new(
:number => '4111286234782053',
:month => '6',
:year => '2018',
:first_name => 'xxxx',
:last_name => 'xxxxxxx',
:verification_value => '123'
)

gateway = ActiveMerchant::Billing::TrustCommerceGateway.new(
:login => "xxxxxxxxxxxxxx.xxxxxxx.com",
:password => "xxxxxxxxxx",
:signature => "xxxxxxxxxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxx"
)

response = gateway.purchase(1000, credit_card, :ip => "127.0.0.1", :billing_address => {
:name => "Test Guy",
:address1 => "123 W 423 E",
:city => "Somewhere",
:state => "CA",
:country => "US",
:zip => "88888"
}

I really like Foundation, using it for projects since version 2. However I think the biggest advantage is to move all the logic of the grid into your stylesheets, and decouple the HTML. So your HTML will not be messed up with a lot of presentational classes and the result will be a lot more semantic. Unfortunately this episode didn't show this feature at all :(

Be sure to check out the Building With Mixins section over at the Foundation Grid docs.

If you want to have error highlighting on forms, I'd recommend using simple_form, which supports Zurb by using
rails generate simple_form:install --foundation

Did you solve this problem?