LESS で勢いよくサイト制作する人のためのテンプレ「Maki」を作りました | SANOGRAPHIX
LESS で勢いよくサイト制作する人のための Boilerplate 「Maki」を作りました。 なんで Maki かっていうのは察してください。 「サイトをフルスクラッチするときに CSS (LESS) の下準備が大変だなァ」みたいな時があると思うんですけど、そういう時にあらかじめ下ごしらえを済ませてある LESS 一式です。これを土台にするとスムーズに LESS を書き始められます。というか僕が普段からいつも使ってます。 特徴は、CSS フレームワークみたく厚くなく、本当に最初の下ごしらえの部分しか書いていないことです。いろんなプロジェクトで使いまわせる共通のフレームワーク作ろうみたいに試みたことがあるんですが、結局各サイトで必要な要素が全然違うので、土台だけを合わせる感じが良いかなーという結論で落ち着きました。 詳しい使い方は Readme に書いてあります。 よかったら使ってみてく
Preboot
Preboot A collection of LESS mixins and variables for writing better CSS from @mdo. Download Preboot View project on GitHub Tweet Introducing Preboot Preboot is a comprehensive and flexible collection of LESS utilities. Its original variables and mixins became the precursor to Bootstrap. Since then, it's all come full circle. After a two-year hiatus, Preboot has been reborn with many of the LESS v
LESSを自動的にCSSにしてくれるサーバー: [LESS][CSS]LESSを自動的にCSSにしてくれるサーバー, 1. ファイルの用意, 2. サーバーに必要なものを一気に用意する, 3. サーバー用のファイルを用意する, 4
[LESS][CSS]LESSを自動的にCSSにしてくれるサーバー LESSの使い方を調べていると、 ブラウザーで less.js を読み込んで動的にCSSに変換する lessc コマンドでその都度変換する の紹介は見掛けるんですが、 自動でLESSをCSSに変換するサーバーを使う というのが見当たらなかったので書いてみます。 なお、実際に公開する場合には、コマンドでCSSに変換してサーバーに置いておくほうが、やっぱり速いし負荷も少ないし、何よりサーバー側の設定が楽です。 1. ファイルの用意 サンプルとして、次のようなファイルを用意してみます。 index.html <!DOCTYPE html> <link rel="stylesheet" href="/css/sample.css"> <h2>This is an example</h2> <section id="hea
Socialite by tmort
View the Project on GitHub tmort/Socialite Download ZIP File Download TAR Ball View On GitHub Socialite v2 Because if you're selling your soul, you may as well do it asynchronously. Socialite provides a very easy way to implement and activate a plethora of social sharing buttons — any time you wish. On document load, on article hover, on any event! Author: David Bushell http://dbushell.com @dbushe
LESS Elements: a collection of useful LESS mixins
A set of basic mixins for the LESS CSS pre-processor. Most of these mixins focus on consolidating cross-browser prefixes into single, concise declarations. LESS Elements is not an extensive mixin library — just the essentials. See the mixins in actions on the test page. To use: Download the "elements.less" file.Place it in the same folder with your other LESS files.Reference it at the top of your
LESS.jsでブラウザ上からlessファイルの更新をwatchして変更を自動で反映する
LESSファイルの更新を監視＆反映 お手軽にLESSを使うときは、HTMLにLESS.jsを直接読み込んで、オンブラウザで実行すると便利です。リモートに仕込みをする必要もありませんし、ローカルでコンパイルしてからアップロードするといった手間からも解放されます。 そいで今回は、あまり知られていない（と思われる）ブラウザ上のLESS.jsでlessファイルの更新をwatchする方法について。 後日の追記 以下に色々書いてありますが、lessファイルにLast-Modifiedヘッダが付いてるとwatchしても、developmentでもlocalStorageにキャッシュされたり、XHR監視されても反映されなかったりうまく動かない。 nginxであれば、例えばadd_header Last-Modified "";等の記述を加える必要が。HTTPヘッダ関わらず、フロント側のみで、ちゃんと適用さ
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
Getting started | Less.js
It's CSS, with just a little more. Use with Node.js: npm install -g less > lessc styles.less styles.css Or the browser: <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> Or try the online playground ! 🆕 Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official do
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ワンクリックでHTMLからCSS/LESS/SASSを自動生成してくれる『OneClickCSS』 | IDEA*IDEA