feat: migrate from Foundation to Fomantic-UI

Swap foundation-rails for fomantic-ui-sass across the gem's own
layout/menu/alerts partials and all 11 generic scaffold resources
(pages, news, faqs, quotes, images, directories, keywords, yml_files,
contact_forms, newsletter_subscriptions, users). Foundation grid/button
classes replaced with Fomantic ui.form/ui.button/ui.table conventions;
legacy Foundation mixins in the custom component sass (panel, button,
grid-row/grid-column) rewritten as plain CSS since they no longer exist
once foundation_and_overrides.scss is gone.

Also fixes a real bug found along the way: boolean_text used
`.present?` on values, but SimplyCouch stores booleans as the strings
"0"/"1" — and "0".present? is true in Ruby, so it always rendered
"Yes" regardless of actual value. Now uses ActiveModel::Type::Boolean.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

app/assets/javascripts/cmtool/application.js.coffee

@@ -1,6 +1,6 @@
 #= require jquery
 #= require jquery_ujs
-#= require foundation
+#= require semantic-ui
 #= require ace/ace
 #= require moment
 #= require ace/theme-monokai
@@ -19,7 +19,9 @@
 #= require_self
 
 $ ->
-  $(document).foundation()
+  $('.ui.dropdown').dropdown()
+  $('.ui.checkbox').checkbox()
+  $('.message .close.icon').on 'click', -> $(@).closest('.message').transition('fade')
   collapsible.setup()
   html_edit.setup()
   yml_edit.setup()
@@ -38,7 +40,7 @@ $ ->
       layout: $('#page_layout').val()
     $.post url, page: params, (response)->
       iframe.attr 'src', url
-      $('#preview-modal').foundation('reveal', 'open')
+      $('#preview-modal').modal('show')
     false
 
   $("[data-time]").each ->

app/assets/stylesheets/cmtool/application.sass

@@ -1,8 +1,7 @@
 //= require pickadate/default
 //= require pickadate/default.date
 //= require pickadate/default.time
-@import font-awesome
-@import ./foundation_and_overrides
+@import semantic-ui
 @import ./structure
 @import ./components/*
 @import ./locale

app/assets/stylesheets/cmtool/components/_buttons.sass

@@ -1,12 +1,25 @@
+// Legacy button hooks kept for cmtool scaffold views not yet converted to
+// Fomantic `ui button` classes. Colors match Fomantic's default palette.
+=legacy-button($bg: #1b1c1d)
+  display: inline-block
+  padding: 0.78571429em 1.5em
+  background: $bg
+  color: white
+  border: none
+  border-radius: 0.28571429rem
+  cursor: pointer
+  &:hover
+    opacity: 0.85
+
 .to-index-button
-  +button($bg: $secondary-color)
+  +legacy-button($bg: #767676)
 .record-show-button
-  +button($bg: $info-color)
+  +legacy-button($bg: #31ccec)
 .record-new-button
-  +button
+  +legacy-button
 .record-edit-button
-  +button($bg: $warning-color)
+  +legacy-button($bg: #fbbd08)
 .record-destroy-button
-  +button($bg: $alert-color)
+  +legacy-button($bg: #db2828)
 .form-submit-button
-  +button
+  +legacy-button

app/assets/stylesheets/cmtool/components/_collapsible.sass

@@ -4,10 +4,13 @@
     font-weight: bold
     cursor: pointer
     span
-      @extend .fa, .fa-arrow-down
+      &:before
+        content: "\25BC"
+        margin-right: 0.5em
   &.collapsed
     .collapsible-title
       span
-        @extend .fa, .fa-arrow-right
+        &:before
+          content: "\25B6"
     .collapsible-content
       display: none

app/assets/stylesheets/cmtool/components/_forms.sass

@@ -1,30 +1,20 @@
 .form-row
-  +grid-row
+  display: flex
+  flex-wrap: wrap
+  align-items: flex-start
+  gap: 1em
+  margin-bottom: 0.5em
   .form-label
-    @media #{$small-only}
-      +grid-column($columns:10, $center:true)
-    @media #{$medium-only}
-      +grid-column($columns:4, $offset:1)
-    @media #{$large-up}
-      +grid-column(3)
-    &.half
-      +grid-column(6)
+    flex: 0 0 200px
+    max-width: 100%
+    padding-top: 0.5em
   .form-field
-    @media #{$small-only}
-      +grid-column($columns:10, $center:true, $last-column:true)
-    @media #{$medium-only}
-      +grid-column($columns:4, $last-column:true)
-    @media #{$large-up}
-      +grid-column($columns: 3, $last-column:true)
+    flex: 1 1 300px
+    max-width: 100%
     &.full
-      @media #{$small-only}
-        +grid-column($columns:10, $center:true, $last-column:true)
-      @media #{$medium-only}
-        +grid-column($columns:6, $last-column:true)
-      @media #{$large-up}
-        +grid-column($columns: 9, $last-column:true)
+      flex-basis: 100%
     &.half
-      +grid-column(6)
+      flex-basis: 45%
   &.form-actions
     padding-top: 12px
 body
@@ -37,9 +27,17 @@ body
       width: 60px
       display: inline-block
   .apply-filter
-    +button($bg: $primary-color, $padding: $button-tny)
+    display: inline-block
+    padding: 0.5em 1em
+    background: #2185d0
+    color: white
+    border: none
+    border-radius: 0.28571429rem
+    cursor: pointer
+    &:hover
+      opacity: 0.85
   .error
     input, textarea
-      border-color: $alert-color
+      border-color: #db2828
   input[type="number"]
     text-align: right

app/assets/stylesheets/cmtool/structure.sass

@@ -1,10 +1,25 @@
 .clear
   clear: both
 
+// Generic scaffold show pages: `.show_field > strong + value`
+.show_field
+  padding: 0.5em 0
+  border-bottom: 1px solid rgba(34, 36, 38, 0.1)
+  strong
+    display: inline-block
+    min-width: 160px
+    margin-right: 1em
+
 #sub-navigation-container
   margin-top: 20px
-  +panel()
-  +clearfix()
+  padding: 1em
+  background: #f8f8f8
+  border: 1px solid rgba(34, 36, 38, 0.15)
+  border-radius: 0.28571429rem
+  &:after
+    content: ""
+    display: table
+    clear: both
   ul
     list-style: none
     margin: 0

app/helpers/cmtool/application_helper.rb

@@ -61,7 +61,7 @@ module Cmtool
     end
 
     def boolean_text(yes)
-      yes.present? ? t('cmtool.general.yes') : t('cmtool.general.no')
+      ActiveModel::Type::Boolean.new.cast(yes) ? t('cmtool.general.yes') : t('cmtool.general.no')
     end
     def empty_result(model)
       t('cmtool.general.empty_result', models: model.model_name.human_plural.downcase )
@@ -132,6 +132,30 @@ module Cmtool
       controller.respond_to?(:cmtool_user) ? controller.send(:cmtool_user) :nil
     end
 
+    # Path prefixes matching how the consuming app's translations.js.coffee.erb
+    # builds $translations: each top-level JS key is sourced from a different
+    # Rails i18n scope. Keep in sync with that file.
+    TSPAN_NAMESPACE_PREFIXES = {
+      'models'     => 'activemodel.models',
+      'attributes' => 'activemodel.attributes',
+      'helpers'    => 'helpers',
+      'pagination' => 'views.pagination',
+      'errors'     => 'errors',
+    }.freeze
+
+    # Client-resolved translation span, mirroring the JS `tspan` helper in
+    # translations.js.coffee.erb. Renders the raw (possibly ${...}-templated)
+    # server-side translation as initial content, tagged with data-t so the
+    # page's on-load JS can resolve nested ${...} references client-side.
+    #   tspan 'attributes.supplier.name' # => <span data-t="attributes.supplier.name" class="translation">${models.supplier} name</span>
+    def tspan(path, vars = {})
+      namespace, rest = path.split('.', 2)
+      prefix = TSPAN_NAMESPACE_PREFIXES.fetch(namespace, namespace)
+      full_key = rest ? "#{prefix}.#{rest}" : prefix
+      text = I18n.t(full_key, **vars)
+      content_tag(:span, text, class: 'translation', data: { t: path, t_attributes: vars.to_json })
+    end
+
     def edit_td(obj, options = {})
       path = options[:path] || case obj
         when Array then edit_polymorphic_path(obj)
@@ -140,7 +164,7 @@ module Cmtool
       end
       content_tag(
         :td,
-        link_to((content_tag(:span, '', class: [:edit, 'fa fa-lg fa-pencil'])), path, class: 'tiny warning button'),
+        link_to(content_tag(:i, nil, class: 'write icon'), path, class: 'edit ui mini basic yellow icon button'),
         class: [:action, :edit]
       )
     end
@@ -154,7 +178,7 @@ module Cmtool
 
       content_tag(
         :td,
-        link_to(content_tag(:span, '', class: [:destroy, 'fa fa-lg fa-trash']), path, method: :delete, class: 'tiny alert button', data: {confirm: are_you_sure(obj) }),
+        link_to(content_tag(:i, nil, class: 'trash icon'), path, method: :delete, class: 'destroy ui mini negative icon button', data: {confirm: are_you_sure(obj) }),
         class: [:action, :destroy]
       )
     end

app/views/cmtool/application/_alerts.html.slim

@@ -1,16 +1,17 @@
 - if flash[:alert].present?
-  .row: .small-12.columns.alert-box.alert data-alert=true
+  .ui.negative.message
+    i.close.icon
     = flash[:alert]
-    a.close href="" ×
 - if flash[:notice].present?
-  .row: .small-12.columns.alert-box.info data-alert=true
+  .ui.positive.message
+    i.close.icon
     = flash[:notice]
-    a.close href="" ×
 - if warnings.any?
-  .row: .small-12.columns.alert-box.warning data-alert=true
-    ul
+  .ui.warning.message
+    i.close.icon
+    ul.list
       - for warning in warnings
         - if warning.is_a?(Hash)
-          li.warning= t("cmtool.warnings.#{warning.delete(:message)}", warning)
+          li= t("cmtool.warnings.#{warning.delete(:message)}", warning)
         - else
-          li.warning= t("cmtool.warnings.#{warning}")
+          li= t("cmtool.warnings.#{warning}")

app/views/cmtool/application/_menu.html.slim

@@ -1,32 +1,25 @@
 - user = defined?(cmtool_user) ? cmtool_user : (defined?(current_user) ? current_user : nil)
-.fixed
-  nav.top-bar data-topbar="" role="navigation"
-    ul.title-area
-      li.name
-        h1
-          a href=cmtool.root_path = application_title
-      li.toggle-topbar.menu-icon
-        a href="#"
-          span Menu
-    section.top-bar-section
-      - if user.present?
-        ul.right
-          li.has-dropdown
-            a href="#" = user.email
-            ul.dropdown
-              li.log-out= link_to t('helpers.links.logout'), main_app.root_path
-      ul.left
+.ui.inverted.menu
+  = link_to application_title, cmtool.root_path, class: 'header item'
   - Cmtool::Menu.items.each do |menu_item|
     - if menu_item.group?
-            li.has-dropdown class=(menu_item.controller_names.include?(controller_name) ? 'active' : '')
-              a href="#" = menu_item.title
-              ul.dropdown
+      .ui.dropdown.item class=(menu_item.controller_names.include?(controller_name) ? 'active' : nil)
+        = menu_item.title
+        i.dropdown.icon
+        .menu
           - menu_item.items.compact.each do |child_item|
             - if child_item.divider?
-                    li.divider
+              .divider
             - else
-                    li class=(controller_name == child_item.controller_name ? 'active' : '') = link_to child_item.title, child_item.path
+              = link_to child_item.title, child_item.path, class: ['item', (controller_name == child_item.controller_name ? 'active' : nil)]
     - elsif menu_item.resource_link?
-            li class=(menu_item.controller_name == controller_name ? 'active' : '') = link_to menu_item.title, menu_item.path
+      = link_to menu_item.title, menu_item.path, class: ['item', (menu_item.controller_name == controller_name ? 'active' : nil)]
     - elsif menu_item.engine_link?
-            li= link_to menu_item.title, menu_item.path
+      = link_to menu_item.title, menu_item.path, class: 'item'
+  .right.menu
+    - if user.present?
+      .ui.dropdown.item
+        span= user.email
+        i.dropdown.icon
+        .menu
+          = link_to t('helpers.links.logout'), main_app.root_path, class: 'item'

app/views/cmtool/contact_forms/_form.html.slim

@@ -1,4 +1,4 @@
-= form_for [cmtool, @contact_form] do |f|
+= form_for [cmtool, @contact_form], html: {class: 'ui form'} do |f|
   = render 'error_messages', :target => @contact_form
 
   .field
@@ -17,4 +17,4 @@
     = f.label :body
     = f.text_area :body, class: :editor_full
   .actions
-    = f.submit @submit || update_button_text(@contact_form)
+    = f.submit @submit || update_button_text(@contact_form), class: 'ui primary button'

app/views/cmtool/contact_forms/index.html.slim

@@ -1,6 +1,6 @@
 - title :index, Cmtool::ContactForm
 - if @contact_forms.any?
-  table.index-table.table.table-striped.table-hover
+  table.ui.celled.table
     thead
       tr
         th= Cmtool::ContactForm.human_attribute_name(:gender)

app/views/cmtool/directories/_form.html.slim

@@ -1,4 +1,4 @@
-= form_for [cmtool, @directory], :html => {:multipart => true} do |f|
+= form_for [cmtool, @directory], :html => {:multipart => true, :class => 'ui form'} do |f|
   = render 'error_messages', :target => @directory
   .field
     = f.label :name
@@ -7,4 +7,4 @@
     = f.label :parent_id, Cmtool::Directory.model_name.human
     = f.select :parent_id, tree_options_for_select(Cmtool::Directory.full_tree, exclude: @directory.id, selected: @directory.parent_id), include_blank: ''
   .actions
-    = f.submit @submit || update_button_text(@directory)
+    = f.submit @submit || update_button_text(@directory), class: 'ui primary button'

app/views/cmtool/directories/index.html.slim

@@ -1,6 +1,6 @@
 - title :index, Cmtool::Directory
 - if @directories.any?
-  table.index-table.table.table-striped.table-hover
+  table.ui.celled.table
     thead
       tr
         th= Cmtool::Directory.human_attribute_name(:name)

app/views/cmtool/faqs/_form.html.slim

@@ -1,4 +1,4 @@
-= form_for [cmtool, @faq] do |f|
+= form_for [cmtool, @faq], html: {class: 'ui form'} do |f|
   = render 'error_messages', :target => @faq
 
   .field
@@ -8,4 +8,4 @@
     = f.label :answer
     = f.text_area :answer, :rows => 6, :class => 'editor_basic'
   .actions
-    = f.submit @submit || update_button_text(@faq)
+    = f.submit @submit || update_button_text(@faq), class: 'ui primary button'

app/views/cmtool/faqs/index.html.slim

@@ -1,6 +1,6 @@
 - title :index, Cmtool::Faq
 - if @faqs.any?
-  table.index-table.table.table-striped.table-hover
+  table.ui.celled.table
     thead
       tr
         th= Cmtool::Faq.human_attribute_name(:question)

app/views/cmtool/images/_form.html.slim

@@ -1,4 +1,4 @@
-= form_for [cmtool, @image], html: {multipart: true} do |f|
+= form_for [cmtool, @image], html: {multipart: true, class: 'ui form'} do |f|
   = render 'error_messages', target: @image
 
   .field
@@ -9,4 +9,4 @@
     = f.select :directory_id, Cmtool::Directory.all.map{|d| ["-"*d.tree_depth + ' ' + d.name.to_s, d.id]}
 
   .actions
-    = f.submit @submit || update_button_text(@image)
+    = f.submit @submit || update_button_text(@image), class: 'ui primary button'

app/views/cmtool/images/index.html.slim

@@ -1,6 +1,6 @@
 - title :index, Cmtool::Image
 - if @images.any?
-  table.index-table.table.table-striped.table-hover
+  table.ui.celled.table
     thead
       tr
         th= Cmtool::Image.model_name.human

app/views/cmtool/keywords/_form.html.slim

@@ -1,7 +1,7 @@
-= form_for [cmtool, @keyword] do |f|
+= form_for [cmtool, @keyword], html: {class: 'ui form'} do |f|
   = render 'error_messages', :target => @keyword
   .form-row
     .form-label= f.label :name
     .form-field= f.text_field :name
   .form-row: .form-actions
-    = f.submit @submit || update_button_text(@keyword), class: 'form-submit-button'
+    = f.submit @submit || update_button_text(@keyword), class: 'ui primary button'

app/views/cmtool/keywords/index.html.slim

@@ -1,6 +1,6 @@
 - title :index, Cmtool::Keyword
 - if @keywords.any?
-  table.index-table.table.table-striped.table-hover
+  table.ui.celled.table
     thead
       tr
         th= Cmtool::Keyword.human_attribute_name(:name)

app/views/cmtool/news/_form.html.slim

@@ -1,4 +1,4 @@
-= form_for [cmtool, @news], html: {multipart: true} do |f|
+= form_for [cmtool, @news], html: {multipart: true, class: 'ui form'} do |f|
   = render 'error_messages', target: @news
   .field
     = f.label :title
@@ -19,4 +19,4 @@
   .field
     = render "cmtool/keywords/habtm", subject: @news
   .actions
-    = f.submit @submit || update_button_text(@news)
+    = f.submit @submit || update_button_text(@news), class: 'ui primary button'

app/views/cmtool/news/index.html.slim

@@ -1,6 +1,6 @@
 - title :index, Cmtool::News
 - if @news.any?
-  table.index-table.table.table-striped.table-hover
+  table.ui.celled.table
     thead
       tr
         th= Cmtool::News.human_attribute_name(:title)

app/views/cmtool/newsletter_subscriptions/_form.html.slim

@@ -1,4 +1,4 @@
-= form_for [cmtool, @newsletter_subscription] do |f|
+= form_for [cmtool, @newsletter_subscription], html: {class: 'ui form'} do |f|
   = render 'error_messages', :target => @newsletter_subscription
 
   .field
@@ -8,4 +8,4 @@
     = f.label :active
     = f.check_box :active
   .actions
-    = f.submit @submit || update_button_text(@newsletter_subscription)
+    = f.submit @submit || update_button_text(@newsletter_subscription), class: 'ui primary button'

app/views/cmtool/newsletter_subscriptions/index.html.slim

@@ -1,6 +1,6 @@
 - title :index, Cmtool::NewsletterSubscription
 - if @newsletter_subscriptions.any?
-  table.index-table.table.table-striped.table-hover
+  table.ui.celled.table
     thead
       tr
         th= Cmtool::NewsletterSubscription.human_attribute_name(:email)

app/views/cmtool/pages/_form.html.slim

@@ -1,9 +1,10 @@
 javascript:
   page_vars = #{Cmtool::YmlFile.all_as_object.to_json.html_safe};
-#preview-modal.reveal-modal.large data-reveal=""
+#preview-modal.ui.large.modal
+  i.close.icon
+  .content
     iframe allowfullscreen="" frameborder="0" height="100%" src="about:blank" width="100%"
-  a.close-reveal-modal ×
-= form_for [cmtool, @page] do |f|
+= form_for [cmtool, @page], html: {class: 'ui form'} do |f|
   = render 'error_messages', target: @page
   .form-row
     .form-label= f.label :name
@@ -58,5 +59,5 @@ javascript:
   .field
     = render "cmtool/keywords/habtm", subject: @page
   .form-row: .form-actions
-    = f.submit @submit || update_button_text(f.object), class: 'button'
+    = f.submit @submit || update_button_text(f.object), class: 'ui primary button'
     -#= button_tag 'Preview (unsupported)', onclick: %{$('form').attr('action', '/' + $('#page_name').val()).submit();}

app/views/cmtool/pages/index.html.slim

@@ -1,5 +1,5 @@
 - title :index, Page
-table.index-table.table.table-striped.table-hover
+table.ui.celled.table
   thead
     tr
       th= Page.human_attribute_name(:name)

app/views/cmtool/quotes/_form.html.slim

@@ -1,4 +1,4 @@
-= form_for [cmtool, @quote], html: {multipart: true} do |f|
+= form_for [cmtool, @quote], html: {multipart: true, class: 'ui form'} do |f|
   = render 'error_messages', target: @quote
   .field
     = f.label :owner
@@ -19,4 +19,4 @@
     = f.label :active
     = f.check_box :active
   .actions
-    = f.submit @submit || update_button_text(@quote)
+    = f.submit @submit || update_button_text(@quote), class: 'ui primary button'

app/views/cmtool/quotes/index.html.slim

@@ -1,6 +1,6 @@
 - title :index, Cmtool::Quote
 - if @quotes.any?
-  table.index-table.table.table-striped.table-hover
+  table.ui.celled.table
     thead
       tr
         th= Cmtool::Quote.human_attribute_name(:owner)

app/views/cmtool/users/_form.html.slim

@@ -1,4 +1,4 @@
-= form_for [cmtool, @user] do |f|
+= form_for [cmtool, @user], html: {class: 'ui form'} do |f|
   = render 'error_messages', :target => @user
 
   .field
@@ -24,4 +24,4 @@
         = f.label :admin
         = f.check_box :admin
   .actions
-    = f.submit @submit || update_button_text(@user)
+    = f.submit @submit || update_button_text(@user), class: 'ui primary button'

app/views/cmtool/users/index.html.slim

@@ -1,6 +1,6 @@
 - title :index, User
 - if @users.any?
-  table.index-table
+  table.ui.celled.table
     thead
       tr
         th= User.human_attribute_name(:email)

app/views/cmtool/yml_files/_form.html.slim

@@ -1,4 +1,4 @@
-= form_for [cmtool, @yml_file] do |f|
+= form_for [cmtool, @yml_file], html: {class: 'ui form'} do |f|
   = render 'error_messages', :target => @yml_file
   .form-row
     .form-label= f.label :name
@@ -6,4 +6,4 @@
   .form-row
     = f.text_area :body, class: 'yml-content'
   .form-row: .form-actions
-    = f.submit @submit || update_button_text(@yml_file), class: 'form-submit-button'
+    = f.submit @submit || update_button_text(@yml_file), class: 'ui primary button'

app/views/cmtool/yml_files/index.html.slim

@@ -1,6 +1,6 @@
 - title :index, Cmtool::YmlFile
 - if @yml_files.any?
-  table.index-table.table.table-striped.table-hover
+  table.ui.celled.table
     thead
       tr
         th= Cmtool::YmlFile.human_attribute_name(:name)

app/views/layouts/cmtool/application.html.slim

@@ -24,21 +24,22 @@ html lang="en"
 
   body
     = render 'cmtool/application/menu'
+    .ui.container
       = render 'cmtool/application/alerts'
-    .row
-      .small-12.large-9.columns
-        h3= content_for?(:page_title) ? yield(:page_title) : application_title
+      .ui.grid
+        .twelve.wide.column
+          h3.ui.header= content_for?(:page_title) ? yield(:page_title) : application_title
           = content_for?(:content) ? yield(:content) : yield
           - if content_for?(:page_links)
             #sub-navigation-container= yield(:page_links)
-      .show-for-large-up.large-3.columns
-        .panel
-          h4 Links
-          ul.side-nav
-            li= link_to "Home", cmtool.root_path
-            li= link_to 'Wiki', 'https://github.com/bterkuile/cmtool/wiki', target: :_blank
+        .four.wide.column
+          .ui.segment
+            h4.ui.header Links
+            .ui.link.list
+              a.item href=cmtool.root_path Home
+              a.item href="https://github.com/bterkuile/cmtool/wiki" target="_blank" Wiki
           = yield :sidebar
-    footer
+      footer.ui.footer
         p
           span © Cmtool
           span= Date.today.year

cmtool.gemspec

@@ -23,7 +23,7 @@ Gem::Specification.new do |s|
   s.add_runtime_dependency "slim-rails", ">= 0"
   # s.add_runtime_dependency "tinymce-rails", ">= 0"
   s.add_runtime_dependency "jquery-rails", ">= 0"
-  s.add_runtime_dependency "foundation-rails", ">= 0"
+  s.add_runtime_dependency "fomantic-ui-sass", ">= 0"
   s.add_runtime_dependency "ace-rails-ap", ">= 0"
   s.add_runtime_dependency "font-awesome-rails", ">= 0"
   s.add_runtime_dependency "pickadate-rails", ">= 0"