[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
Startup用ウェブサイトでよく見かける1ページで構成されたさまざまなレイアウト、コンポーネントが用意されたPSDから、HTML/CSS(LESSも)/JavaScriptまでセットになったフレームワークを紹介します。 デザイナーもコーダーも、そしてディレクターもダウンロードしておいて損はないでしょう! Startup Design Framework Startup Design Frameworkは有料版とデモ版の2種類があり、ここではデモ版を中心に紹介します。 デモ版といってもダウンロードファイルで100MB超えなので、すごいボリュームですよ。しかも商用利用でも無料! ファイルのダウンロードは、下記ページの下の方から。 Startup Demo デモでは11種類のコンポーネント、2種類のサンプルサイトが入ってます。有料版は80種類のコンポーネントと25種類のサンプルサイトです。 ダ
お久しぶりです。 とあるゲーム会社で、お仕事を始めました。 ※とあるゲーム会社でお仕事していた頃の記事です。 私事ですが、組み込み業界から飛び出て 1年半、 やっとたどり着いたこの素敵なチームで、技術がっつり手に入れていきます。 さて、さて。 今回ご紹介するのは、私たちが採用している 爆速 のフレームワーク! Phalcon PHP Framework 技術陣全員が口をそろえてこう言います。 「web フレームワークの集大成だ…!」 そんな Phalcon . われらが Phalcon ! 手始めに、概要をまとめてみました。 ぜひご覧ください~ ('◇')ゞ Prologue さて、今回ご紹介するのは、私たちが採用している 爆速 のフレームワークです! Phalcon PHP Framework 技術陣全員が口をそろえてこう言います。 「web フレームワークの集大成だ…!」 そんな Ph
Laravel4は5月中にリリースされます。そのため6月になりましたらlaravel.kore1server.comのサブドメインはLaravel4のドキュメントに切り替えます。Laravel3のドキュメントはlaravel3.kore1server.comでご覧ください。既にリダイレクトしておりますので、リンクやブックマークされる方はlaravel3サブドメインページをご利用ください。 Laravelドキュメント 初めに Laravelを楽しめるのは誰? Laravelはどこが違うの? アプリケーション構造 Laravelのコミュニティー ライセンス情報 初めに Laravelのドキュメントへようこそ。 このドキュメントはスタートガイドとして、さらに特徴の紹介としても役立つように書かれています。 どこから読んでも学習できますが、以前に学んだ概念をもとに、その後に続くドキュメントは書かれて
現在、JavaScript, CSS, PHPなど数多くのフレームワークがリリースされており、ウェブ制作・開発に利用している人もたくさんいると思います。 それらのフレームワークを実際に利用するときに、踏まえておきたい長所と短所を紹介します。 Pros And Cons Of Using Frameworks [ad#ad-2] 下記は各ポイント意訳したものです。 はじめに ウェブ制作にフレームワークを使う長所 ウェブ制作にフレームワークを使う短所 ウェブ制作に役立つフレームワーク集 はじめに 近道があるのに、なぜ毎日同じことをする必要があるのか問いただすべきです。フレームワークはあなたの作業をより速く、より簡単に助ける近道である、と考えてください。ここで「より良く」というキーワードを含めなかったのは、より速くより簡単ということが常に良いことを意味するものではないといことです。 まず、フレー
ここでは、iOS, Android, Windows Mobile の3つをチェックします。 条件は、他にも下記のものがあります。 Platform iOS Android Windows Mobile Windows Phone Blackberry OS、など Target Mobile Website WebApp Native App Hybrid App Development language PHP Java Ruby Action Script C#、など Hardware Accelerometer Camera Capture Compass Connection、など User interface Adjustment Corporate Design UI Widgets Accessibility Other SDK Encryption Advertisemen
CSS with a minimal footprint.Pure is ridiculously tiny. The entire set of modules clocks in at 3.5KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes. * We can add correctly :) the numbers above are individu
Susy was a responsive layout engine for Sass, before flexbox and CSS grid were available. Susy is now deprecated, and will not receive updates. If you need help moving off Susy, or learning the latest in web layout, we offer training and consulting to help bring you up-to-date. Contact us for details » Not everyone can play with the latest specs, and there will always be edge-cases that require ma
フォームやボタン、タブやテーブルなどなど、複数のエレメントに対応したCSSフレームワークのご紹介です。見た目も分かりやすくシンプルで、個人的にとっても好みだったのでメモも兼ねてご紹介します。 なかなか良さそうだったので。様々なUIをデザインするためのCSSフレームワークです。独特なclass名が他のフレームワクーに無い特徴、とのことです。 配布サイト上でマークアップも作り出せます。最初にエレメントをD&Dしてから色やサイズをエレメントにD&Dすれば変更され、右側にマークアップが表示されます。 ↑ フォームとかテーブルとか ↑ ボタンとかタブとか ↑ ラベルやらドロップダウンやら 他にもいろいろ。ライセンスは Apache License v2.0だそうです。 Maxmert
WebブラウザでJavaScriptをテストする「js-test-driver」とQUnit、Jasmineを連携してテストするには:フレームワークで実践! JavaScriptテスト入門(4)(1/4 ページ) しっかりとJavaScriptをテストするために、今注目のJavaScript用のテストフレームワークをいくつか紹介し、その概要から実践的な使い方まで解説する連載。今回は、js-test-driverの概要や基本的な使い方、非同期処理のテスト方法、QUnitやJasmineと連携したテスト方法などを紹介します 前回まではWebブラウザを使わないJavaScriptテスト 前回「QUnit+PhantomJSでJavaScriptのヘッドレスなテスト」、前々回「PhantomJSとJasmineで振る舞い駆動開発なJavaScriptテスト」と、「PhantomJS」を軸としたJa
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内に、見出しとパラグラフ
AngularJS support has officially ended as of January 2022. See what ending support means and read the end of life announcement. Visit angular.io for the actively supported Angular. Why AngularJS? HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resu
チャイルドセレクタ(Child Selector)を使った、HTMLをできるだけ汚さないでグリッドレイアウトを作成できるCSSのフレームワークを紹介します。 Child Selector System [ad#ad-2] Child Selector Systemの主な特徴 超軽量サイズ(0.31KB) 使い方はとても簡単 余分なHTMLは最小限 コンテナはパーソナライズ可能(%, px, em) カラムのネストをサポート 条件付きコメントを使用すれば、IE5.5にも対応 Child Selector Systemのスタイルシート スタイルシートは超軽量で、下記のコードで全部です。 単位で使用している「%」は、「px, em」などに変更して使用することもできます。 div{float:left;width:100%} .right>div{float:right} .one>div{wid
Large user base Grids: Fluid and fixed UI tools: Lots of widgets; good for rapid prototyping History: Built by Twitter as a style guide for internal tools Medium user base Grids: Fluid. Most robust grid tools. UI tools: Good for rapid prototyping, but not as expansive as Bootstrap History: Built by ZURB as boilerplate for client projects Medium user base Grids: Fluid. Most robust grid tools. UI to
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く