manabuyasuda/website-template

静的Webサイト制作を少しモダンにするためのテンプレート

website-template's Issues

Sassのキャッシュがうまく動作しない

gulp-cachedでキャッシュをもたせて、差分だけビルドするようにしているけど、インポートしているcommon.scssが動いていないのでコンパイルされない。

• gulp-progeny
• gulpを使ってsassの@importを解決しつつ差分ビルドをする

改行を制御するスタイルを追加

inline-blockを指定したspanで改行させない範囲を囲む。
sw-Delimiter

sw-Breakが重複している

グリッドにブレイクポイントを追加

SiteWideをmixinから呼び出せるようにする

フォームまわりが表示幅によって若干ずれるのを修正する

Pugの初期設定

複数のJSONファイルをPugで受け取れるようにする

現状では以下のように1つ1つのファイルを指定して読み込んでいる。

'site': JSON.parse(fs.readFileSync(develop.data + 'site.json'))

ループさせて、ファイル名によって呼び出せるように変更する。

フォーム周りのHTMLを修正

radioボタンにvalue属性が付いていなかったりしている。

[Button] スタイルガイドにinputを追加

README.mdの修正・補足追加

スタイルガイドの分類を明文化

OGPなどを空にすると出力されないようにする

_layout.pugのインクルード順を修正

_script.pugが_footer.pugの上に来てしまっている。

スタイルガイドの初期設定

sw-Breakの命名規則を変更

.sw-Break-mdではなく、.sw-BreakMd

表示非表示のコンポーネントを作成

.sw-Breakは削除する。

スタイルガイドのスタイルを調整する

inputのボタンのスタイルがiPhoneで変わる

normarize.cssで指定されているinput[type="button"]のスタイルが当たっていてスタイルが反映されていない。

ES2015に対応する

いわゆる普通のWebサイト制作にES2015は現時点でオーバースペックな面もある。
例えば、JQueryプラグインがあるような状況。

現状ではjsファイルを個別に書いて、commonとmoduleでそれぞれ連結、commonを先に読み込むことで依存関係を解決している。
ES2015を導入する場合、モジュールの依存関係はどのように解決するのがいいのか、必要な構文だけ使うようにするのか。

editorconfigでPugのスペースを消さないようにする

trim_trailing_whitespace = falseをPugにも適応する。
半角スペースが記述できないことがある。

Sassの初期設定

JSのキャッシュが正常に動作していない

gulp-cachedがうまく動作していないので、JSの連結がうまくできないことがある。

.st-Grids間に余白を追加する

現状では2カラムと3カラムのような指定を組み合わせるとそれぞれの間に縦の余白がつかない。
.st-Gridsが並列に並んでいる場合には.st-Grids_Item内に指定している余白と同じ値が.st-Gridsと.st-Gridsの間につくようにする。

CSSのLintを導入

画像の初期設定

relativePathでパスを取得するときにindex.pugを`/`とする

現状では、

• index.pug => /index.pug
• about/index.pug => /about/index.pug

のようになっている。index.pugの出力は不要なので、

• index.pug => /
• about/index.pug => /about/

としたい。

順序のないリスト（ul）のコンポーネントを追加

テーブルコンポーネントを追加

http://mkasumi.com/scrolling-hints-by-css.html

このスタイルを参考にする。

アイコンフォント一覧がうまく生成されない

スタイルガイド生成時に、中に入れているファイルが消えてしまうのが原因？

sw-FormCheckboxとsw-FormRadioのデザイン変更

CSSで変更できる箇所を増やす。

.st-Gridsに5カラムを追加する

現状では複雑に打ち消し合っているけど、切り替わるごとにリセットして必要な余白をつける、ような書き方にできたらしたい。

Webフォントをサーバーに置く場合の@font-faceの設定

https://gist.github.com/jonathantneal/d0460e5c2d5d7f9bc5e6

.st-Gridsにバリエーションを追加する

均等なグリッドだけでなく、8:4や7:3のような比率も作っておく。同じパターンが続くときはひとつの.st-Grids内で完結して、違うパターンになるときは別の.st-Gridsを並列で記述する。
切り替わるタイミングで要素順が変更できるようにもしておく。ただし、3つ以上の要素がある場合はリバースはできない。

名前は.st-Grids-col8to4のようにする。

READMEの更新

よく使うJSの処理を追加

画像の圧縮に対応する

#3 でsvgoにエラーが出てしまって画像の圧縮に対応できてない。
imagemin/imagemin#237

別のパッケージにするか、エラーの原因を探る。

Gulpの処理を通さない本番用ファイル用のディレクトリを作成する

yarnの導入

パッケージのバージョンを固定したいので、yarnを導入する。

debounceとthrottleをlodashに切り替える

https://css-tricks.com/debouncing-throttling-explained-examples/

[FormCheckbox] フォーカスが当たらないのを修正

Pugのディレクトリ名を変更

インクルードするときのパスが意味の通るものにしたい。

現状

• include /_include/_meta.pug
• include /_include/_layout.pug

改良後

• include /_partial/_meta.pug
• include /_partial/_default-template.pug

もしくは

• include /_partial/_meta.pug
• include /_template/_default.pug

ブラウザ対応についての説明を追加

IE9以上
iOS8以上
Android4.4以上
その他は最新版

GitHub Pagesで確認できるようにする

[FormRadio] フォーカスが当たらないのを修正

CSSの最適化をgulp-clean-cssに変更

csswringはNode.jsの5.0以上。
最低限の環境でも動いて欲しいので、いったんgulp-clean-cssに変更する。

JSのLintを導入

JavaScriptの初期設定

canonicalタグの導入

ページの評価を1つにまとめるためにcanonicalタグを追加する。
URLはsite.rootUrl + pageRootPathで取得可能。

browserslistの最適化

last 2 versionのように指定すると、Blackberry Browserなどの影響で不要なプレフィックスがつく恐れがある。

http://browserl.ist/