Учебник по Foundation + Rails 7

Rails 7 относительно новый, поэтому сейчас я не вижу много документации по нему. Особенно по использованию Foundation в качестве CSS фреймворка в Rails 7. В этом руководстве я покажу вам, как мне удалось заставить Foundation работать.

Мы не будем использовать гем foundation-rails, он в настоящее время не обновлен. В этом уроке я буду использовать другой метод.

Убедитесь, что вы используете Rails 7.

1. Установите гем cssbundling-rails.

   1. Добавьте cssbundling-rails в свой Gemfile с помощью gem 'cssbundling-rails'.
   2. Запустите ./bin/bundle install
   3. Запустите ./bin/rails css:install:sass.

2. Установите foundation-sites

   yarn add foundation-sites
   

   Я использую yarn для этого руководства. Вы можете использовать npm для этого, но я пока предпочитаю yarn. За дополнительной информацией вы можете обратиться к сайту foundation.

3. Настройте файлы SASS.

   Скопируйте файл _settings.scss в node_modules/foundation-sites/scss/settings/_settings.scss. Затем вставьте его в app/assets/stylesheets.

   Отредактируйте новый _settings.scss. Измените строку с:

   @import  'util/util'
   

   на .

   @import '../../../node_modules/foundation-sites/scss/util/util'
   

   Создайте foundation_and_overrides.scss в app/assets/stylesheets со следующим кодом:

   @charset 'utf-8';
   
   @import 'settings';
   @import '../../../node_modules/foundation-sites/scss/foundation';
   
   // Global styles
   @include foundation-global-styles;
   @include foundation-forms;
   @include foundation-typography;
   
   // Grids (choose one)
   @include foundation-xy-grid-classes;
   // @include foundation-grid;
   // @include foundation-flex-grid;
   
   // Generic components
   @include foundation-button;
   @include foundation-button-group;
   @include foundation-close-button;
   @include foundation-label;
   @include foundation-progress-bar;
   @include foundation-slider;
   @include foundation-switch;
   @include foundation-table;
   
   // Basic components
   @include foundation-badge;
   @include foundation-breadcrumbs;
   @include foundation-callout;
   @include foundation-card;
   @include foundation-dropdown;
   @include foundation-pagination;
   @include foundation-tooltip;
   
   // Containers
   @include foundation-accordion;
   @include foundation-media-object;
   @include foundation-orbit;
   @include foundation-responsive-embed;
   @include foundation-tabs;
   @include foundation-thumbnail;
   
   // Menu-based containers
   @include foundation-menu;
   @include foundation-menu-icon;
   @include foundation-accordion-menu;
   @include foundation-drilldown-menu;
   @include foundation-dropdown-menu;
   
   // Layout components
   @include foundation-off-canvas;
   @include foundation-reveal;
   @include foundation-sticky;
   @include foundation-title-bar;
   @include foundation-top-bar;
   
   // Helpers
   @include foundation-float-classes;
   // @include foundation-flex-classes;
   @include foundation-visibility-classes;
   // @include foundation-prototype-classes;
   

   Ссылка на этот код приведена здесь.

   Импортируйте foundation_and_overrides.scss в application.sass.scss:

   // app/assets/stylesheets/application.sass.scss
   @import "foundation_and_overrides";
   

   Мы почти закончили. Нам просто нужен javascript, необходимый для использования foundation.

4. Скачайте foundation-sites js.

   $ ./bin/importmap pin foundation-sites --download
   

   Это загрузит javascript, необходимый для foundation. Также будет загружен jquery. Загруженный файл находится в /vendor/javascript.

   Далее добавьте javascripts в config/initializers/assets.rb.

   Rails.application.config.assets.precompile += %w( foundation-sites.js jquery.js  )
   

   После этого обновите app/javascript/application.js.

   // Other imports...
   import jquery from "jquery"
   import "foundation-sites"
   
   window.jQuery = jquery
   window.$ = jquery
   
   $(function() {
     $(document).foundation();
   })
   

   Наконец, перекомпилируйте активы, запустив их:

   $ rails assets:precompile
   

   Это должно сделать это! Проверьте ваше приложение rails. Запустите localhost, используя ./bin/dev вместо rails server.

   Если вы хотите посмотреть код, вы можете проверить репозиторий.