simple gallery_responsive template

シンプルなレスポンシブテンプレート

レスポンシブギャラリーMaxim Orlovによって設計およびコーディングされた1ページのテンプレートテンプレート。

デモ：http：//website-templates.github.io/simple-gallery_responsive-template

http://magicmockups.com/で作成された製品モックアップ

コンテンツ

• フォルダー構造
• 要件
  • EditorConfig
• サイト構成
• タスク
  • 始める
  • 開発者
  • 建てる
  • 再構築します
  • サーバ
• ライブリロード
• ライセンス

フォルダーとファイル構造

 ./
├── .editorconfig
├── README.md
├── automation.sh
|
├── gulp_tasks/                                * gulp tasks
|   ├── config/                                * gulp tasks config
│   |   ├── paths.js
│   |   ├── settings.js
│   |   └── aliases.js
│   |
|   └── task.js
│
├── gulpfile.js
├── package.json
|
├── screenshots/                               * responsive test screenshots
|
├── dev/                                       * site source
│   ├── images/                                * image sources
|   │
│   ├── pug/                                   * templates
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.pug
|   │   ├── helpers/                           * helper mixins
|   │   ├── vendor/                            * third-party code
|   │   ├── layouts/                           * page layouts
|   │   └── pages/                             * main pages templates
|   │
│   ├── js/                                    * compiled and source js
|   |   ├── vendor/                            * vendor scripts library
|   |   ├── lib/                               * site scripts library
|   │   ├── head.js                            * head scripts
|   │   └── body.js                            * vendor scripts
|   │
|   ├── stylus/                                * stylus preprocessor styles
|   |   ├── blocks/                            * blocks library
|   │   |   └── block.styl
|   │   ├── helpers/                           * mixins and vars
|   │   ├── vendor/                            * third-party code
|   │   ├── custom.styl
|   │   ├── noscript.styl
|   │   └── screen.styl
|   │
│   ├── helpers/                               * helper files
|   |   ├── favicon.ico
|   |   └── .htaccess
|   │
│   ├── fonts/                                 * font sources
|   │
│   └── data/                                  * configs and data for templates
│
└── build/                                     * built source
    ├── index.html
    ├── page.html
    |
    └── static/                                * static assets
        ├── css/                               * minified styles
        |
        ├── images/                            * minified images
        │
        ├── js/                                * minified assembled js
        |
        └── fonts/                             * @font-face-ready webfonts

要件：

• node.js
• 構築システム：ガルプ
• オプション：EditorConfig

EditorConfig

このプロジェクトには、editorConfigプラグインを使用してコードエディターが使用するルートに.EditorConfigファイルがあります。インデントスタイルのようなコードスタイル、トレーリングホワイトスペースなどを説明しています。詳細についてはこちらをご覧ください

サイト構成

このボイラープレートは、外部データ構成を備えたPUGテンプレートを使用します。メイン設定はdev/data/config.jsonファイルにあります。また、 config.key-nameを使用してテンプレートで使用できます

タスク

ここには、いくつかの説明が付いたガルプタスクのグループがあります

始める

Bower依存関係をインストールし、それらを開発したフォルダーに配置します。 Gulp： gulp start

• Bowerコンポーネントをインストールします
• BowerコンポーネントをDEVフォルダーにコピーします
• gitkeepファイルを削除します

開発者

静的サーバーを使用した開発タスク。 Gulp： gulp dev

• Stylus StyleSheetsをコンパイルします
• CSSにベンダープレフィックスを追加します
• CSSファイルにメディアクエリを組み合わせます
• パグテンプレートをコンパイルします
• ヘルパーとその他の資産を同期します
• 画像を同期します
• BROWSERSYNC STATIC SERVERを使用してRELOADを使用して実行します
• 変更に注意し、開発タスクを実行します

建てる

タスクを構築します。 Gulp： gulp build

• 画像を縮小します
• JavaScriptファイルをマニー化します
• StyleSheetsを削除します
• HTMLを削除します
• browsersync static serverを実行します

再構築します

すべてのタスクを実行して、再生および構築プロジェクトを構築します。 Gulp： gulp rebuild

• JavaScriptsを連結します
• Stylus StyleSheetsをコンパイルします
• CSSにベンダープレフィックスを追加します
• CSSファイルにメディアクエリを組み合わせます
• パグテンプレートをコンパイルします
• ヘルパーとその他の資産を同期します
• 画像を同期します
• 画像を縮小します
• JavaScriptファイルをマニー化します
• StyleSheetsを削除します
• HTMLを削除します

サーバ

変更を監視せずにサーバーを実行します。 Gulp： gulp server

• browsersync static serverを実行します

ライブリロード

このプロジェクトでは、BROWSERSYNCを使用してStatic Serverを使用して、ライブリロードオプションを構成し、構成します。

ライセンス

mit