stylus レスポンシブフォントサイズをstylusで関数化。サンプルコードはこちら
はじめにレスポンシブのサイトを作る際にフォントサイズの指定はどのようにしているでしょうか？この記事ではメディアクエリを使用せず画面幅に合わせたフォントサイズを指定するコードを紹介します。CSSではなくnode製altcssのstylusのコ...
stylus
stylus 
javascript jsonファイルを利用してデータとテンプレートを分ける – npm + nunjucks + stylus で静的サイト制作を効率的にする(6)
テンプレートエンジンnunjucksの利用環境構築を紹介してきましたがテンプレートエンジンの何が便利かというと次のようなことです。ヘッダーやフッターなどのページに共通な部分を一か所にまとめることができるリストのような同じ構造の大量のコードを...
stylus StylusでヘルパーCSSを作成する際に便利な関数、mixin（メディアクエリ編）
sassではよくメディアクエリを設定しやすくするためmixinを使用しますがstylusでも同様にメディアクエリ用のmixinを作成すると効率が各段によくなります。今回はメディアクエリ用のmixinをstylusでどう作るか紹介します。実際...
javascript webpackにbabelを導入する – npm + nunjucks + stylus で静的サイト制作を効率的にする(5)
webpackを使用してjsファイルを集束（バンドル）することができましたがJavascriptは様々な規格があるので環境によって動かない場合があります。そうならない為にひと手間加えてより確実に用意したjsコードが実行されるようにします。今...
stylus StylusでヘルパーCSSを作成する際に便利な関数、mixin（margin、padding編）
node.js製のCSSプリプロセッサstylusは変数を使用でき、またmixinという決まった処理を自動的に展開させることができる機能があるのでヘルパースタイルを効率的に作成することができます。先発のCSSプリプロセッサsassでも同様の...
javascript webpackを使用してjavascriptを集束（バンドル）する – npm + nunjucks + stylus で静的サイト制作を効率的にする(4)
前回までで次のようなことをやってきました。nunjucks でhtml生成stylus でcss生成imagemin で画像圧縮javascriptはそのままコピーして使用する想定でしたが使用量が増えてしまった時のためにwebpackを使用...
javascript 画像をコピーもしくは圧縮する – npm + nunjucks + stylus で静的サイト制作を効率的にする(3)
npm + Nunjucks + stylusを使用してフォルダの変更を監視してhtml,css,jsを再生成、browserSyncを利用してブラウザを自動リロードして確認しやすいようにしました。ただ画像ファイルの処理がないのでその処理を...
javascript ファイル更新を感知し更新確認を簡単にする – npm + nunjucks + stylus で静的サイト制作を効率的にする(2)
npm + Nunjucks + stylusで構成される開発環境作成手順の続きです。前回、buildコマンドでhtml,css,jsファイルをdistフォルダに吐き出す所まで行きました。今回はファイル更新を感知して自動更新されるように設定...
javascript npm + Nunjucks + Stylus で静的サイト制作を効率的にする
静的サイト制作時におすすめのタスク自動化ツール構成 npm+Nunjucks+Stylus を紹介します。各ツールの簡単な紹介Node.jsのパッケージマネージャー。Node.jsをインストールすると自動的にインストールされる。javasc...