タグ

*toolとcssに関するloopeiのブックマーク (7)

  • Sassから自動でCSSを生成する·saag MOONGIFT

    CSSをそのまま書くのは面倒というのは誰しもが感じる所だろう。そこで最近では構造化されたCSSを作成し、変換プログラムを介して別なフォーマットにするという類のソフトウェアが幾つか登場している。PythonではCleverCSSRubyではSassやLessが知られている。 下がSass、上がCSS だがいずれのフォーマットも変換プログラムを使わなければブラウザに読み取らせることはできない。ファイルを編集するたびに変換プログラムを実行するなんて手間だ、そこで使うのがsaagだ。 今回紹介するオープンソース・ソフトウェアはsaag、Sassファイルを監視して変換するソフトウェアだ。 saagは入力としてSassのあるディレクトリを指定し、出力としてCSSファイルを出力するディレクトリを指定する。後はSassファイルを編集すると自動的に感知してCSSファイルを生成する仕組みだ。Sassファイル

    Sassから自動でCSSを生成する·saag MOONGIFT
  • CSSやJavaScriptファイルを連結、圧縮·Minify MOONGIFT

    jQueryやPrototypejs、YUIなど様々なJavaScrptライブラリが登場している。また、CSSもフレームワークが出てきており、便利な反面、表示されるまでのコネクション数やダウンロードサイズが肥大化している。 CSSJavaScriptを連結&圧縮 それを解決する手段として、サイズの縮小や複数のファイルをまとめてしまうという方法がある。それを自動化してくれるのがMinifyだ。 今回紹介するオープンソース・ソフトウェアはMinify、JavaScript/CSSの連結、圧縮ソフトウェアだ。 MinifyはPHPで作られており、Webベースで動作する。Minifyにファイルのパスを渡すことで余計な改行や空白を圧縮してサイズを小さくしてくれる。そして複数のファイルを渡すことで連結してくれる機能もある。 生成されたファイル 作成するのは同一ドメイン内のファイルに限られる。また、グ

    CSSやJavaScriptファイルを連結、圧縮·Minify MOONGIFT
  • JavaScriptやCSSのメンテナンスにぜひどうぞ·CocProxy MOONGIFT

    こ、これは便利…。新規開発しているときはまだしも、実際に動いているサイトのデザインやJavaScriptをメンテナンスしようと思うと以外と大変だ。静的な場合はまだしも、Ajaxを使ってデータを取得していたりすると、その用意だけでも時間がかかってしまう。 そんな時に使えるのがamachangご推薦のCocProxyだ。Webデザイナーまたは開発者の方はおお、こんなのを待っていたと思うに違いない。 CocProxyはRubyで書かれたオープンソース・ソフトウェアで、開発用プロキシだ。 CocProxyを使う際には、filesというディレクトリを作成し、そこにファイルを配置する。ドメインごとにフォルダを作成して、その中にファイルを入れても良いし、直接ファイルを置いても良い。優先度はfiles直下にあるファイルだ。 style.cssはヒットしたのでローカルファイルを利用している そしてproxy

    JavaScriptやCSSのメンテナンスにぜひどうぞ·CocProxy MOONGIFT
  • MOONGIFT: » Web上の開発環境「Rainbow 9」:オープンソースを毎日紹介

    様々なWebアプリケーションが登場しているが、それでも作成はローカル環境で行う必要があり、不便さが残っている。開発すらWeb上でできればどれだけ手軽だろう。 そんな希望を実現させてくれるかも知れないのがこのソフトウェアだ。 今回紹介するオープンソース・ソフトウェアはRainbow 9、Webブラウザ上で開発するソフトウェアだ。 Rainbow 9はテキストエリアをJavaScriptCSSHTML、XML等が作成しやすいように変化させてくれる。JavaScriptは、その場で実行できるコンソール機能がある。 エディタ上の見た目も、CSSで指定すれば色の変更が容易に行える。補完機能もあり、エディタとしてもなかなか面白い。 そして、HTMLJavaScriptCSSを作成し、その場でプレビューすることもできる。ファイルはタグ情報とともに保存され、後で呼び出すことが可能だ。尚、試してみた

    MOONGIFT: » Web上の開発環境「Rainbow 9」:オープンソースを毎日紹介
  • MOONGIFT: » プログラマブルCSS「Moonfall」:オープンソースを毎日紹介

    CSSは柔軟な書き方に対応するフォーマットだが、運用を続けていくと構造の階層が乱れていったり、フォントサイズの設定が様々な場所に散らばったりと管理しづらくなっていく。 データを上手に管理すべく、プログラマブルなCSSを導入してみるのはいかがだろう。 今回紹介するオープンソース・ソフトウェアはMoonfall、CSSジェネレータだ。 Moonfallはスクリプトで定義する変数のリストと、CSSテンプレートからなる。CSSテンプレートには[]で囲むと数値や文字に置き換わる。ハッシュで定義してCSS指定をまとめることもできる。 fillと言う関数を利用すると、二、三段のカラム生成が容易にできる。幅や一部のカラムの大きさを指定すれば、あまった場所については自動計算してくれる仕組みだ。 現状のCSSは言わば各数値、文字列がハードコーディングされた状態だ。柔軟なデザイン変更に対応するにはやはり変数化が

    MOONGIFT: » プログラマブルCSS「Moonfall」:オープンソースを毎日紹介
  • Web Design Tools

  • aphpkb レビュー MOONGIFT

    aphpkb レビュー インストール インストール設定は珍しくコマンドラインから行います。 (クリックすると拡大します) トップ画面 トップ画面です。 (クリックすると拡大します) 一覧 記事やコメントの一覧です。 (クリックすると拡大します) メンテナンス カテゴリの追加や編集を行います。 (クリックすると拡大します) リンク リンク編集、追加画面です。 (クリックすると拡大します) 記事追加 記事追加入力画面です。 (クリックすると拡大します) 管理画面ではペンディングになっています。 (クリックすると拡大します) 認証しました。 (クリックすると拡大します) トップ画面にアクセスすると表示されるようになります。 (クリックすると拡大します) 投票も可能です。 (クリックすると拡大します) 検索 検索結果ページです。 (クリックすると拡大します) 質問 質問入力画面です。 (クリックす

    aphpkb レビュー MOONGIFT
  • 1