sprucecss root admin template

このリポジトリには、Root という名前の Laravel 管理者の静的テンプレートが含まれています。

このテンプレートは、健全性と管理を容易にするために、イレブンティを使用して構築されています。 Nunjucks テンプレート ファイルまたはコンパイルされたdistフォルダーからコンテンツを取得できます。

Laravel パッケージの開発により、テンプレートは今後定期的に変更される可能性があります。

得られるもの

JS コードの処理には Alpine.js を使用しました。非常に完全な JS 動作がいくつかありますが、このテンプレートは依然として静的な HTML/CSS であるため、インタラクティブな部分を実行する必要があります。

現時点では、次のビューまたはレイアウトを取得できます。

• ダッシュボード
• 製品一覧
• 注文リスト
• 顧客リスト
• カテゴリ一覧
• アイテム編集
• アイテムビュー
• 設定
• サインイン
• サインアップ
• パスワードのリセット

管理者固有のコンポーネントが多数あります。

• カスタマイズされたモーダルウィンドウ。
• 検索とフィルターをサポートするデータ テーブル ブロック。
• シンプルな検索。
• さまざまなドロップダウン メニュー。
• ウィジェットカード。
• メディアハンドラーモーダル。
• コンボボックス。

立ち上げて実行する

eleventy --serve使用し、npm スクリプトを使用して sass-cli で Sass をコンパイルします。

1. リポジトリのクローンを作成します。

2. 依存関係をインストールします。

   package.jsonファイルには、次のコマンドを使用してインストールするためのすべての依存関係 (およびスクリプト) が含まれています。

   npm install

3. 開発モードを実行する

   開発モードを実行するには、 npm scriptを使用します。このスクリプトは変更も監視します。

   npm start

4. 本番モードを実行する

   ライブに移行する前に、運用スクリプトを使用して Sass ファイルを圧縮する必要があります。

   npm run prod

SCSS

プロジェクトは、SCSS ファイルを./src/scssフォルダーから./src/cssフォルダーにコンパイルします。プロジェクトには、いくつかの Spruce UI コンポーネントでスタイルを提供する Spruce CSS が含まれています。

その他のスクリプト

• sass:lint/sass:lint:fix npm run sass:lintコマンドでプリセットされた Stylelint および stylelint-config-sass-guidelines を使用して SCSS ファイルを lint できます。自動修正が必要な場合は、 npm run sass:lint:fixコマンドを使用します。

• js:lint/js:lint:fix Sass と同様に JS を lint することもできます。ルールはAirbnbのプリセットを使用します。

ライセンス

コードは MIT に基づいてライセンスされています。