Overview
Flexible layouts, done your way Neutron does more than just let you build your layout quickly, it lets you maintain your work or change direction entirely with much less effort than other frameworks require. This flexibility lets you iterate faster and easier, your code can now keep up with the design changes that happen through the life of a project. @include columns(); // Try changing the column
Autoprefixerによる、CSS3の管理 - kojika17
CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle
Sassで要素を1つずつ遅延表示させる簡単な方法
先日某阪神ファンからタイトルの件のコードを見せてもらって感心したんだけど、すっかり忘れてしまったのでググったら似たようなのが出てきたので紹介します。Sass、かつCSS3前提です Sass/Compass Animation Delay For Loop | Snippet Repo HTML<ul class="box"> <li class="element">1</li> <li class="element">2</li> <li class="element">3</li> <li class="element">4</li> <li class="element">5</li> <li class="element">6</li> <li class="element">7</li> <li class="element">8</li> <li class="element">
Middlemanユーザーもこれを入れればすぐにズルいデザインをはじめられます！ | mah365
意外と好評いただいているzurui-sass-railsをMiddlemanに対応させたGem、zurui-sass-middlemanを作りました。これでいちいちsassファイルを引っこ抜いて来なくてもzurui-sassを使えます！ 使い方 1. Middlemanプロジェクト内のGemfileに追加 gem 'zurui-sass-middleman', '~> 0.0.2' 2. Sassファイルからimport @import "compass" @import "zurui-sass" ※ compass前提なので、zurui-sassを読み込む前にcompassを読み込んで下さい。 3. あとはMixinを使うだけ .box +zurui-box-outer みたいな感じでMixinを使えるようになります。 Mixin自体の効果や使い方についてはこちらのページをご覧ください。
CSShake
Classes The basic collection Bs Basic Shake Ss Slow Shake Ls Little Shake Hs Hard Shake ⇄ Fixed Horizontal ⇵ Fixed Vertical ↻ Fixed Rotation Os Opacity Shake ✌ Crazy Shake ℇ Constant Shake % Chunk Shake Launch the animations from the parent with class 'shake-trigger' (customizable) Install Get started... $ git clone https://github.com/elrumordelaluz/csshake.git or $ bower install csshake or $ npm
画像を使わずCSSだけで任意の間隔の破線を描く | 12px.com
cssで破線を使おうと思ったらdottedとdashedの2種類しか用意されていないので、それ以外の間隔の破線を使用したい場合にはあらかじめ白黒のgif画像を用意して、背景に繰り返して使用する事が多いです。 しかしCSS3のlinear-gradientを使用すれば任意の間隔の破線を描画する事が可能です。 CSS3を使用するので対応ブラウザがちょっと狭くなりますが 1 2 、画像を用意するのとくらべて線分や間隔の調整も容易になりますし、Retinaディスプレイにも対応する事を考えたら（奇数の破線を使用する場合など）2種類の画像を用意する手間が省けますのでCSSで描画する方が楽チンです。 手順やり方は下記の4つの指定をすれば良いだけです。 破線の部分はbackground-imageを使用して背景画像として描画します縞模様はlinear-gradientを使用してグラデーションの濃淡で表現し
[Sass]泣くほど早い…コピペで今すぐ使える便利なmixinまとめ | Cappee Design
あとで読みたい人は… こんにちは、@cappeeです。 本格的にSass(SCSS)を仕事で使うようになってから早半年。 色々と試行錯誤しながら効率的にコーディングできるように工夫してきましたが、やっとこさある程度カタチになってきました。 これからSassを導入するというデザイナーさんもいるかと思うので、コピペで今すぐ使える便利なmixinをまとめて公開したいと思います。 泣くほどコーディングが早くなりますよ。 目次1. フォントサイズ2. テキストシャドウ2.1. 文字に1pxの黒いシャドウ2.2. 文字に1pxの白いシャドウ3. ポジション4. グラデーション4.1. 上下に明→暗4.2. 上下に暗→明4.3. IE8～9に対応する4.4. IE9に対応する5. 背景画像5.1. CSS Spriteの設定5.1.1. 文字の背景に入れる画像と文字を置換する画像5.1.2. アイコンな
![[Sass]泣くほど早い…コピペで今すぐ使える便利なmixinまとめ | Cappee Design](https://cdn-ak-scissors.b.st-hatena.com/image/square/e12901867bd44e22fee4be18b97fee940f375d69/height=288;version=1;width=512/http%3A%2F%2Fs.wordpress.com%2Fmshots%2Fv1%2Fhttp%253A%252F%252Fsass-lang.com%252F%3Fw%3D690)
Divshot - Static Web Hosting for Developers and Designers
Divshot has joined the Firebase team at Google! Firebase is a comprehensive suite of products for developers offered by Google, and by joining our vision with theirs, Divshot's mission continues onward at a grander scale! Firebase Hosting is Firebase's static web hosting service and is now powered in part by Divshot technology. However, all existing Divshot products including static web hosting an
Sass 3.3で追加された新しいデータタイプ「マップ」まとめ解説
前回の記事では、Sass 3.3で追加される「&」の新機能と@at-rootについて解説しました。今回は新しいデータタイプの「マップ」について解説します。 マップは色々な使い道があると思いますし、使い方によってはかなり便利なものですので、ライブラリを作っている方などは特に覚えておくと良いと思います。 マップとは マップは任意の名前と値のペアが集まったもので、名前をキーにして値を設定したり、取り出して使います。 マップの書き方ですが、名前と値をコロン（:）で区切り、複数記述する場合はカンマ（,）で区切り、それらを丸括弧（()）で囲みます。CSSのスタイルの書き方とちょっと似ていますね。 // マップ $map: ( key1: value1, // key1にvalue1を設定 key2: value2, key3: value3, ); // CSSのスタイル selector { pro
Railsプログラマはこれを入れればすぐにズルいデザインをはじめられます！ | mah365
先日のプログラマ向けデザイン勉強会で発表された「少ない手間と知識で”それなり”に見せる、ズルいデザインテクニック」（by 赤塚さん）の中に書かれていたSassのMixinをRailsで使えるGemにしてみました。 zurui-sass-rails: https://github.com/mahm/zurui-sass-rails sample: http://zurui-sample.herokuapp.com/ うおおずるい！ｗ RT @mah_lab: .@ken_c_lo さんのズルいデザインをGemにしてみました。 github.com/mahm/zurui-sas… サンプルはこちら zurui-sample.herokuapp.com (based on github.com/machida/Custom…) — TAEさん (@ken_c_lo) 11月 7, 2012 @m
NetBeansではじめるSCSS | Webエンジニアライフ
Less & Sass Advent calendar 2011の最終日25日目の記事です！ NetBeansでSCSSをはじめるには、 scss-editorプラグイン sass本体 が必要になります。用意するのはこの2つだけ。 SCSSとはなんぞや SCSSとは、CSS拡張メタ言語の1つであるSassの別記法です。 CSS拡張メタ言語は、現行バージョンのCSSに不満を持ったみんなでCSSをより良くしようと考えだしたもの。そのままでは使わず、CSSにコンパイルして使います。 CSS拡張メタ言語では、SassとLESSの二つが有名。 導入はLESSの方がJSでコンパイル出来る分、楽だと言われていますが、私はSCSSを選択しました。 Sassの詳しい説明は、Less & Sass Advent calendar 2011の一日目Sassで行こう！が参考になると思います！ で、そのSCSSのコ
Look for any SCSS files in a Directory, and change them to minimal-style .sass! (The better version!
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Redirecting…
Sass Color Generator
GitHub - oulu/oulu-rails: A mixin library for Sass.
gumbyframework.com
dart-sass/CHANGELOG.md at main · sass/dart-sass
DropCatch.com
https://github.com/pixate/freestyle/