Below you will find pages that utilize the taxonomy term “PostCSS”
静的サイト作成用テンプレートプロジェクトを作りました
最近久しぶりに静的サイト(LP)を一から作る機会があったので、
静的サイト作成用のプロジェクトを作り直してみました。
static-site-starter-kit
3年ほど前に作ったfrontend-templateというリポジトリもあったのですが、
こちらはSugarSSやFuseBoxなど、現在のトレンドから外れたアーキテクチャで構成されていたのと、また独自スクリプトが多数あってメンテに難があったため、
2020年向けと思われる内容に書き換えています。
そんなに大した内容ではないですが簡単に説明すると以下の仕組みをテンプレートとして構築しています。
postcss-webfont を公開しました
PostCSSのプラグインである postcss-webfont を作成しましたので、公開しました。
https://www.npmjs.com/package/postcss-webfont
どのようなプラグインなのかというと、
CSSにfont-faceのルールセットを一定のルールに従って記述しておくことで、アイコンフォントの自動生成と、アイコンごとに対応するCSSのルールセットを作成するプラグインです。
(gulp-iconfont と gulp-iconfont-cssのPostCSS版というイメージです)
stylelint-config-sugarss-recommended を公開しました
普段私が利用しているSugarSS用の stylelint 設定ファイルをnpmパッケージとして公開しました。
https://www.npmjs.com/package/stylelint-config-sugarss-recommended
SugarSSはPostCSSでSassライクなインデントベースのシンタックスで記述できるAltCSS言語の一種となります。Sassに慣れた人がPostCSSへ移行する際や、pugのようなインデントベースなHTMLメタ言語と合わせて利用するには特におすすめです。
https://github.com/postcss/sugarss