Libx Awesomeリスト

    このページの内容

    Awesome CSS Awesome Travis

    CSS Awesome Travisを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

    目次

    CSSワーキンググループ

    CSSワーキンググループはCSS仕様の作成と定義を行います。これらの仕様は、設計プロセスを通じて進むにつれて maturity levels に割り当てられます。より詳しく知りたい場合は、 CSS Working Group Page を訪れてください。

    編集者草案 :black_nib:

    CSS仕様の編集ドラフト

    パーサー :mag:

    • CSSOM - 純粋なJavaScriptで実装されたCSSオブジェクトモデル。
    • CSSTree - 詳細なCSSパーサーで、文法検証機能付き。
    • Gonzales PE - CSSパーサーで事前処理言語に対応
    • Mensch - 良いCSSパーサー。
    • ParserLib - CSSLintのパーサーライブラリ
    • PostCSS - JSプラグインでスタイルを変更する。
    • Rework - Node.jsにおけるCSS事前処理用のプラグインフレームワーク。
    • Stylecow - 現代的なCSSがすべてのブラウザで利用可能

    ⇧ back to top

    プリプロセッサー :pill:

    CSSをより速く書ける

    • LESS - CSSとの後方互換性を保ち、追加された機能は既存のCSS構文を使用する。
    • PostCSS - CSSをJSプラグインで変換する。
    • Sass - 熟成された、安定した、そして強力なプロフェッショナル向けCSS拡張言語。
    • STYLIS - 軽量のCSS事前処理言語。
    • Stylus - Node.js向けに設計された、表現力豊かで強力で機能が豊富なCSS言語。
    • Vanilla Extract - TypeScriptで静的CSSを生成します。型安全で、局所スコープのクラス、変数、テーマを書きます。

    ⇧ back to top

    フレームワーク :art:

    • AgnosticUI - React、Vue 3、Svelte、Angularにも対応するアクセシブルCSSコンポーネントの基本要素
    • Bonsai - 50kb未満で完全なユーティリティファーストCSSフレームワーク。
    • Bootstrap - 最も人気のあるHTML、CSS、JavaScriptフレームワーク。
    • Bulma - Flexboxに基づく現代的なCSSフレームワーク。また、Sassのインポートを提供しており、カスタマイズが可能。
    • Butter Cake - 現代的な軽量フロントエンドCSSフレームワーク。ウェブ開発をより速く、簡単にする。
    • Charts.css - CSSデータ可視化フレームワーク。
    • Chota - 反応性でカスタマイズ可能なマイクロフレームワーク（3kb）に加え、便利なユーティリティとグリッドシステムを提供。
    • Cirrus - 完全にレスポンシブかつ包括的なCSSフレームワークで、美しいコントロールとシンプルな構造を備えています。
    • Foundation - 高度なレスポンシブフロントエンドフレームワーク。
    • Gralig - シンプルで、灰っぽい CSS ライブラリ。
    • Halfmoon - 反応性のフロントエンドフレームワークで、内蔵されたダークモードを備えたもの
    • Hasser CSS - 軽量（12k、圧縮なし）だが便利なCSSフレームワーク。柔軟なグリッド、ヒーローなどがある。
    • Inuit.css - 強力で、スケーラブルで、Sassベース、BEM、OOCSSフレームワーク。
    • Material-components-web - ウェブ向けのモジュラーかつカスタマイズ可能なマテリアルデザインUIコンポーネント
    • Materialize - マテリアルデザインをベースとした現代的なレスポンシブフロントエンドフレームワーク。
    • Milligram - ミニマリズムを採用したCSSフレームワーク。
    • Numl - HTMLベースの言語と設計システムで、どんな見た目にも対応し、レスポンシブかつアクセシブルな高品質なウェブインターフェースを作成できます。
    • Pure.css - 小さな、反応性のあるCSSモジュールのセットで、すべてのウェブプロジェクトに使える
    • Semantic UI - 人間が使いやすいHTMLを用いた強力なフレームワーク。
    • Shorthand Framework - 新しい十年向けに豊富な機能を備えたCSSフレームワーク。
    • Spectre.css - 軽量で反応性があり、現代的なCSSフレームワーク。
    • Strawberry - ネストされたフィックスボックスを扱うためにあなたの生活をより簡単で速くするための、共通のフィックスボックスユーティリティのセット
    • Tachyons - 人間向けの機能的なCSS
    • Tacit - グラフィックデザインのスキルがゼロでも使えるCSSフレームワーク。
    • Tailwindcss - 用途に応じたCSSフレームワーク。UI開発を高速化する。
    • Tronic247 Material - CSSと一部のJSを用いた、Material Designガイドラインに従ったレスポンシブフレームワーク。
    • UIkit - 軽量かつモジュラリティの高いフロントエンドフレームワーク。
    • Unsemantic - モバイル、タブレット、デスクトップ用のフリードグリッド
    • Wing - 極めてシンプルで、軽量かつ反応性のあるフレームワーク。

    You can find more frameworks at “awesome-css-frameworks”

    ⇧ back to top

    ツールキット :wrench:

    • Bourbon - Sass用のシンプルで軽量のミックスインライブラリ。

    ⇧ back to top

    リセットと正規化

    • CSS Checker - 似たものや重複したCSSスクリプトを検出・削減
    • MiniReset.css - ミニマムな現代的なCSSリセット
    • Normalize-OpenType - オペンタイプ機能—連字、間隔調整、その他—to Normalize.css に追加
    • Normalize - HTML要素のデフォルトスタイルにおいて、よりブラウザ間で一貫性の高い表示を提供するCSSルールのセット
    • Reset.css - CSSツール：リセットCSS。
    • Reseter.css - 未来のCSSリセット/ノーマライザ。代替するのではなく、保持するのではなく再定義する。
    • Sanitize.css - 今日のベストプラクティスで即時適用可能なCSSルールのセット。
    • Unstyle.css - ユーザーエージェントのスタイルを除去するための専用のスタイルシート、あなたのベースラインでウェブをスタイルアップ。

    ⇧ back to top

    大規模ウェブサイトのCSS開発

    ⇧ back to top

    コードスタイルガイドライン :book:

    ⇧ back to top

    スタイルガイド

    Website Style Guide Resourcesにスタイルガイドをもっと見られる

    ⇧ back to top

    スタイルガイド生成ツール :slot_machine:

    ⇧ back to top

    命名規則と方法論 :bulb:

    ⇧ back to top

    CSS in JS

    ここにCSS in JS techniques comparisonがあります

    ⇧ back to top

    CSSポリフィル

    • Polyfill.js - CSSポリフィルの作成をはるかに簡単にするためのライブラリ
    • Prefixfree - CSSのプレフィックスの地獄から解放されましょう。
    • Fixed-sticky - CSSのposition:stickyのポリフィル。
    • Selectivizr - IE6-8でCSS3の擬似クラスおよび属性セレクタをエミュレートするJavaScriptユーティリティ
    • PIE - インターネット・エクスプローラーにCSS3ボックスデコレーションプロパティを認識・レンダリングできるようにする。

    ⇧ back to top

    その他

    • Beautiful CSS box-shadow examples - キュレーションされた93の美しいCSSボックスシャドウコレクション。クリックでコピー。
    • Can I use - ブラウザでのCSS、HTML5およびその他のフロントエンドウェブ技術のサポート。
    • Flexbox Patterns cjcenizalによって
    • Glassmorphism CSS Generator - グラスモーフィズム用のCSSを生成する。
    • GradientArt - 高度なCSSグラデーションエディタで、レイヤー機能、デザインツール、無料クラウドストレージを備えた
    • Live editor for CSS and LESS - Chrome、FirefoxおよびEdge向けのマジックCSS拡張機能。
    • RevengeCSS - CSSのブックマークレットで、セレクタを使って不正なマークアップを検出し、不正なHTMLを書く場所にコミック・サン-serifで表示される醜いピンクのエラーメッセージを表示
    • Single Div Project - 一つ <div>。多くの可能性。
    • You Might Not Need JS - CSSで一般的なJSUIコンポーネントに代替する方法。
    • Xpath-to-selector - XPathをCSSセレクタに変換する。

    ⇧ back to top

    ポッドキャスト :radio:

    プログラミングしているときには聞いておくべきもの。

    • CSS Podcast - アン・クラベツとアダム・アーバイ、および開発。
    • Non Breaking Space Show - デジタルアートとそのブログ、UXにおいて、最も優れたそして知的なクリエイティブな人々を発見する。
    • Shop Talk Show - アナ・デベナムとブラッド・フロストがホストする、クリス・コイアとデイブ・ルーパートによるフロントエンドウェブデザインに関するライブポッドキャスト。
    • Style Guide Podcast - Googleのスタイルガイド、アートディレクション、コンテンツ戦略、デザイン、開発者アドボケートたちによる、CSSの複雑な側面をアクセシビリティからz-indexまで、誰でも理解できるエピソードに分解したインタビューの小さなシリーズ。
    • Syntax - ウェブ開発者向けの美味しいおやつPodcast、タイプグラフィック、ウェブ技術
    • The Big Web Show - ウェブ出版といったテーマは、すべてオープンソース技術の最新情報をあなたに常に提供することについてです。
    • The Changelog - 変更ログのキャッチコピーはこう言っています：「オープンソースは速く進みます。それに追いついてください。」このポッドキャスト、そしてそれ以上のすべて。ウェブ上で重要なすべての内容。
    • The Web Ahead - 世界の専門家たちと、変化する技術とウェブの未来についての対話。

    ⇧ back to top

    Twitter :satellite:

    フォローすべきアクティブなアカウント。

    • Adam Morse - ユーザーとオープンソースを擁護する。
    • Andrey Sitnik - @Autoprefixer の著者、http://easings.net および @PostCSS の著者
    • Ben Briggs - 最終年次ウェブテクノロジー学科の学生。node.js、javascript、オープンソースモジュール、クライアントサイド最適化、ウェブパフォーマンス。
    • Brad Frost - ウェブデザイナー、スピーカー、ライター、コンサルタント、ミュージシャン。
    • Chris Coyier - デザイナー @CodePen。執筆者 @Real_CSS_Tricks。
    • Connor Sears - GitHubのデザイナー。
    • CSS Animation
    • CSS Commits - @CSSWGの公開Mercurialリポジトリへの最新コミット。
    • Daniel Glazman - W3C CSS ワーキンググループ共同議長、起業家、ソフトウェアエンジニア、ゲイク、2人の息子の父、多言語話者、ダック好き。いや。ツイートはすべて私のものだ。
    • Dave McFarland - ウェブ開発者、CSS: The Missing Manual、JavaScript & jQueryの著者
    • Donovan Hutchinson - デザイナー、開発者、ライター。時折 http://Hop.ie, でブログを書いている。現在は @cssanimation を開発中。
    • Dudley Storey - ウェブ開発のライター、教師、スピーカー。
    • Eric Bidelman - グーグルでクローム、ウェブコンポーネント、ポリマーアンダーキャッチを担当しているエンジニア。
    • Evangelina Ferreira - ウェブデザイナー。@multimedial_utn の教授。HTML5＆CSSの狂気をもつ者。時折、翻訳者。
    • Guy Routledge - フロントエンド開発者、GA_Londonの講師、http://www.atozcss.com, でのスクリーンキャスト制作者、CSS愛好家。
    • Harry Roberts- コンサルタントフロントエンドアーキテクト：@google, @Etsy, @kickstarter, @BBC, @Deloitte, @FT, その他。
    • Heydon Pickering - 米を中程度に消費する。また、UXデザイナー、著者、@smashingmag編集者、プログラマーである。
    • Jonathan Snook - デザイナー、開発者、ライター、スピーカー。私はウェブ上のものを作っています。私はSMACSSを書きました。
    • Kitty Giraudel - 非二元性のアクセシビリティ・多様性を推進する活動家、フロントエンド開発者、著者。
    • L. David Baron - モzilla開発者、CSSおよびW3C標準の外交家。
    • Lea Verou - MIT_CSAILでの研究助手、CSSWG IE、OReillyMedia著者、元W3C職員。
    • Manoela Ilic - …あだ名 Mary Lou @codrops ༶ CSS & HTML は私のクレヨンです ༶ 認知科学、AI、HCI、UIデザインおよび天体物理学に興味があります ༶ デジタルノマド
    • Mark Otto - GitHubとBootstrap。かつてはTwitterで働いていた。大きなネルド。
    • Maxime Thirouin - フリーランスのフロントエンド・vigilante、UI/UX開発者。
    • Natalie Weizenbaum - コーダーの女性。@SassCSSのリードデザイナー／開発者。@googleで@dart_langを担当
    • Nicolas Gallagher - @twitter でのソフトウェアエンジニア
    • Nicole Sullivan - GEEK.
    • Patrick Hamann - 山に恋する、手作りビールを愛し、新しい食べ物を発見する人
    • Paul Lewis - グーグルでコードとデザインを楽しむ人物。
    • Phil Walton - グーグルでのエンジニア • オープンソース推進者 • 開発者 • デザイナー • 書き手。
    • Rachel Andrew - ウェブ開発者、@grabaperch CMSの半分、CSSワーキンググループの招待専門家。
    • Remy Sharp - CSSのサイズ単位について
    • Sara Soueidan - @Codrops CSS リファレンスの著者およびSmashing Book #5の共著者
    • Scott Jehl - @responsiblerwdの著者。現在、@abookapartから販売中。
    • Simon - UIデザイナー、CSSの遊び人。
    • The Chris Eppstein - 愛するものは愛し、嫌いなものは嫌い。素晴らしい家族を持つ。コードを書く。LinkedInでスタイルシート技術をリード。
    • Una Kravets - フロントエンド @IBMDesign。Sassvocate、コミュニティ構築者、そしてハンドクラフト。STEMinist :) オープンソース、すべてのもの。
    • Zoe M. Gillenwater - ウェブデザイナー／開発者。CSS、レスポンシブデザイン（RWD）、UX、およびアクセシビリティに特化。
    • Zoltán Szőgyényi - ウェブ開発者、Themesbergの共同創業者。Glass UIを構築中。
    • Tab Atkins - CSSワーキンググループのメンバーで、ウェブ標準に携わる開発者。

    ⇧ back to top

    動画 :tv:

    CSS Must Watch Videosの良いスタディ動画。一部はAllThingsSmitty/must-watch-cssから引用されている。

    I told him on Twitter。彼の貴重な努力に感謝しています。

    2019

    1. Next-Generation Web Styling - Una Kravets と Adam Argyle が Chrome Dev Summit 2019 で

    2016

    1. Component-Based Style Reuse :page_facing_up: transcript :watch: 37:24 - ペイト・ハント @ CSS conf 2016.
    2. CSS4 Grid: True Layout Finally Arrives :page_facing_up: transcript :watch: 29:27 - ジェン・クラマー @ CSS conf 2016.
    3. Houdini: Demystifying the Future of CSS :watch: 36:58 @ Google I/O 2016.

    2015

    1. Mdo-ular CSS :watch: 30:06 - 株式会社jQuery UKのマーク・オットー
    2. CSS Architecture with SMACSS :watch: 30:15 - Caleb Meredith @ DevTipsチャンネル。
    3. CSS Workflow from the Ground Up :watch: 46:06 - ジョンathan スノック @ Generate conf 2015.

    ⇧ back to top

    書籍 :books:

    ⇧ back to top

    チュートリアル :clapper:

    ⇧ back to top

    メンテナー

    @sotayamashita, @Rishabh04-02 そしてあなた！

    コントリビューション

    気軽に参加してください！イシューを開設またはPRを提出してください。

    素晴らしいCSSは Contributor Covenant の行動規範を遵守しています。