タグ

CSSとblueprintに関するdecoy2004のブックマーク (10)

  • Blueflavor: BlueprintCSS 101 和訳 - minorio のプログラミング・メモ

    Blueprintcss Tutorial の和訳 に続いて、こちらも日語に翻訳してみることにしました。 BlueprintCSS 初級講座 HTMLCSS を使って数多くのデザインをつくり出していると、毎度処理する問題の中にいつも決まった問題がいくつかあることに気がつくだろう。例えば、ブラウザーをリセットして白紙状態にする作業。それからデザインを配置していくためのレイアウトやベースライングリッドを設定する作業。まともな文字サイズと位置合わせ、間隔を決める作業も。ほかにもまだある。こういった事柄を前もって処理し、デザイナーたちが好きな当に楽しい作業に取りかかれるとしたら便利じゃないだろうか? Blue Flavor に入る前、私はカンザス州ローレンスに拠地を持つニュースメディア企業、ワールド社で働いていた。その当時、私とデザイナーの Nathan Borror および Chri

    Blueflavor: BlueprintCSS 101 和訳 - minorio のプログラミング・メモ
    decoy2004
    decoy2004 2009/06/20
    実際にはすべてのコラムに DIV 要素を使わないと、ブラウザー間の互換性が保たれない場合があります。
  • Blueprintcss Tutorial 和訳 - minorio のプログラミング・メモ

    まだ日語のドキュメントがないみたいなので、Tutorial - Blueprintcss - Google Code を日語に翻訳してみます。 チュートリアル さあ Blueprint の使い方を解説しましょう。 このチュートリアル以外に、Blueflavor によるチュートリアル(BlueprintCSS 101)もいいですよ。 インストール Blueprint は、あなたのサイトの CSS ディレクトリに置く必要があります。それを済ませた後、以下の2行をあなたのページのヘッダー内に書き加えてください。href に正しいパスが指定されていることを確認してください。 <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="s

    Blueprintcss Tutorial 和訳 - minorio のプログラミング・メモ
    decoy2004
    decoy2004 2009/06/20
    Tutorial - Blueprintcss - Google Code を日本語に翻訳してみます。
  • Construct Your CSS | WYSIWYG Layout Editor, Semantic & Table-Free | Based on Blueprint & jQuery

    Welcome to Construct, a visual layout editor based on Blueprint & jQuery! This is version 1.0, finalized on March 5, 2010 and released for public consumption under the FreeBSD License. This project was built by Christian Montoya, and exists both as a useful tool for CSS designers and as proof that a visual layout editor is possible to acheive with clean CSS & semantic HTML. Read on for an explanat

    decoy2004
    decoy2004 2009/06/20
    Welcome to Construct, a visual layout editor based on Blueprint & jQuery!
  • A Closer Look At the Blueprint CSS Framework | Envato Tuts+

    Blueprint is a CSS framework that can save you time and headaches when working on any project that involves HTML and CSS, whether it be with Rails, PHP, or just laying out an HTML page. In this tutorial you will get a look at the inner workings of Blueprint and we'll take a look at demo application that uses Blueprint to get a better idea of how to use actually use the framework. If you are like m

    A Closer Look At the Blueprint CSS Framework | Envato Tuts+
    decoy2004
    decoy2004 2009/06/20
    print.css This file sets some default print styles, so that printed versions of your site looks better than they usually would.
  • bluebrintcss.cdr

    LINKING <link rel="stylesheet" href=" " type="text/css" media="screen, projection"> <link rel="stylesheet" href=" " type="text/css" media="print"> blueprint/screen.css blueprint/print.css <!--[if IE]> <link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"> <![endif]--> Download the latest version from http://code.google.com/p/blueprintcss/ and add this lines int

  • MdN Design|総合情報サイト

    デザインする グラフィックアプリの使い方から、デザインの基礎、最新の表現手法まで、デザイナー、イラストレーター、写真家が知りたい情報が満載!

    MdN Design|総合情報サイト
    decoy2004
    decoy2004 2009/06/20
    デフォルトで定義されたコンテナタグやカラムのサイズは、Blueprint Grid CSS Generatorを利用することで任意の大きさに変更できる
  • 注目のCSSフレームワーク「Blueprint 0.6」登場 - 1.0へ向けた大きな改善 | エンタープライズ | マイコミジャーナル

    21日(米国時間)、Blueprint CSS Frameworkの最新版となる「Blueprint CSS Framework 0.6」が公開された。BlueprintはCSSで開発されたCSSフレームワーク。CSS開発に費やす時間を軽減させることを目的にして開発されたフレームワークでThe MIT Licenseを変更したライセンスのもとで提供されている。扱いやすいグリッド、実用的なタイポグラフィ、印刷向けのスタイルシートなどに特徴がある。 0.6は1.0へ向けた重要なリリース。実用的なディレクトリストラクチャの実現、新しいプラグインシステムの導入(これに合わせて多くの機能をプラグインへ展開)、Webブラウザ互換性をチェックするための新しいテストスイートの導入、垂直方向サイジングユニットにemを再度採用(0.4のときよりも改善されている)、CSSの妥当性を検証、また圧縮処理を実施するた

    decoy2004
    decoy2004 2009/06/20
    扱いやすいグリッド、実用的なタイポグラフィ、印刷向けのスタイルシートなどに特徴がある。
  • Blueprint CSSのレイアウト設計をグラフィカルに行う·Boks MOONGIFT

    Blueprint CSSCSSフレームワークの先駆け的なソフトウェアだが、これを使うとグリッドなデザインを簡単に実現できるようになる。多様なブラウザにも対応し、かつきっちりとしたデザインが組めるとあって、便利に使われている。 グラフィカルにグリッド設計ができる とは言え、最初は使いこなすのに苦労するかも知れない。これからBlueprint CSSを使ってみようと思う方はBoksを使ってデザインするのが良さそうだ。 今回紹介するフリーウェアはBoks、Blueprint CSSをグラフィカルに使いこなすソフトウェアだ。 BoksはAdobe AIRのアプリケーションで、Windows/Mac OSX/Linuxで動作する。グリッド設定を使って、ページの幅やカラムの数を指定できる。そしてクリックでDivタグを配置し、ドラッグで幅を調整してグリッドデザインを描くことができる。左右への移動は矢

    Blueprint CSSのレイアウト設計をグラフィカルに行う·Boks MOONGIFT
    decoy2004
    decoy2004 2009/06/20
    BoksはAdobe AIRのアプリケーションで、Windows/Mac OSX/Linuxで動作する。グリッド設定を使って、ページの幅やカラムの数を指定できる。そしてクリックでDivタグを配置し、ドラッグで幅を調整してグリッドデザインを描くことが
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    IDEA * IDEA
    decoy2004
    decoy2004 2009/06/20
    デフォルトでは画面は横24個のグリッドに分割されていて、「ここに17個分のブロックを置いて、次にここに1個余白ブロックを置いて、次に3個のブロックを2個置いちゃおう!」ってな具合にレイアウトしていきます。
  • 共同開発されているCSSライブラリ(Blueprint) - 本日もJava日和

    Blueprint0.7 このページはBlueprint0.6向けです。 0.7向けに作ったページもありますので、こちらもご覧ください。 Blueprint0.7向けのインストール及びサンプル Blueprintとは? Blueprint(BP)とは、複数人で共同開発されているCSSライブラリです。 JavaScriptのライブラリは多く見かけますが、格的に開発されているCSSライブラリは少ないのが現状です。 クロスブラウザ(どんなブラウザでも動作)というのが一番の魅力になると思います。 BP0.4からはIEのバグがいくつか修正され、サイトでも紹介させていただくことにしました。 参考元 以下は、家サイトを参考に作りました。 Blueprint@google code Tutorial@google code(wiki) なぜBPを使うのか? ・クロスブラウザ CSSを作る場合問題に

    decoy2004
    decoy2004 2009/06/19
    Blueprintを導入するとブラウザの違いを生み出すような要素が再定義され共通化されます。プリントされた際にもより良く見えるような調整を行います。
  • 1