Foundation 6 with Rails Simple Form

Question

Simple Form includes a Foundation 5 template.

However, I cannot find any template files modified for Foundation 6 on the web.

How well does the generated forms work with Foundation 6? Moreover, any generous share of Foundation 6 template or tips on modifying the existing template?

Chris Peters · Accepted Answer · 2016-05-01T16:37:30.667

8

I am not sure if simple_form can be configured to provide what Foundation 6 requires for fields with errors.

Until I can figure that out (if, if, if), I have this hack in place using Sass @extend:

// TODO: This is a hack to get Foundation 6 styles on simple_form 
// elements with errors.
.input.error {
  label {
    @extend .is-invalid-label;
  }

  input,
  textarea,
  select {
    @extend .is-invalid-input;
  }

  small.error {
    @extend .form-error;
    @extend .is-visible;
  }
}

Are you dissatisfied with this answer? I am too. I hope that someone can "show me up" on this with a better answer.

edited May 01 '16 at 16:37

answered Apr 29 '16 at 19:18

Chris Peters

17,918
6
49
65

Thank you Chris for being helpful :) – Gavin May 01 '16 at 09:49
@Gavin You're welcome. We can share our torment together of having wonderful `TODO`s in our apps like this one. :D – Chris Peters May 01 '16 at 16:38
@ChrisPeters so when you install simple_form, can you use the foundation 5 generator then this hack ? – Pak May 02 '16 at 15:43
@Pak That's what I did. Can't remember if I modified anything else in the generated config. – Chris Peters May 02 '16 at 20:41
@ChrisPeters is right. But I have to rename `application.css` to `application.scss` (SCSS), and add `@import 'foundation_and_overrides';` before that snippet – sequielo Aug 14 '16 at 05:22

score 1 · Answer 2 · answered Jan 10 '17 at 13:47

Just a little progress, you can set in config file simple_form.rb this:

config.wrappers .... do |c|
  ...  
  c.use :error, wrap_with: { tag: :small, class: 'form-error is-visible'
  ..
end

and error messages will be formatted .. However, I did not find solution for labels and inputs, so the @Chris's solution for labels and inputs is still needed. However, if you don't need red labels and inputs, this is sufficient

score 0 · Answer 3 · answered Apr 20 '17 at 21:09

0

To get hints (aka help text) working correctly, edit config/simple_form_foundation.rb and add:

b.use :hint,  wrap_with: { tag: :p, class: 'help-text' }

answered Apr 20 '17 at 21:09

meatrobot

795
1
6
6

Foundation 6 with Rails Simple Form

3 Answers3