フロントエンド技術を学ぼう 3-9.CSSツール

Front-end Developer Handbook 2017を教科書にフロントエンド周りの技術を習得する連載。

第61回は Part III: Front-End Dev Toolsから、9項のCSS Toolsを紹介します。

CSSツールの説明です。

CSSツール

デスクトップ＆モバイル CSS フレームワーク

• Base
• Basscss
• Bulma
• Bootstrap 3 or Bootstrap 4
• Concise
• Foundation
• Material Design Lite (MDL)
• Metro UI
• Picnic
• Pure.css
• Semantic UI
• Skeleton
• Spectre.css
• tachyons

モバイル専用 CSS フレームワーク

• Ratchet

リセットCSS

CSSリセット(またはリセットCSS)は、短く、しばしば圧縮された(縮小された)一連のCSSルールで、すべてのHTML要素のスタイリングを一貫したベースラインにリセットします。

参照元：cssreset.com

• Eric Meyer’s “Reset CSS” 2.0
• Normalize

プリプロセッサ

• pleeease.io
• PostCSS & cssnext
• rework & myth
• Sass/SCSS
• Stylus

リファレンス

• css3test.com
• css3clickchart.com
• cssreference.io
• CSS Indexes - A listing of every term defined by CSS specs
• css4-selectors.com
• css4 Rocks
• CSS TRIGGERS…A GAME OF LAYOUT, PAINT, AND COMPOSITE
• CSS Tricks Almanac
• cssvalues.com
• MDN CSS リファレンス [日本語]

リンティング/ヒント

• CSS Lint
• stylelint

コードのフォーマット化/整形

• CSScomb
• CSSfmt

オプティマイザ

• clear-css
• cssnano
• CSSO

オンライン作成/生成/実験ツール

• CSS Arrow Please
• CSS Matic
• Enjoy CSS
• Flexbox Playground
• flexplorer
• patternify.com
• patternizer.com
• Ultimate CSS Gradient Generator

CSS設計概念

• Atomic Design [読み物]
• BEM
• ITCSS
• SMACSS [読み物][$]
  
  • Scalable Modular Architecture for CSS (SMACSS) [視聴][$]
• SUIT CSS
• rscss

オーサリング/アーキテクチャ

• CSS code guide [読み物]
• css-architecture [読み物]
• cssguidelin.es [読み物]
• Idiomatic CSS [読み物]
• MaintainableCSS [読み物]
• Standards for Developing Flexible, Durable, and Sustainable HTML and CSS [読み物]
• Airbnb CSS / Sass Styleguide [読み物]

今月のGitHubでトレンドのCSSリポジトリ

https://github.com/trending?l=css&since=monthly