• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
mocurot nort

mocurot nort

  • Contents
  • About
  • Contact

Sassのフレームワークあれこれ

2018-04-20 by mocurot コメントを書く

フレームワークとは枠組み、構造、骨組みなどの意味で、プログラミングでよく使われる汎用的な機能、構成のまとまり。
Sassにも多数のフレームワークが存在しており大変便利だが、フレームワークに頼りすぎるとユニークなデザインやレイアウトが犠牲になってしまうのでご利用は計画的に。

Sassのフレームワーク

一般的なフレームワークといえば、SassやLESSなどのCSSを効率良く書くものや、BootstrapのようなCSSデザインフレームワークが有名だ。

Sassのフレームワークといえば、compassがよくあげられていたが、Ruby Sassよりも高速なC/C++製 LibSassの登場に伴いCompassの利用者は一気に減少。2016年、「今後メンテナンスしない」と発表された。

ソフトウェアフレームワーク(英: software framework)とは、プログラミングにおいて、一般的な機能をもつ共通コードをユーザーが選択的に上書きしたり特化させたりすることで、ある特定の機能をもたせようとする抽象概念のことである。単にフレームワークとも呼ばれる。
引用:wikipedia


Sassフレームワーク導入のメリット

  • 生産効率がいい
  • 実装ルール、デザインを統一しやすい
  • デザイン知識がなくとも「それなり」のものが作れる

Sassフレームワーク導入のデメリット

  • 学習コスト(使い方を覚える時間)
  • 古いブラウザに対応していない場合もある
  • ユニークなデザインに対応できない場合がある

フレームワークの種類

機能拡張系、パーツ系を含むオールインワンのフレームワークから、パーツ系などに特化したフレームワークがあるので、フレームワークにお任せしたい分野を決めて、用途に応じて適宜導入すると良いだろう。


総合フレームワーク

オールインワンの総合フレームワーク。これさえ入れておけばデザインからCSSコードの出力全てお任せ?

Boostrap

一番のメジャーどころ。ドキュメントも重質している。デザインテンプレートも充実しているフレームワーク。
https://getbootstrap.com


Foundation

モバイルファーストに特化した、レスポンシブに強いフレームワーク。ウェブサイト用とHTMLメール用の2種類が用意されている。
https://foundation.zurb.com


Materialize

Googleが提唱したマテリアルデザインに特化したフレームワーク。
http://materializecss.com


PURE

Yahoo!が開発・提供しているフレームワーク。必要最低限の機能を備えている。
https://purecss.io


Semantic UI

直感的にUIを使える設計になっていてカスタマイズもしやすい。
https://semantic-ui.com


機能拡張系フレームワーク

Sassミックスイン集。数年前まではCompassにお任せしていた分野。アップデートが続いているのでCompassより優秀だ。

Bourbon

数年前まではCompassかBourbonの2択と言われていた機能拡張系フレームワーク 。GUIツールも多くが対応している。
https://www.bourbon.io


Animate.scss

CSSによるアニメーションを簡単に実装することができるフレームワーク。
http://geoffgraham.me/animate-scss/


Sass MediaQueries

メディアクエリーのミックスイン集。
https://github.com/rafalbromirski/sass-mediaqueries


パーツ系フレームワーク

パーツに特化したフレームワーク。ボタンやフォームなどのパーツのスタイリングに特化している。

UIKit

安定した(よく見る)ユーザインターフェイスを使いたいならこれ。
https://getuikit.com


BUTTONS

ボタンに特化したパーツ系フレームワーク。
http://unicorn-ui.com/buttons/


レイアウト系フレームワーク

グリッド、レスポンシブデザインを簡単に導入できるフレームワーク。

Neat

Bourbonシリーズのフレームワーク。ドキュメントが丁寧でレイアウト系フレームワーク入門には最適か。
https://neat.bourbon.io


Susy

Sassの公式サイトでも採用されているフレームワーク。とにかく軽いと言われている。
http://oddbird.net/susy/

関連

Filed Under: Sass 関連タグ:CSS, SASS

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

最初のサイドバー

Author

NAME : mocurot
the mocuLogの管理人。フロントエンドエンジニア、バックエンドも少々。
Mac、iPhone、Kindle、Guitar、NINTENDO、SONY、FromSoftwareに関心を示します。

  • GitHub
  • RSS
  • Tumblr
  • Twitter
  • Youtube

Recommended Articles

  • macでKindle電子書籍の作成(epubから.mobi)
    macでKindle電子書籍の作成(epubから.mobi)
  • underscoresでWordPressのテーマを作る1(導入)
    underscoresでWordPressのテーマを作る1(導入)
  • 6ヶ月プロテインダイエットをしてみて
    6ヶ月プロテインダイエットをしてみて
  • ios safariでのスクロールバー表示について
    ios safariでのスクロールバー表示について
  • ダークソウル リマスター版の壁紙
    ダークソウル リマスター版の壁紙
  • UNDERSCORESでWordPressのテーマを作る2(準備)
    UNDERSCORESでWordPressのテーマを作る2(準備)
  • SassでFont Awesomeを使う
    SassでFont Awesomeを使う
  • ParallelsのCentOSにSSHで接続
    ParallelsのCentOSにSSHで接続

タグ

AMAZON ANKER APPLE APPLE WATCH APPS BLOOD BONE CAMERA CENT OS COMPASS CSS DARK SOULS DB DESIGN DIET EMMET GADGET GIT GITHUB GUITAR GULP HTML IPHONE KINDLE LEMP MAC MUSIC NGINX NINTENDO NODE.JS NOTE PHP PS4 PYTHON SASS SCSS SEKIRO SERVER SWICH WORDPRESS _s
プライバシーと Cookie: このサイトは Cookie を使用しています。このサイトの使用を継続することで、その使用に同意したとみなされます。
Cookie のコントロール方法を含む詳細についてはこちらをご覧ください。 Cookie ポリシー

Copyright © 2021 mocurot ・ ログイン