プログラミング

プログラミング

PR

2017年にリリースされたCSSフレームワーク、ライブラリ、ツール58選!【パート2】

4,182 views

読了時間 : 約4分46秒

トレンドの変化とCSSの進歩によって、最近リリースされた無料のリソースやツールは、おどろくべき数にのぼります。

しかし驚いている場合ではありません。これら時間節約に役立つCSSライブラリーとツールは、未採用であれ既に馴染まれているものであれ、CSSプロパティのクリアーな学習の窓口として構築されているのです。

本記事では、前後半にわけて、昨年(2017年)にリリースされたCSSライブラリ、フレームワーク、ツールから厳選したものを50個集めました。多様なカテゴリーを含んだコレクションです。

 

後半

7.Atomic CSSフレームワーク

8.CSS Webフレームワーク

9.Lightweight CSSフレームワーク

10.雑多なCSSツールの束

 

 

以下、前半

1.Flexboxのツール&ライブラリ

2.CSSグリッドツール

3.CSSボタンライブラリ

4.CSSコンポーネント

5.CSSアニメーションツール

6.CSSリファレンス、ガイドとチェックリスト

 

 

7.アトミックCSSフレームワーク

 

フラクチャーズ

Fractures – 非ブロック的で原子的なユーティリティクラスのセットが使用可能な、ベースラインの原子的CSSツールキット。デザインシステムとプロトタイプをブートストラップするのに役立ちます。

fractures

バイオマティックUI

Biomatic UI – フレキシブルでアトミック‐フォーカスなCSSフレームワーク。

Biomatic UI

 

 

 

8.CSS Webフレームワーク

 

追い風CSS

Tailwind CSS – 迅速なUI開発のためにユーティリティーを最重視したCSSフレームワーク。

Tailwind CSS

 

PaperCSS

PaperCSS – 若干カジュアルなテイストのCSSフレームワーク

PaperCSS

 

靴ひも.css

Shoelace.css – 必ずしもブート全体が必要ではなくCSSを組み直す場合のために、様々な役立つコンポーネントが散りばめられたCSSスターターキット。

Shoelace.css

 

攻撃用移動やぐらCSS

Turret CSS – スタイル・ブラウザ動作の正規化フレームワーク。 レスポンシブでアクセシブルなWebサイトの迅速な開発のために。

turretcss

 

トラウェル(移植ごて)

Trowel –  CSSフレームワークの作成と使用を可能にするSassツールキットです。

Trowel

 

アンネイムド(名なし)

Unnamed – Aiではなく人間によって作られたカラフルなCSSフレームワーク。

Unnamed

 

awsm.css

awsm.css – クラス、属性などなしで、タグのみでセマンティックHTMLマークアップを美化するためのCSSライブラリ。

awsm.css

 

ブルータリスト・フレームワーク

Brutalist Framework – ブルータルなデザインのトレンドにぴったりなオープンソースのフレームワーク。

Brutalist Framework

 

BBC Grandstand

BBC Grandstand – 一般的なCSSアブストラクションとユーティリティヘルパークラスのコレクション。

BBC Grandstand

 

イオータCSS

iotaCSS – スケールのために構築された、オープンソースSASSベースのスマートなOOCSSフレームワーク。

iotaCSS

 

セマンティック UI

Semantic UI – ヒューマン・フレンドリーなHTMLを使用して美しくレスポンシブなレイアウトを作成するのに役立つ開発フレームワーク。

Semantic UI

 

 

9.CSSフレームワーク

 

Luxbar

Luxbar – CSSのみで作られた、鳥の羽根ぐらい軽いレスポンシブなナビゲーションバー。

Luxbar

 

ミニ.css

mini.css – gzipされた約5KBの限界内ででできるだけ多くの機能を提供してくれる。

mini.css

 

ワイヤーフレームCSS

Wireframe CSS – ワイヤフレーム用の最小限のCSSフレームワーク。

wireframe

 

レスグリッドボイラープレート

Less Grid Boilerplate – CSS GridとLESSで構築された軽量な12列のCSSグリッドシステム。

Less Grid Boilerplate

 

カーネル(中心部).css

kernel.css – マテリアルデザインのスペックからインスパイアされた、邪魔な要素を排した軽快でセマンティックなCSSおよびJavaScriptフレームワーク。

kernel.css

 

ペタル(花びら)

Petal – モダンで軽いCSS UIフレームワーク。 LESSに基づいています。

Petal

 

テントCSS

Tent CSS – アウトドア・サバイバルからインスピレーションを受けたという、巨大かつシンプルで堅牢なフレームワーク。サイトを構築するための基礎として。

Tent CSS

 

Spectre.css

Spectre.css – 迅速で拡張性の高い開発のための、軽量でレスポンシブな最新のCSSフレームワーク。

Spectre.css

 

We recently published a collection of new, lightweight CSS frameworks.

 

 

10.雑多なCSSツール

 

Gradientify

Gradientify – コピー&ペーストできるCSSコードを含むグラデーションのコレクション。

Gradientify

 

クリティカルパス CSS ジェネレイター

Critical Path CSS Generator  – ページのレンダリング時間をすぐに短縮します。

Critical Path CSS Generator

 

Grabient

Grabient – CSSまたはSketchとしてエクスポート可能なあらゆる種類のグラデーションを作成するためのオンラインツール。

Grabient

 

CSSRooster

CSSRooster – ディープ・ラーニングをしながらHTMLのCSSクラスを書くボット。

CSSRooster

 

Webグラディエンツ

WebGradients – サイトのどの部分のコンテンツの背景としても使用できる180のリニアなグラデーションの無料コレクションです。

WebGradients

 

Angled Edges

Angled Edges – SVGを動的にエンコードすることにより、セクション上にエッジを作成するためのSassミックスイン。

Angled Edges

 

プランバー(配管工)

Plumber – あなたのページに垂直なリズムを加えることで、見栄えの良い書類を作成し、CSS開発をスピードアップします。

Plumber

 

 

以下、前半

1.Flexboxのツール&ライブラリ

2.CSSグリッドツール

3.CSSボタンライブラリ

4.CSSコンポーネント

5.CSSアニメーションツール

6.CSSリファレンス、ガイドとチェックリスト

 

 

 

※本記事は、50 of Our Favorite CSS Libraries, Frameworks and Tools from 2017を翻訳・再構成したものです。

 

 

関連記事

 

おすすめ新着記事

おすすめタグ