ブログ

PHPサイト開発のテンプレート2017

20ページくらいまでのサイト開発の際に、私が使用しているテンプレートです。

PHP ウェブサイト開発テンプレートGithubページへ

特徴

  • デザイナー向け(自分)
  • Devtips Starter kitがベース
  • Htmlは共通部分をphpで分割
  • CSSはSCSSを利用
  • タスクランナーはGulp

Google のプロダクトデザイナーTravis Neilsonさんが公開しているDevtools Starterkitというボイラープレート的なキットをベースにアレンジしています。

テンプレートといっても、html 構造などはまっさらです。今だとWebpackですとか、新しいツールがどんどん出ていますので、少し古めな構成かもしれません。

構成

PHP_website_template
| -- assets/
| | -- dist/
| | | -- css/
| | | | -- main.css
| | | -- js/
| | | | -- jquery.js
| | | | -- jquery.easing.js
| | | | -- main.js
| | | -- img/
| | -- src/
| | | -- css/
| | | | -- 1-tools/
| | | | | -- _fonts.scss
| | | | | -- _normalize.scss
| | | | | -- _vars.sass
| | | | -- 2-basics/
| | | | | -- _body-elements.sass
| | | | | -- _links.sass
| | | | | -- _selection-colors.sass
| | | | | -- _typography.sass
| | | | -- 3-components/
| | | | -- 4-pages/
| | | | | -- _page-home.scss
| | | | -- main.scss
| | | -- js/
| | | | -- a00-init.js
| | | | -- a00-close.js
| -- gulpfile.js
| -- index.php
| -- package.json
| -- php_modules/
| | -- gnav.php
| -- README.md

PHPで分割

php_modules内にヘッダーなどを管理しincludeします。

JS

Gulpのconcatで結合します。a00からz99までの接頭語を各コンポーネントに付けて管理しています。

CSS

SCSSを利用。あらかじめNormalize.cssを入れてます。タイポグラフィなどの基本設定はbasicsの中に入っているので、最初に設定を済ませてしまいます。ボタンなどのコンポーネントは各ページと分けて管理します。

Gulp

以下のプラグインを利用

  • gulp-sass
  • gulp-autoprefixer
  • gulp-concat
  • browserSync
  • gulp-imagemin
  • gulp-uglify
  • gulp-clean-css

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です