タグ

sassに関するPinon3sのブックマーク (5)

  • Motion UI | Playground from ZURB

    Motion UI is a Sass library for quickly creating CSS transitions and animations. We originally bundled this code with Foundation for Apps, but we've souped it up, made it its own library, and open sourced it ahead of the launch of Foundation for Sites 6. Getting Started Install Motion UI with Bower or npm. The package includes a CSS file with a bunch of premade transitions and animations, along wi

  • 知らないと損するSassの組み込み関数徹底解剖 | Yuhiisk

    Sassを使うにあたって、覚えておくと必ず幸せになれる組み込み関数というものがある。 自分で定義できる @function とは違い、Sassに最初から備わっているものだ。 Sass自体の機能だから、もちろんCompassなどのフレームワークを使用する際も使うことができる。 普段Sassを使っているひとでも、Sassの組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。

    知らないと損するSassの組み込み関数徹底解剖 | Yuhiisk
    Pinon3s
    Pinon3s 2015/07/17
  • Sassでカラーを変数に設定してCSSのコーディングを速くする方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    どうもですよ、はやちですよ✌(´ʘ‿ʘ`)✌ このあいだ昼休み中に思い切ってPS4と「龍が如く0」と「Final Fantasy 零式」をポチってしまいました( ˘ω˘)<計65,000円なり しばらく節約のためお昼のお弁当生活がんばります(◞‸◟) そんなことはどーでもいいですね。 今回はSassで1つのカラーコードを使い色々と管理をする方法をご紹介します( ˘ω˘)☝ 設定方法 まずカラーを変数で定義します。 $base:#46AFED; $baseの色を明るく設定したい場合はlightenで設定します。 %で明るさの値を変えます。 color:lighten($base, 10%); これをまた変数で定義するといいかもですね。 $Lighten10:lighten($base, 10%); 設定方法は以上になります、カンタンですね( ˘ω˘)☝ 設定できる種類 設定できる色合いは以下

    Sassでカラーを変数に設定してCSSのコーディングを速くする方法 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • Blackhole·軽量、レスポンシブ対応のSass/CSSフレームワーク MOONGIFT

    スタイルシートのフレームワークはとても数多くあります。有名なところではBootstrap/Zerb/Ionicなどがありますが、有名なものは情報が多い一方、使った時のデザインが似通ったものになってしまいます。 そこで人と違ったフレームワークを採用するのも面白さがあります。もちろんカスタマイズのしやすさなども大事でしょう。そこで今回はBlackholeを紹介します。 Blackholeの使い方 スクリーンショットを多めに紹介します。 ヘッダー。 ボタン。 インプット。 こんな感じにインプットを警告表示にすることもできます。 タブ。 右側にタブとプログレスバー。 ドロップダウン。 プロフィール入力。 ネストできるリスト。 メニュー。 ナビゲーションバー。ページネーション。 アラート。 通知。 ボックス。 リボン。 ボックス+アイコン。 テーブル。 アイコン。 こんな感じにエフェクトもできます。

    Blackhole·軽量、レスポンシブ対応のSass/CSSフレームワーク MOONGIFT
    Pinon3s
    Pinon3s 2015/03/16
    かわいいフレームワーク
  • 今日から使える! Sass/compass ゆるめ勉強会

    Sass/Compass ってよく聞くけど、なんか難しそう…って思っている主にデザイナー/HTMLコーダーさん向けの勉強会で利用したスライドです。勉強会にはハンズオンが組み込まれていたので、この資料には中途半端な部分がありますがご容赦ください。 (*'-'*) 内容的には、基礎的な事柄を、活用のための考え方を添えて解説しています。何かの参考になれば幸いです。Read less

    今日から使える! Sass/compass ゆるめ勉強会
  • 1