Kite
Simple Kite uses `inline-block`, not the latest CSS Syntax. It's practical, simple to understand and easy to use. Flexible Kite behaves like flexbox: justify-content, etc. You could easily create complex modules. // kite core components // 1. Fill in `inline-block` gaps and then reset to `font-size` root font-size `rem` // 2. For Android: Android doesn't fill in `inline-block` gaps. `display: tabl
Middlemanでがんばるぞい系テンプレートgem「middleman-ganbaruzoi」作りました
Middlemanでがんばるぞい系テンプレートgem「middleman-ganbaruzoi」作りました Middleman、最近結構使っていて実案件でもこれでサイト作ったりしている。数十ページのサイトだけど、WordPress使うまでもないような重さのサイトにちょうど良い。 Middlemanを使うときは、僕はSlim + Sass(SASS) + CoffeeScriptでやっていてる。config.rbやSlimやSassのテンプレートみたいなやつは、基本的に同じものを使い回す。GitHubやGistに置いてるそれらを、都度プロジェクトフォルダにコピペして、というのをやっていた。 でも毎回それやるのも面倒だし、Ruby gem化してRubyGems.orgで公開しました。これで、今までより楽にテンプレートを使い回すことができる。 RubyGems.org: middleman-ga
自分用のgruntタスクメモ
前にgruntの使い方を書きましたが、それからいろいろ試してみて自分なりのタスクを作成しました。 まだあまり使い倒してないのでまだまだ変更するところがあると思いますが、これを元に変えていきます。 2種類用意しました がっつり機能を使いたい時もあれば、ちょこっとだけ使えればいいかなっていうことが個人的にあったので2種類用意してみました。 制作フォルダで制作後、最終的にJSやCSSを圧縮し、確認・納品フォルダへ必要ファイルを全コピーする 制作フォルダにはscssファイルのみ置き、HTMLやJSは確認・納品フォルダにのみ置いておく 1.がっつりタイプ こちらは先程も書いたように、「制作フォルダで制作後、最終的にJSやCSSを圧縮し、確認・納品フォルダへ必要ファイルを全コピーする」ということをやります。 使用gruntプラグイン grunt-contrib-watch grunt-contrib-
Codekit 2.0 ファーストインプレッション
マカーお馴染みの高機能GUIコンパイラー Codekit がバージョン2になり、色々刷新されました。 いきなり新バージョンがリリースされたんでびっくりです。とりあえず買ってみたんで全部機能試してはいないですが、ひと通り触ってみた感想をつらつらと。 Codekitとは CodeKit: THE Mac App For Web Developers CodekitとはMac専用のGUIコンパイラーのアプリのことで、SassやらLessやらCompassやらこーひーすくりぷとやらをコンパイルしてくれたり、ブラウザをオートリロードしてくれたり、画像最適化してくれたりと、黒い画面が苦手な方安心◎のコーディングお助けツールです。 2でさらにビルトインサーバーやアセットなど機能が追加してパワーアップ。 Codekitを知らない人は、このまぼろしの木村さん西畑さんのスライド見れば全てわかります。 CSS
2時間でSassを習得！Sass初心者向け講習スライド大公開！ | WebNAUT by Beeworks
※この記事は2014年2月4日に執筆された記事です。現在は仕様が異なる可能性があります。 CSSを効率的に書ける言語として昨今話題のSass。 これから導入をお考えの方に向けて2時間でマスターできる初心者向けのSass講習スライドを公開致します。 普段CSSを書く人も書かない人もSassがどういうものかを知る良い機会ですので、是非ご覧ください。 スライドに沿って実践すればSassの基本を短時間でマスターできます！ この講習では目で見るよりも実際に触れる事で理解が深まるよう、実習スタイルを取っています。 実習に使うファイルセットはこちらからダウンロードして上記のスライドと合わせてお使いください。 https://webnaut.jp/download/markup_140204/sass.zip（3.5MB） Sassの良さを活かすためには、チーム全員がSassを理解することが大切 Sass
Autoprefixerによる、CSS3の管理 - kojika17
CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
無効なURLです
無効なURLです。 プログラム設定の反映待ちである可能性があります。 しばらく時間をおいて再度アクセスをお試しください。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Jade について。
GitHub - Jacminik/PSD-Export-Haml-Sass: This script supports you create sites. Create the html/css markup files from your Photoshop file easily.