根拠+レール7チュートリアル

8883 ワード
foundation rails css ruby テキストリンク
レール7は比較的新しいので、私は今それについて多くのドキュメンテーションを見ることができません.特にCSSフレームワークとしてRails 7で基礎を使うこと.このチュートリアルでは、私がどのようにして基礎工事を行ったかを示します.
我々はfoundation-rails gemを使用していない、それは現在最新のではない.このチュートリアルでは別の方法を使用します.
Rails 7を使用していることを確認してください.

  • cssbundling-rails gem .
  • あなたのGemfileにCSBBunling Railsをgem 'cssbundling-rails'で加えます
  • は、./bin/bundle installを走らせます
  • は、./bin/rails css:install:sassを走らせます

  • インストールfoundation-sites
    yarn add foundation-sites
    私はこのチュートリアルのために糸を使用しています.あなたはこのためにnpmを使用することができますが、私は今のところ糸を好む.詳細については、財団のウェブサイトをチェックすることができます.

  • sassファイルを設定します._settings.scssに従ってファイルnode_modules/foundation-sites/scss/settings/_settings.scssをコピーします.その後、app/assets/stylesheetsにペーストする.
    新しい_settings.scssを編集します.行を以下から変更します.
    @import  'util/util'
    to
    @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;
    このコードはthisから参照されます.foundation_and_overrides.scssにapplication.sass.scssを輸入してください:
    // app/assets/stylesheets/application.sass.scss
@import "foundation_and_overrides";
    もう少しで済んだ.我々はちょうど基盤を使用するために必要なJavaScriptが必要です.

  • ダウンロード.
    $ ./bin/importmap pin foundation-sites --download
    これは、財団に必要なJavaScriptをダウンロードします.また、jQueryをダウンロードします.ダウンロードしたファイルは/vendor/javascriptにあります
    次に、JavaScriptを追加します
    Rails.application.config.assets.precompile += %w( foundation-sites.js jquery.js  )
    その後、更新config/initializers/assets.rb
    // Other imports...
import jquery from "jquery"
import "foundation-sites"

window.jQuery = jquery
window.$ = jquery

$(function() {
  $(document).foundation();
})
    最後に、実行して資産を再コンパイルします.
    $ rails assets:precompile
    そうするべきだあなたの柵アプリをチェックしてください.app/javascript/application.jsの代わりに./bin/devを使用してlocalhostを実行します.
    コードを見たい場合はrepositoryを確認できます.
    • は、Pythonで2つの要素が等しいかどうかを調べる
    優雅なAndroidコードを書く方法について------BaseActivity