You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
May 22, 2012 Open-sourcing Stylo I learn by setting projects for myself, and so a few months ago I decided to create an app called Stylo. The idea was to let people design basic web apps using a Fireworks-like interface, ultimately exporting the finished design as CSS. I’d always admired complex apps like 280 Slides, so was excited to be building something with similar problems. I started writing
Write more, do less More simplifies CSS to make it more intuitive, allowing you to write human readable code that fits with the way you think. More runs on both the client-side and server-side (Node.js). Write some More: #header colour: cmyk(one-hundred-and-eight, eighteen, zero, forty-five) !unimportant; #header width: twenty-five-and-three-quarters percent !unimportant; #about h2 span background
var app, base, concat, directory, gulp, gutil, hostname, path, refresh, sass, uglify, del, connect, autoprefixer, babel; var autoPrefixBrowserList = ['last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4']; gulp = require('gulp'); gutil = require('gulp-util'); concat = require('gulp-concat'); uglify = require('gulp-uglify'); sass = require('gulp-sass'); connect = require(
例えば、Webサービスのフロントエンドのコードを書き始める時にまず何をするでしょうか? デザインスケッチや画像を元にHTMLとCSSを記述していくことになると思います。 少なくとも僕はそうですね。 理論的にはHTMLだけでもWebサービスを作ることはもちろんできますが、 見た目を少しでも調整したいとなるとCSSが必要になります。 例えばCSSを使わないHTMLの場合、いくら単純なレイアウトだとしても、 デフォルトのリンクの色を変えたかったり、フォントを変更したかったり、 要素ごとの余白をどうにかしかったりと最低限の要望が出てきます。 こうした最低限のCSSに対するニーズは共通化して自分なりのCSS Frameworkとして持っておくとよいと思います。 近頃、一からCSSを記述しなくなったのもこうした考え方のおかげです。 今Web上で配布されて利用可能なCSS Framworkが非常に増えて
All the Cool Kids Compile Sass, Less, Stylus, CSS, CoffeeScript, Pug, Slim, Haml, TypeScript, JavaScript, ES6, Markdown, JSON, SVG, PNG, GIF and JPEG right out of the box. Dead-Simple Configuration Want compressed CSS? Just check a box. Need to transpile JavaScript? Check a box. Every tool's options are available in a beautiful, clean UI. No more hacking build scripts. Bleeding-Edge Tools Autopref
A preview of the jQuery UI Bootstrap themejQuery UI Bootstrap A Bootstrap-themed kickstart for jQuery UI widgets (v0.1) Welcome! This is a live preview of new the jQuery UI Bootstrap theme - a project I started to bring the beauty of Twitter's Bootstrap to jQuery UI widgets. With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter
年末だからというわけでもないのですが、いつものサイト作りに使う CSS リセットについて見直してみました。今までもちょっとずつ手を入れてはいたのですが、今回はかなり大きく修正しています。というのも、Nicolas Gallagher と Jonathan Neal の両氏による normalize.css を知り、大きく影響を受けたからです。 Normalize.css は「新手の CSS リセット」ではありません。CSS を「リセット」するのではなく「ノーマライズ」する、という新しい考え方です。CSS リセットとノーマライズはどちらも、ブラウザ間で CSS の実装に差異があることを前提にそれらを吸収しようとする、という同じ目的を持っています。ただ、リセットはすべてをまっさらな「さら地」にしようとするのに対し、ノーマライズは使える部分は残しつつ手を入れる必要のある部分だけを整える、という違
BluCSSは、4つの環境で表示を自動的に変化させます。 ・デスクトップスクリーン ・ラップトップ(ノートパソコン) ・タブレット ・モバイル に応じて自動で表示を変えるようにセットアップされています。 メインコンテナは1000pxがデフォルトですが 設定で変えられるようです。 10個のカラムで区切られていて、パーセント区切りでレイアウトされています。 イメージのレスポンシブにも対応しています。 (blu_ではじまるclass名のイメージはすべて自動で幅を調整してくれるそうです。) demoを使って、ブラウザを実際に伸縮させてみました。 ・フルサイズ表示 ・ラップトップ表示 ・モバイル表示 ※ラップトップ〜モバイル表示の間は段階に応じて伸縮するので そこがタブレット表示になっているのかなあと予測。 レスポンシブな対応が必要なウェブサイトを作成する際に 参考にしてみてはいかがでしょうか。 関
CSSで手軽にボタンを作る方法を探している。 そんな方におすすめなのが、「CSS3 Buttons – 10+ Awesome Ready-To-Use Solutions (+All Related Tutorials You Need)」。 ボタンを作るCSSフレームワークが10点紹介されています。 エントリーの中から気になったのを、いくつかご紹介。 CSS3 Buttons With Simple Markup 非常にシンプルなボタン。18種類あり。 GitHub-Style CSS3 Buttons 以前に紹介しましたが、Github風のボタンを作れるCSSフレームワーク。 四角、角丸、アイコン付きでボタンが作れるようになります。 Zardi Zardiを使うと、角が少しだけ丸い物と、もっと丸いボタンから形を選ぶ事ができます。 わずか4kbで作られているようですね。 BonBon
GitHub - ofk/xcssjs デモ(オリジナルはCSSでアイコンをデザイン - Hail2uのDesign icon with CSS) デモの結果はオリジナルと同じでよく分からないかもしれませんが、CSSが違います。xcss.jsを読み込むとベンダープリフィックスは記述不要です。 つまり、どういうことかというと .rotate10 { transform: rotate(-10deg); } とCSSで書いておき、xcss.jsを読み込むと、 .rotate10 { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -o-transform: rotate(-10deg); -ms-transform: rotate(-10deg); } というCSSを動的に追加するライブラリです(実際はブラウ
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
どこかで使うかもしれないと思って メモがてらシェア。スマートフォンに サクッと対応させるjQueryプラグイン のjquery-mobileに960グリッドシス テムを取り入れることが出来るcss、 jquery-mobile-960です。 なんだかタイトルが謎ですが語彙が無いだけなので気にしないでください。jquery-mobile-960はライセンスがMIT。商用もOKで無料で配布してくれています。 jquery-mobile-960は、960.gsをjQuery-Mobileを使ったレイアウトにも使うためのcssです。2カラム、3カラム、イメージギャラリーなどに使えそうな4カラムレイアウトなどもも思いのまま。 少し大きいですけど全画面キャプチャ↓ 実際にiPhoneで確認 縦の場合。 横の場合。 使い方<link href="http://code.jquery.com/mobile
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く