転載、出典を明記してください：グレープシティ公式ウェブサイト、グレープシティは、開発者に開発者を支援する専門的な開発ツール、ソリューション、サービスを提供しています。
元のソース：https://dzone.com/articles/how-to-speed-up-your-design-process-using-modern-c
Webサイトのスタイルは、今までの外観とは大きく異なります。今いくつかの企業のオリジナルWebサイトのUIを振り返ってみると、ほとんどのインターネットユーザーは認識しづらいと思うでしょう。Webデザイン技術の革新のおかげで、今ではWebサイトは情報を表示できるだけでなく、興味深いアニメーション、多様なレイアウト、インタラクティブな要素を持つことができます。その中で、これらのほとんどはCSSによって実装されます。
したがって、CSSの出現により、元のプレーンなWebページに活力が注入されました。これがウェブサイトのユーザーエクスペリエンスがさらに進化した理由です。これが、今日のほとんどすべてのWebサイトが多かれ少なかれCSSを使用する理由の1つかもしれません。
今年、いくつかのCSSテクノロジーがFlexboxなどの新しい技術革新を生み出しています。GoogleChromeに読み込まれるページの83％がFlexboxを使用していますが、グリッドと呼ばれる別の新しいライバルが徐々に人気を博しています。さらに、CSSライティングモード、モバイルアニメーション、単一ページのWebサイト、柔軟なフォント、スクロールキャプチャなどのテクノロジも影響を与える可能性があります。
ただし、この記事では、主にCSSフレームワークを紹介するために、異なるCSSテクノロジーの類似点と相違点については説明しません。それらは過去数年で人気が出てきただけですが、ますます多くの開発者がそれらを使用し始めています。
CSSフレームワークとは何ですか？
CSSは、HTMLドキュメントのUI設計に役立つ設計言語として定義されています。CSSを使用した設計には多くの利点があり、XULやSVGを含むあらゆるタイプのXMLで使用できます。CSSフレームワークは、Webサイト構造の基礎として使用できるファイルを含む既製のパッケージのようなものです。
フレームワークを使用することには多くの利点があります。それらの一部を次に示します。
時間の節約：これは最も顕著な利点の1つです。CSSフレームワークを使用すると、開発者はアプリやウェブサイトを構築するときに最初から始める必要はありません。UIの設計、モバイル端末化、特定のブラウザーの互換性の問題の解決など、他の重要なタスクを勉強して集中する時間を空けることができます。
再利用可能なコード：プロジェクトが多数のページを含む大規模なプロジェクトであり、将来的に継続的に更新される場合、フレームワークを使用すると便利です。強力な再利用機能を備えたフレームワークは、プロジェクトの準備サイクルを大幅に短縮できると言えます。
ブラウザー間の問題：長い間、ブラウザー間のアクセスの違いに対処することは、ほとんどのフロントエンド開発者にとって最大の問題でした。ただし、CSSフレームワークは、ブラウザー間の違いを事前に見つけて解決し、どのブラウザーでも違いなく実行できるようにします。
標準構造は一貫性を保証します：フロントエンドフレームワークは通常、CSS、HTML、およびJavaScriptファイルで構成され、すべてのページの要素（デザインやフォームなど）の一貫性を保証するのに役立ちます。
優れたCSSフレームワーク
ブートストラップ
Bootstrapはもともと、チーム内で使用するツールとしてTwitterブループリントによって作成されました。しかし、それが公にリリースされた後、それは開発者によって広く使用され、使用率は増加し続けました。
ブートストラップは、警告ウィンドウ、ボタン、カルーセル、ドロップダウンメニュー、フォームなどの要素のデザインテンプレートを提供します。Bootstrapモバイルプライオリティ機能を使用すると、レスポンシブレイアウトを簡単に作成できます。これにより、複数のデバイスでアプリケーションの一貫したデザインを実現できます。
スケルトン
スケルトンは、「レスポンシブボイラープレートの簡単なサポート」で知られています。フレームワークには約400行のコードしかないため、軽量な要件を持つ小規模なプロジェクトや開発者に適しています。
フロントエンドフレームワークを使い始めたばかりの人にとって、これも良い選択です。ただし、SkeletonにはCSSデザインテンプレート、プリプロセッサ、およびより豊富な機能がないため、大規模なチームやプロジェクトにはあまり適していません。
ZURB Foundation
如果您正在寻找的是一个快速且响应迅速的前端框架，那么ZURB Foundation可能正是您要的。它允许您为所有设备创建生产环境的代码和原型。依靠ZURB Foundation支持具有“准系统结构”的框架结构，可以让用户快速地完成产品设计原型。同时它在GitHub上也有大量的支持，提交的数量超过了14000个，贡献者也在940个以上。目前华盛顿邮报和国家地理等网站均使用了ZURB Foundation框架。
UI Kit
UI Kit以具有高度可定制的轻量级元素而著称。基于使用它提供的模板，您将可以轻松创建各种Web界面。它的安装包里包含了CSS、HTML和JavaScript文件，以及用于Sublime Text和Atom编辑器的包。另外，它还提供30多个可混合搭配的模块化组件，以实现更多功能。这意味着您不必重复搜索标记和类名。
UI Kit与Bootstrap和Foundation等其他框架的不同之处在于它没有使用将页面分为12列的网格设置。它将它的布局分为三个组件，即Flex、Grid和With。不过由于相关的支持资源不多，所以这个框架更适合有相当经验的开发人员来使用。
Bulma
Bulma作为最常用的框架之一，已经得到了超过15万名开发人员的支持。它是基于Flexbox的免费开源框架之一。Bulma易于使用，即使是作为初学者，也是非常易于上手的，因为该框架仅保留了开发人员开发响应式网站的最低要求。同时，在支持方面，Bulma在GitHub上拥有一个庞大的用户社区，可提供支持。
Materialize
这个前端CSS框架是根据Google的设计规范而创建的。它带有易于使用的IZ列网格，在布局方面具备良好的基础。它的包里还包括了按钮，卡片，表格，图标以及许多其他随时可用的常用组件。
您还可以使用如：拖出式移动菜单，涟漪动画效果，SASS mixins等功能。另外，Materialize也是可以在任何类型的设备上使用。
Semantic UI
尽管Semantic UI是作为较新的框架之一，但它在几个方面的努力还是值得肯定的。首先，它在代码中使用了自然语言，这可能受到初学者开发人员的青睐。而且它的继承系统中有一个高级主题变量，所以这使你在设计时拥有较高的自由度。
使用Semantic UI时，您不必使用其他库，因为它附带了大量的第三方库。这使您的Web开发过程更加方便。凭借它出色的功能，可能很轻松俘获新老开发人员。
Tailwind CSS
Tailwind CSS与其他CSS框架不同，因为它的包中没有预置任何的UI组件。该框架更多注重的是实用性。它附带的CSS类可以在您构建网站时需要设置颜色、大小、位置等内容时为您提供极大的帮助。Tailwind是为那些希望在网页设计方面拥有完全自由度的开发人员而设计的。
Picnic CSS
该框架非常轻量，压缩后代码尺寸不到10KB。Picnic CSS还提供了基于Flexbox的网格布局和许多UI元素，还包括了适合初学者使用的模态窗口和导航栏，您可以使用它们来启动您的Web开发项目。
Ionic
这个开源的移动UI框架可用于为原生Android和iOS开发出高网络性能的应用程序。它带有直观的UI组件，有助于加快网站或应用程序的开发过程。
Ionic提供卓越的原生功能和速度，并能很好地与社区、主要分析、身份验证、插件和其他功能集成一起工作。
Pure.css
Pure.css专注于移动优先的理念。由于Pure.css是模块化的，您可以很轻松地导入您要使用的包。您还可以访问大量可供下载和安装的布局。Pure.css 以其轻量著称。在压缩后，这个框架的尺寸只有3.8KB。
mini.css
mini.css也是一款能够提供完整功能且足够轻量的框架，它压缩后的大小约为10KB，虽然它是个很轻量的框架，但它仍然提供大量布局和UI的元素。如果您想了解它的工作原理是怎样的，您可以通过它的文档了解。
Base
如果您的主要工作是为所有的应用程序和Web开发项目打下坚实的基础，那么您可以尝试一下这个模块化框架。Base自称是 “坚如磐石”的响应性框架。Base基于Normalize.css，并提供基本的、可自定义的样式。如果你的需求只是一个简单的框架，那么它可以满足你。
Concise CSS
如果你需要的是一个简单并实用的框架，那么Concise CSS可能会是你的选择。它的框架是为那些想要“放弃臃肿”的开发人员准备的。顾名思义，它们为开发人员提供的是不包含其他额外附件的包，如果需要更多UI元素，您可以通过单独的工具包完成添加。
Mobi.css
压缩后的Mobi.css只有2.6KB，它是您能找到的最小的框架之一。它的执行速度是它的特点，特别是对于移动设备，所以如果你追求的是速度，那么试试这个框架吧。
不过，和其他模块化框架一样，如果您需要的不只是它们提供的基本样式和功能，您可以在其基础上以模块化方式进行构建。
总结
各类CSS框架除了为用户提供了项目正常运行所需的基础外，还确保了您的应用在各浏览器中访问的一致性和包含响应式的网站设计。这样您就可以集中精力更好地去专注于应用程序的内容和策略的制定。那么，希望您能从上面的列表中找到符合您需求的框架。