とても使いやすいCSS/JSフレームワークのZurb Foundation。
テーマを変更して使用する備忘録。
ダークテーマは例えば
https://github.com/es-di/foundation-themes
で非公式で作成している人がいるが、少しバージョンが古く、新しいfoundationではそのまま使うことはできない。
そこでこれをそのまま改造して使用しようとしたが、変更点が多く手間がかかった。
そこで公式のテーマ作成のためのテンプレート
https://github.com/zurb/foundation-sites-template
を使用して作成することとした。
Build方法
[sh]
git clone https://github.com/zurb/foundation-sites-template
cd foundation-sites-template
[/sh]
自分の使用しているfoundationのバージョンに合わせるにはhistoryからそのバージョンに対応するSHAを確認して
[sh]
git checkout SHA
[/sh]
とする。
[sh]
npm install
bower install
npm start
[/sh]
これでcss/app.cssにビルドされたcssが作成される。
しかしこの公式テンプレート、bowerやgulpを使用していたり、webpackを使用していなかったりと少し古い構成となっており
https://github.com/es-di/foundation-themes
の方が今風のしっかりとした構成になっているように感じる。
変更点
foundation-themesとfoundation-sites-templateの_settings.scssを比較し、変更点を修正するようにした。
文の比較ができるウェブサービス
http://cgikon.com/tools/comp/comp_word.php3
を使用させていただき、比較表をexcelにコピーした。
黄色いセルだけ残し、後は目で見て色に関するところのみを抜粋した。
一部修正を入れて、sedで修正するようにしたスクリプトが以下のものである。ついでにビルドまで行う
[sh]
#!/bin/sh
sed ‘s/primary: #2199e8,/primary: #fff,/g’ ./scss/_settings.scss.back |\
sed ‘s/secondary: #777,/secondary: #888,/g’|\
sed ‘s/success: #3adb76,/success: #13c25c,/g’|\
sed ‘s/warning: #ffae00,/warning: #ffffff,/g’|\
sed ‘s/alert: #ec5840,/alert: #ec5840,/g’|\
sed ‘s/\$dark-gray: #8a8a8a;/\$dark-gray: #333;/g’|\
sed ‘s/\$body-background: \$white;/\$body-background: #121212;/g’|\
sed ‘s/\$anchor-color: \$primary-color;/\$anchor-color: #ffffbb;/g’|\
sed ‘s/\$body-font-color: \$black;/\$body-font-color: #ffffff;/g’|\
sed ‘s/\$hr-border: 1px solid \$medium-gray;/\$hr-border: 1px solid \$dark-gray;/g’|\
sed ‘s/\$blockquote-color: \$dark-gray;/\$blockquote-color: #fff;/g’|\
sed ‘s/\$blockquote-border: 1px solid \$medium-gray;/\$blockquote-border: 3px solid #444;/g’|\
sed ‘s/\$accordion-background: \$white;/\$accordion-background: \$black;/g’|\
sed ‘s/\$accordion-item-background-hover: \$light-gray;/\$accordion-item-background-hover: \$body-background;/g’|\
sed ‘s/\$accordion-content-background: \$white;/\$accordion-content-background: \$body-background;/g’|\
sed ‘s/\$accordion-content-border: 1px solid \$light-gray;/\$accordion-content-border: 1px solid \$black;/g’|\
sed ‘s/\$breadcrumbs-item-color-current: \$black;/\$breadcrumbs-item-color-current: \$primary-color;/g’|\
sed ‘s/\$breadcrumbs-item-color-disabled: \$medium-gray;/\$breadcrumbs-item-color-disabled: #666;/g’|\
sed ‘s/\$button-color: \$white;/\$button-color: #333;/g’|\
sed ‘s/\$button-color-alt: \$black;/\$button-color-alt: #000;/g’|\
sed ‘s/\$callout-background: \$white;/\$callout-background: #242424;/g’|\
sed ‘s/\$callout-background-fade: 85%;/\$callout-background-fade: 0%;/g’|\
sed ‘s/\$callout-border: 1px solid rgba(\$black, 0.25);/\$callout-border: 1px solid #000;/g’|\
sed ‘s/\$dropdown-border: 1px solid \$medium-gray;/\$dropdown-border: 1px solid \$dark-gray;/g’|\
sed ‘s/\$dropdownmenu-background: \$white;/\$dropdownmenu-background: #1e1e1e;/g’|\
sed ‘s/\$dropdownmenu-border: 1px solid \$medium-gray;/\$dropdown-border: 1px solid \$black;/g’|\
sed ‘s/\$fieldset-border: 1px solid \$medium-gray;/\$fieldset-border: 1px solid \$dark-gray;/g’|\
sed ‘s/\$helptext-color: \$black;/\$helptext-color: #777;/g’|\
sed ‘s/\$input-prefix-color: \$black;/\$input-prefix-color: \$medium-gray;/g’|\
sed ‘s/\$form-label-color: \$black;/\$form-label-color: \$medium-gray;/g’|\
sed ‘s/\$select-background: \$white;/\$select-background: #1e1e1e;/g’|\
sed ‘s/\$select-triangle-color: \$dark-gray;/\$select-triangle-color: \$medium-gray;/g’|\
sed ‘s/\$input-color: \$black;/\$input-color: \$white;/g’|\
sed ‘s/\$input-background: \$white;/\$input-background: #1e1e1e;/g’|\
sed ‘s/\$input-background-focus: \$white;/\$input-background-focus: #1e1e1e;/g’|\
sed ‘s/\$input-background-disabled: \$light-gray;/\$input-background-disabled: \$black;/g’|\
sed ‘s/\$input-border: 1px solid \$medium-gray;/\$input-border: 1px solid \$dark-gray;/g’|\
sed ‘s/\$input-border-focus: 1px solid \$dark-gray;/\$input-border-focus: 1px solid #555;/g’|\
sed ‘s/\$input-shadow: inset 0 1px 2px rgba(\$black, 0.1);/\$input-shadow: none;/g’|\
sed ‘s/\$input-shadow-focus: 0 0 5px \$medium-gray;/\$input-shadow-focus: 0;/g’|\
sed ‘s/\$label-background: \$primary-color;/\$label-background: \$dark-gray;/g’|\
sed ‘s/\$pagination-item-color: \$black;/\$pagination-item-color: \$primary-color;/g’|\
sed ‘s/\$pagination-item-background-hover: \$light-gray;/\$pagination-item-background-hover: \$dark-gray;/g’|\
sed ‘s/\$pagination-item-background-current: \$primary-color;/\$pagination-item-background-current: \$dark-gray;/g’|\
sed ‘s/\$pagination-item-color-current: foreground(\$pagination-item-background-current);/\$pagination-item-color-current: \$medium-gray;/g’|\
sed ‘s/\$reveal-overlay-background: rgba(\$black, 0.45);/\$reveal-overlay-background: rgba(\$black, 0.6);/g’|\
sed ‘s/\$switch-paddle-background: \$white;/\$switch-paddle-background: \$secondary-color;/g’|\
sed ‘s/\$table-background: \$white;/\$table-background: \$body-background;/g’|\
sed ‘s/\$tab-background: \$white;/\$tab-background: \$body-background;/g’|\
sed ‘s/\$tab-background-active: \$light-gray;/\$tab-background-active: \$body-background;/g’|\
sed ‘s/\$tab-content-background: \$white;/\$tab-content-background: \$body-background;/g’|\
sed ‘s/\$tab-content-border: \$light-gray;/\$tab-content-border: \$dark-gray;/g’|\
sed ‘s/\$topbar-background: \$light-gray;/\$topbar-background: #1e1e1e;/g’|\
sed ‘s/\$topbar-submenu-background: \$topbar-background;/\$topbar-link-color: #fff;/g’ > ./scss/_settings.scss.mod
yes | mv ./scss/_settings.scss.mod ./scss/_settings.scss
npm start > /dev/null & sleep 10; kill $!
[/sh]