Cardinal • Build more with less.
What is Cardinal? Cardinal is a modular, “mobile-first” CSS framework built with performance and scalability in mind. The purpose of this framework is to make it easier for front-end web developers to prototype, build, scale, and maintain CSS for responsive websites, user interfaces, and applications. Cardinal omits many aesthetic design decisions that often bog down other CSS frameworks (which ar
CSS Preprocessor Shootout（個人的な） - inkdesign
13 Jan 2013 CSS Nite LP, Disk 26「CSS Preprocessor Shootout」でLESSについてのお話をしてきた。 当日の雰囲気や実況についてはハッシュタグを追っていただくとして、ちょっとだけプリプロセッサ選びについてのフォローアップをば。 CSSプリプロセッサはどれがいいの？ イベントのサブタイトルにもなっているCSS Preprocessor Shootoutの元ネタは、イベントページの冒頭でも紹介されている通り、Sass vs. LESS vs. Stylus: Preprocessor Shootoutという記事です。（英語ではありますが、この記事で基本的な文法は総ナメできます。） CSSプリプロセッサの基本的な機能はどれも一緒で、それに+αの違いがある。それゆえに「どれがいいの？」というのを知りたい、というのがある反面、しゃべる側も、どれが
ブラウザでJSX, CoffeeScript, SCSS, LESSをすぐに試せる魔法の1行
ブラウザだけでjavascript, HTML, CSSを書いて実行できるサービス「jsdo.it」が、ちょっとパワーアップしました！ これまでの言語に加え、JSX, CoffeeScript, SCSS, LESSを実行できるようになりましたー！！ 「ちょっと試したいけど環境を作るが面倒...」「SCSSのmixinをシェアしたい」などなどブラウザだけで解決できちゃいますよ♪ 使い方 コードの1行目に特定のコメントを記述するだけです！ JavaScript → JSX JavaScriptの1行目に以下のコメントを記述してください。 // #! jsx JavaScript → CoffeeScript JavaScriptの1行目に以下のコメントを記述してください。 #! coffeescript CSS → SCSS CSSの1行目に以下のコメントを記述してください。 /* #! s
Emacsユーザーのための LESS 導入。 - 日々、とんは語る。
Emacsユーザーが快適に LESS を使えるようになるまでの導入記事です。 LESS とは何か。 LESSとは、CSSメタ言語と呼ばれるもので、LESS の他に Sass(SCSS) と呼ばれるものがあります（SassとSCSSはちょっとだけ文法の違う兄弟みたいなもの）。 LESS と Sass の違い 文法がわりと違います。詳しくははじめてのCSSメタ言語はLessがおすすめ！ « NAVER Engineers' Blogあたりを参照。 LESS の導入。 LESS は JS によるクライアントサイド（要するにブラウザ上）の変換（less->css）に対応しているので、てっとり早く試してみるのに向いています。 具体的には style.less ファイルと一緒に、lessサイトからダウンロードできる less.js を読み込むだけで使えます。 <link rel="stylesheet
LESSをはじめようと思ったらとりあえずBootstrapのmixinsを入れておくと便利
LESSをはじめようと思ったらとりあえずBootstrapのmixinsを入れておくと便利 LESSにはMixinという複数のプロパティをまとめる機能があります。 例えばcss3のベンダープレフィックスなど設定しておけば、あとで１行で呼び出すことができます。 で、実際作成するにあたり一から作るより Twitter Bootstrap を利用すれば、よく使いそうな機能があらかじめまとまってるのでいいかもしれないです。 投稿日2012年04月17日 更新日2012年04月17日 css3プロパティ 準備ができたところで早速使ってみましょう。 最初はCSS3で追加された「border-radius」で角丸にしてみます。 たとえば「id="box1"」でマークアップした「div」があります。 html <div id="box1"></div> 通常のcssでしたら次のようになりますよね。 css
LESS楽しいれす(＾q＾)
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
【第27回 HTML5とか勉強会レポート】 LESSやTwitter Bootstrapで簡単デザイン
【第27回 HTML5とか勉強会レポート】 LESSやTwitter Bootstrapで簡単デザイン：D89クリップ（42） LESSやTwitter Bootstrapなどのツールを利用した、スマートなデザイン方法など、デザイン面にフォーカスされたHTML5とか勉強会レポート LESS、Twitter Bootstrap！ 2012年3月13日、ニフティで「第27回 HTML5とか勉強会」が開催されました。HTML5とか勉強会は、HTML5に関心のあるエンジニアやデザイナー向けの勉強会です。今回のテーマは「リッチクライアントをデザインする」でした。 HTML5やCSS3を利用することで、インタラクティブなコンテンツを作れるようになりました。その代わりにコンテンツをどうデザインするか、どうアプローチするかといったことを、デザイナーだけでなくデベロッパーも意識する必要があります。セッション
はてなにおけるCSSメタ言語（CSSプリプロセッサ）の導入について - Hatena Developer Blog
こんにちは、id:tikedaです。数年前から登場して以来、利用されるケースが増え続けているCSSメタ言語（CSSプリプロセッサ）。近年、様々な大規模サービスへの導入が進む中、はてなのサービス開発においても導入を行うため、2012/3/6に勉強会を実施しました。その内容を公開いたします。CSSメタ言語そのものの説明よりも、社内導入の為に必要な内容が中心となります。 アジェンダ どんなものがあるか 導入の背景と目的 はてなでの選択 何がやれるか どう使うか 事例・実演 運用ルール 今後の展望 どんなものがあるか Sass(scss,sass) http://sass-lang.com/ Less http://lesscss.org/ Stylus http://learnboost.github.com/stylus/ Tass http://cho45.github.com/tasscs
Sass vs. LESS vs. Stylus: Preprocessor Shootout | Envato Tuts+
Wielding the true power of a CSS preprocessor is an adventure. There are countless languages, syntaxes, and features, all ready for use right now. In this article, we will be covering the various features and benefits of using three different preprocessors—Sass, LESS, and Stylus. Introduction Preprocessors produce CSS that works in all browsers. CSS3 preprocessors are languages written for the sol
WinLess - Windows GUI for less.js
Online LESS Compiler This Online LESS Compiler can help you to learn LESS. You can go through the examples below or try your own The examples are based on the official LESS documentation Credits Author: Mark Lagendijk Graphical designer: Elmar Kouwenhoven Used components: LESS.js, the original LESS compiler, by Alexis Sellier Node.js
LESSの習得 | 離島に住みたいFEブログ
less,sassやcompassが最近話題なので、以前入れておいたlessについてしっかり学ぼうと思います。 lessはsass,compassに比べて簡易なようですが、全部の機能を見るとかなり使えそうな印象。機能もたくさんあるし。 文法はネイティブCSSに近いので習得コストは低い。less以上の機能が必要になった時にsassやcompassを学べば良いし、 まずはlessの全機能を把握して、実務に取り入れながら習得・効率化していこうと思います。 変数 プロパティの値を変数として扱うことができます。 さらに数値の加減乗除ができます。 //.less @color : #5B83AD; #header { color:@color } //.css #header { color:#5B83AD } ※LESSの変数は正確には定数なので、一度値を挿入後は変更ができないです。 Mixin あ
なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog
こんにちは。最近、実は JavaScript よりも Perl が好きなたんぽぽグループの大形です。 Perl の、仕様書など無いところがたまりません。勉強しても勉強しても...。いえ、今回は Perl の話ではありませんでした。 一昨日の土曜日ですが、会社にお金を出して貰って、 SwapSkills さんの『CSSを便利に使うための LESS入門』にお邪魔してきました。 何を隠そう、いや、隠すことは何も無いのですが、私は今「クライアントサイドのバックエンド担当」として働かせていただいてます。つまるところ、デザイナさんやコーダさんが日々目の前の案件と戦い続けている中で、一歩引いたところからお助けユーティリティを作ったり、俯瞰して工程を見直してみたり、デザインにおける継続テストの仕組みを考えたり、新しく何かの役に立ちそうなものをどこからか引っ張ってきたりするお仕事です。 そんなお仕事の一環と
LESS 1.2.0
less-1.2.0-whats-new.md LESS 1.2.0 Now available on http://lesscss.org and NPM. This release opens up the powerful branching capabilities of mixin guards and pattern-matching as an alternative to conditional statements. In trying to stay as close as possible to the declarative nature of CSS, LESS has opted to implement conditional execution via guarded mixins, in the vein of @media query feature s
Node.jsでLESSファイルを動的にコンパイルする :: 5509
「Less & Sass Advent calendar 2011」9日目のです。 流れをぶった切ってしまってあれなのですが、Node.jsとあわせてLESSファイルを動的にコンパイルするようなやつ書きます。 みなさんご存知の通りLESSはJSで書かれているので、Node.jsを使ったアプリでは動的にLESSファイルをコンパイルできます。 ところがLESSのサイトに書いてある方法は var parser = new(less.Parser); parser.parse('.class { width: 1 + 1 }', function (err, tree) { if (err) { return console.error(err) } console.log(tree.toCSS()); }); ・・・やさしくない！ まあでも早い話、parse(hoge, func)のhogeにL
はじめてのCSSメタ言語はLessがおすすめ！ « NAVER Engineers' Blog
こんにちは、NAVER UIT つしまです。 Less & Sass Advent calendar 2011の8日目です。 これまでのAdvent calendarの記事で、SassやLessの概要、活用法などが見えてきました。 今回は、「Lessは機能不十分そうだし、Sassオシ多いし、Sassを使いはじめようかな・・」と思っている方に向けてはじめてのCSSメタ言語はLessがおすすめというおはなしです。 Lessって？ 既にCSSとフレームワークとメタ言語(2日目記事)やLESS初心者向けのナニカ(4日目記事)でも紹介があったとおり、LessはCSSを記述するためのメタ言語です。 ただ後発であるにも関わらず、SassにあるのにLessにない機能は結構あって、例えば、ifやforなどの制御文、extendが使用できなかったり、cssへの出力形式がSassほど選べなかったり・・
LESS初心者向けのナニカ - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 こんにちは『Less & Sass Advent calendar 2011』4日目。Sig.@sigwygがお送りします。「ハードル下げるよ」と言っていたtacamyが文量ある良記事を上げており、高まるハードルに恐々としている今日この頃。皆さん如何お過ごしでしょうか。まあ僕はマイペースで行きます。久しぶりのBlog記事ですしね！（言い訳） さて、小狡く予防線を張ったところでLESS紹介です。LESSはCSSに変数やら関数やらネストやらを実装します。Sassと同じようなCSS拡張とかメタ言語とか言われるモノです。この辺りの解説はdebiruくんの記事が詳しいので割愛。
Sassよりラクチン，LESS.appで簡単CSSコンパイル生活！（Mac限定）
LESSとSassを比較していました LESS « The Dynamic Stylesheet language Sass - Syntactically Awesome Stylesheets ここ半年ぐらいの間に，名前を聞くようになったSassと，それに影響されて作られた後発のLESSを比較検討したところ，以下のような理由からLESSを使うことにしました． 今回は，自分の作業の効率化はもちろん，将来的にチームでシェアできる技術になり得るか，という観点から選択しています． LESSを選ぶ理由 LESS.appというGUIツールが存在する node.jsで動くWebフレームワークExpressがLESSに標準対応している(らしい) 文法がSassより素直＆シンプルで慣れてもらいやすそう この中でも，LESS.appの存在が一番の決め手となって，マイナーなはずのLESSに軍配が上がってしま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Quick Tip: Never Type a Vendor Prefix Again | Envato Tuts+
Page not found
GitHub - plasticscafe/vim-less-autocompile: vim auto compile when edit
