普段使ってるCSSのパフォーマンスとメンテナンス性をアップさせるOOCSSベースの超軽量フレームワーク -Kraken
オブジェクト指向CSS（OOCSS）のコンセプトは普段使ってるCSSのパフォーマンスとメンテナンス性を向上させること。 そんなOOCSSをベースに設計された、モバイルファーストの拡張性も備えた超軽量フレームワークを紹介します。 Kraken Kraken -GitHub オブジェクト指向CSS（OOCSS）とは Krakenの特徴 Krakenのデモ オブジェクト指向CSS（OOCSS）とは Krakenはオブジェクト指向CSS（OOCSS）ベースで開発されています。 Krakenで採用しているものを例に、簡単に説明します。 The Kraken Way 大きいブルーのボタンのスタイルを定義する際、一つのclassやidなどで定義することもできますが、OOCSSでは「ボタン=btn」「大きいボタン=btn-large」「ブルーのボタン=btn-blue」とします。これは煩雑なように見えます
Skeleton Sample
Skeletonとは Skeletonは、iPhoneやiPadなどのデバイスでもレイアウトが最適化されているWebサイトの制作スターターキットです。内容はHTML、JS、CSSと非常にシンプル。JSライブラリにはjQueryが使用されています。CSSはグリッドレイアウト対応です。 3つの特徴 モバイルでもグリッドレイアウト: スマフォやタブレットデバイスでもエレガントにスケーリングしてくれます 素早く始められる: 速攻で制作出来るような設計となっています スタイル非依存型: 美しいレイアウトで設計していますが、貴方の好きなように上書きできます ドキュメント & サポート Skeletonを効率よく利用するためにはwww.getskeleton.com.を御覧頂ければと思います。 Skeletonはオープンソースで、githubにも置いてありますので、バグ報告等はこちらよりお願いします。ま
新しいものを制作できる予感！垂直・水平のリズムを大切にしたレイアウトを組み立てるフレームワーク -xy.css
Documentation -xy.css Step 1: ダウンロード xy.cssを下記ページからダウンロードします。 ダウンロード -xy.css Step 2: 水平のグリッド設計 HTMLは非常にシンプルで、classなど余計なものは一切ありません。 <header></header> <article></article> <aside></aside> <footer></footer> 天地にヘッダとフッタ、コンテンツとサイドバーを2カラム水平に配置します。 header, footer { width: 100%; } article { width: 66.6667%; float: left; } aside { width: 30.769231%; float: right; } Step 3: 垂直のグリッド設計 articleとaside内に、見出しとパラグラフ
半歩先いくかっこいいエフェクトだけでなく実装にもこだわったCSSのフレームワーク -Maxmertkit
単独でも素敵なかっこいいエフェクトで十分なのに、それらが全部まとまって、更に実装方法にもこだわったオープンソースのCSSのフレームワークを紹介します。 ドラッグ&ドロップでさまざまなエレメントを表示します。 Maxmertkitの特徴 Maxmertkitのデモ：スタティック Maxmertkitのデモ：CSS3アニメーション Maxmertkitのデモ：ソーシャルメディア てっとり早くワクワクしたい人は、3つ目の「Maxmertkitのデモ：CSS3アニメーション」をご覧ください。 Maxmertkitの特徴 SASSベースのオープンソースのフレームワーク CSS3アニメーションを使った演出効果 他のフレームワークとかぶらないネームスペース デザイン（カラー・サイズ）変更はテーマで簡単 Creed Creed（主義）のページではMaxmertの主な特徴が解説されています。例えばコードの簡
Web Frameworks: Pros And Cons Of Using Frameworks
Sometimes you should ask yourself, why you need to do the same thing everyday when there’s a new bridge to shorten the path. Think of web frameworks as bridges that will help you code faster and easier. Did you notice I didn’t include the word “better” in the last sentence? Faster and easier doesn’t always mean better, but we will get to that later. First things first, so what is a framework reall
iPadなどのタブレットデバイスで読みやすいコンテンツを作成するためのフレームワーク -Bibliotype
iPadなどのタブレットデバイスでコンテンツを見る際に、さまざまなシーンを想定して読みやすいコンテンツを提供するためのフレームワークを紹介します。
ゆーすけべー日記
サキとは彼女の自宅近く、湘南台駅前のスーパーマーケットで待ち合わせをした。彼女は自転車で後から追いつくと言い、僕は大きなコインパーキングへ車を停めた。煙草を一本吸ってからスーパーマーケットへ向かうと、ひっきりなしに主婦的な女性かおばあちゃんが入り口を出たり入ったりしていた。時刻は午後5時になる。時計から目を上げると、待たせちゃったわねと大して悪びれてない様子でサキが手ぶらでやってきた。 お礼に料理を作るとはいえ、サキの家には食材が十分足りていないらしく、こうしてスーパーマーケットに寄ることになった。サキは野菜コーナーから精肉コーナーまで、まるで優秀なカーナビに導かれるように無駄なく点検していった。欲しい食材があると、2秒間程度それらを凝視し、一度手に取ったじゃがいもやら豚肉やらを迷うことなく僕が持っているカゴに放り込んだ。最後にアルコール飲料が冷やされている棚の前へ行くと、私が飲むからとチ
CSSフレームワーク『BlueTrip』が想像以上にすごい - present
CSS フレームワークを再認識 CSS フレームワークって、名前だけは知っていましたが、どういうものなのか全く知りませんでした。次の記事を読むまでは。 404 Not Found - ゆーすけべー日記 確かに、これは便利そうですね！ さっそく、CSS フレームワークを導入してみます。 BlueTrip を導入 CSS フレームワークはいろいろありますが、今回は先の記事で紹介されていた BlueTrip を導入してみます。 次のページからアーカイブをダウンロードし、解凍して css ファイルと画像を static フォルダに配置。 BlueTrip CSS Framework | A beautiful and full-featured CSS framework HTML の head 部に、下記を追加。 <link rel="stylesheet" href="css/screen.c
[CSS]レイアウトのベースを設定する超軽量のフレームワーク -EZ-CSS
1カラム、2カラム、3カラム、ヘッダ、フッタなどレイアウトのベースを設定する超軽量のCSSのフレームワークを紹介します。 EZ-CSS_ An easy to use, lightweight, CSS framework. フレームワークにはあらかじめ多種なモジュールが用意されており、多彩なレイアウトを簡単に利用できます。 レイアウトのサンプル 各カラムは、HTMLでの記述の順番も変更可能です。 3カラムのモジュールのパターン EZ-CSSは既存のスタイルシートと共存が可能で、カラムの幅もどんなサイズでも対応が可能となっています。 利用方法は簡単で、ダウンロードしたスタイルシートファイルを外部ファイルとして指定し、レイアウトのサンプル通りに記述します。 EZ-CSSの使い方 レイアウトのサンプル
整ったレイアウトのWebサイトを手早く作るためのCSSフレームワーク·Markercss MOONGIFT
MarkercssはCSS製のオープンソース・ソフトウェア。開発者はWebデザインが苦手だ。絵が描けない、デザインのイロハが分からないなどと色々な問題はあるだろうが、その一つにCSSの使い方がよく分からないというのがある。特にブラウザ間の誤差をうまく吸収できないのだ。 こんな感じのデザインも容易に Firefoxで見栄えよく仕上がったと思ったらIEで見たら破綻していた…そんなことを繰り返しているとデザインがいやになってくる。そこで使ってみたいのがMarkercssだ。Markercssは設定を一つ一つ行っていくのではなくシンボル化することで手早くデザインできるようにする。 例えばフォントをArialの12ポイントにしたい時にはクラスに“A s12”と書く。レイアウトを幅900pxにしたい時にはw900と書く。同様に高さはh500といった具合に定義する。Markercssの規定する方式に沿っ
YUI Grids BuilderのCSSをシェイプアップした·Object Oriented CSS MOONGIFT
CSSのフレームワークは既に多数登場している。レイアウトを簡単に決められるものや、ブラウザ互換性が高いレイアウトを簡単に構築できるとあって利用されるケースも増えている。だが、CSSは一度作成された後のリファクタリングがしづらく、肥大化しやすい傾向にある。 yahoo、gCalといったクラスがある 有名なCSSフレームワークであるYUI Grids Builderについてもそれは変わらず、シェイプアップする余地はあるようだ。 今回紹介するフリーウェアはObject Oriented CSS、YUI Grids Builderと互換性のあるCSSフレームワークだ。CSSなのでソースコードは公開されているがライセンスは明記されていなかったのでご注意いただきたい。 Object Oriented CSSは軽量なCSSフレームワークで、YUI Grids Builderと互換性の高い作りになっている
Sass記法を用いたCSSフレームワーク·Compass MOONGIFT
CSSはプログラマ向けの言語ではないため、最初は理解しやすいが、複雑な記述が入り交じっていくとメンテナンスが困難になる。Webブラウザはよく出来ていて、何となく書いたものでも動作してしまうからさらにややこしい。 コマンドラインオプション そうした問題に対処するメタ言語として注目を集めているのがSassだ。そしてSassを実用的にプロジェクトに組み込めるのがCompassだ。 今回紹介するフリーウェアはCompass、SassをサポートしたCSSフレームワークライブラリだ。ソースコードは開示されているがライセンスは明記されていなかったのでご注意いただきたい。 Compassは単体でCSSフレームワークをなすわけではない。実際にはBlueprintやYUI、960といった有名なCSSフレームワークを利用している。そしてRailsやMerb、StaticMaticといったアプリケーションサーバと
MOONGIFT: » 複雑な段組みを可能にするCSSフレームワーク「Emastic」:オープンソースを毎日紹介
雑誌や新聞などでは複雑な段組みを行って、情報を見やすくしている。ネット媒体の場合、あまりそうした点は考慮されず、二段または三段のカラムで構成されることが多い。しかも幾つかのカラムはメニューなどに使うので、文章自体は殆ど組版が施されていない。 CSSだけとは思えないほど細かく制御されている Webはそういった媒体ではない、と言い切ってしまえばそれまでだろう。だが今後情報の電子化は進み、紙媒体は現状維持ないし衰退していくのは間違いない。そうした時に、Webもやはり読ませる形式を求められるようになるのではないだろうか。それを実現するのがこれだ。 今回紹介するオープンソース・ソフトウェアはEmastic、複雑なカラム構成を実現するCSSフレームワークだ。 Emasticはまるで雑誌のような段組みをCSSで実現している。二段、三段、四段の表示を行い、固定幅または表示サイズに合わせて変化とを組み合わせ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
肉球がパララックスしてレスポンシブ対応のちょっと面白そうなフレームワーク -Cool Kitten
Bulut Bayi Yönetimi