Movable Type 6のテーマ「Apex」をForkしてカスタマイズしてみた

以前 Movable Type 6のテーマ「Apex」のカスタマイズについて記事にしましたが、実際に GitHub のリポジトリを Fork してカスタマイズした内容を紹介します。
見た目の変更と、Compass と Ruby に依存しない開発環境を作りました。

  

やったこと

  • 各スタイルを変更。
  • Compass を削除。
  • ベンダープレフィックスを削除。
  • Ruby Sass を削除。
  • node-sass を導入。
  • Grunt.js を削除。
  • npm scripts に build と wacth を追加。

各スタイルを変更

  • base.scss および 各スタイル の scss ファイル を変更。

ベースの CSS および Apex で用意されている6種類のテーマのスタイルの CSS を変更。

Compass を削除

  • @import で Compass の mixin を読み込んでいる部分を削除。
  • @include の定義を削除。
  • clearfix は 独自で mixin を作成。
    • pie-clearfix を削除。
  • ベンダープレフィックスを削除。Can I Use で各ブラウザの対応状況を確認。

box-sizing と transition は後から追加したスタイルですが、Compass を削除するためベンダープレフィックスを削除。

Ruby Sass を削除

  • grunt-sass-convert を削除して node-sass を導入。
  • config フォルダと sourcemap.rb ファイルを削除。

grunt-sass-convertsass-convert でコンパイルしています。
grunt-sass なら node-sass でコンパイルしてくれるみたいです。

Grunt.js をやめて npm scripts に移行したいので、node-sass を導入しました。

Grunt.js を削除

  • gruntfile.js ファイルを削除。
  • npm scripts に build と wacth を追加。
    • node-sass の コンパイルと監視を npm scripts で記述。
    • npm run build または npm run wacth でタスクを呼び出し可能。

Fork したリポジトリ

以前書いた記事

Movable Type 6のテーマ「Apex」をカスタマイズする

  

共有やブックマークなど