You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Rishabh 2b418f5ad9
Merge pull request #174 from KarthikSiddarth/master
4 days ago
.github Create .github/stale.yml 1 year ago
.gitignore Add doctoc 1 year ago
.travis.yml Added NCSS to the naming conventions (#105) 2 years ago
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md 2 years ago
CONTRIBUTING.md :memo: Update 4 years ago
LICENSE Create LICENSE 1 year ago
README.md add note on CSS grids video tutorial 5 days ago
package-lock.json vulnerable version fixed 7 months ago
package.json Remove extra config for doctoc 1 year ago

README.md

Awesome CSS Awesome Travis Build Status {

/* A curated list of awesome frameworks, style guides, and other cool nuggets for writing amazing CSS. */

Introduction

Motivation

This document is a curated list of frameworks, style guides, and cool nuggets of information for writing awesome CSS. It does not contain resources to learn CSS.

Complementary Resources

If you’re struggling with something CSS-related, look for answers within the following resources:

Table of Contents

CSS Working Group

The CSS Working Group creates and defines CSS specifications. These specifications are assigned maturity levels as they move through the design process. If you would like to learn more, visit CSS Working Group Page.

Editor’s Draft :black_nib:

Editor’s drafts of CSS specifications

Parsers :mag:

  • CSSOM - CSS Object Model implemented in pure JavaScript.
  • CSSTree - Detailed CSS parser with syntax validator.
  • Gonzales - Fast CSS parser.
  • Gonzales PE - CSS parser with support for preprocessors.
  • mensch - A decent CSS parser.
  • ParserLib - CSSLint/parser-lib.
  • PostCSS - Transforming styles with JS plugins.
  • Rework - Plugin framework for CSS preprocessing in Node.js.
  • Stylecow - Modern CSS for all browsers.

⇧ back to top

Preprocessors :pill:

Write CSS faster

  • LESS - Backwards compatible with CSS, and the extra features it adds use existing CSS syntax.
  • PostCSS - Transforming CSS with JS plugins.
  • Sass - Mature, stable, and powerful professional-grade CSS extension language.
  • STYLIS - Light-weight CSS preprocessor.
  • Stylus - Expressive, robust, feature-rich CSS language built for NodeJs.

⇧ back to top

Frameworks :art:

  • awsm.css - Simple CSS library for semantic HTML markup.
  • Bootstrap - The most popular HTML, CSS, and JS framework.
  • Bulma - A modern CSS framework based on Flexbox. Also has Sass import for modification.
  • Butter Cake - A Modern Lightweight Front End CSS framework for faster and easier web development.
  • Chota - A responsive, customizable micro-framework (3kb) with helpful utilities and a grid system.
  • Cirrus - A fully responsive and comprehensive CSS framework with beautiful controls and simplistic structure.
  • eFrolic - CSS framework which without using JavaScript is interactive and animated.
  • Foundation - advanced responsive front-end framework.
  • inuit.css - Powerful, scalable, Sass-based, BEM, OOCSS framework.
  • material-components-web - Modular and customizable Material Design UI components for the web.
  • Materialize - A modern responsive front-end framework based on Material Design.
  • Milligram - A minimalist CSS framework.
  • Pure.css - A set of small, responsive CSS modules that you can use in every web project.
  • Semantic UI - Powerful framework that uses human-friendly HTML.
  • Spectre.css - A lightweight, responsive and modern CSS framework.
  • Strawberry - A set of common flexbox utilities focused on making your life easier and faster with nested flexboxes.
  • Tachyons - Functional CSS for humans.
  • Tacit - CSS framework for dummies with zero skills in graphic design.
  • tailwindcss - A utility-first CSS framework for rapid UI development.
  • UIkit - A lightweight and modular front-end framework.
  • unsemantic - Fluid grid for mobile, tablet, and desktop.
  • Wing - A Minimal, Lightweight, Responsive framework.

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

⇧ back to top

Toolkits :wrench:

  • Bourbon - A simple and lightweight mixin library for Sass.
  • Susy - Responsive layout toolkit for Sass.

⇧ back to top

CSS Structure

  • RSCSS - Reasonable Standard for CSS Stylesheet Structure.
  • ITCSS - A sane, scalable, managed CSS architecture for large UI projects.

⇧ back to top

Reset and Normalize

  • Normalize - A set of CSS rules that provide better cross-browser consistency in the default styling of HTML elements.
  • Normalize-OpenType - Adds OpenType features—ligatures, kerning, and more—to Normalize.css.
  • MiniReset.css - A tiny modern CSS reset.
  • sanitize.css - A set of CSS rules that style with today’s best practices out-of-the-box.
  • unstyle.css - Specialised stylesheet for removing user agent styles, style the web with your baseline.
  • reset.css - CSS Tools: Reset CSS.

⇧ back to top

CSS Development at Large-Scale Websites

⇧ back to top

Code Style Guidelines :book:

⇧ back to top

Style Guide

View more style guides at Website Style Guide Resources

⇧ back to top

Style Guide Generators :slot_machine:

⇧ back to top

Naming conventions & Methodologies :bulb:

⇧ back to top

CSS in JS

Here is a CSS in JS techniques comparison

⇧ back to top

CSS Polyfills

  • polyfill.js - A library to make creating CSS polyfills much easier.
  • prefixfree - Break free from CSS prefix hell.
  • fixed-sticky - A CSS position:sticky polyfill.
  • selectivizr - A JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8.
  • PIE - Allows Internet Explorer to recognize and render various CSS3 box decoration properties.

⇧ back to top

Miscellaneous

  • Single Div Project - One <div>. Many possibilities.
  • Can I use - Browser support for CSS, HTML5 and other front-end web technologies.
  • cssfx - Beautifully simple click-to-copy CSS effects
  • Live editor for CSS and LESS - Magic CSS extension for Chrome, Firefox and Edge.
  • You Might Not Need JS - CSS alternatives for common JS UI components.
  • RevengeCSS - A CSS bookmarklet that uses selectors to find bad markup, displaying ugly pink error messages in comic sans serif wherever you write bad HTML

⇧ back to top

Podcasts :radio:

Something to listen to while programming.

  • Shop Talk Show - A live podcast with Chris Coyier and Dave Rupert about front-end web design, development, and UX.
  • Style Guide Podcast - A small batch series of interviews on style guides, hosted by Anna Debenham and Brad Frost.
  • The Big Web Show - Topics like web publishing, art direction, content strategy, typography, web technology, and more. It’s everything web that matters.
  • The Web Ahead - Conversations with world experts on changing technologies and future of the web.
  • Non Breaking Space Show - Seeking out the best, brightest, and smartest creative people on digital art, design, and development.
  • The Changelog - The tagline for the Changelog says it all: “Open Source moves fast. Keep up.” This podcast, and the accompanying blog, is all about keeping you updated with the latest in Open Source Technology.
  • Syntax - A Tasty Treats Podcast for Web Developers.

⇧ back to top

Twitter :satellite:

Active accounts to follow.

⇧ back to top

Videos :tv:

*Good study videos from CSS Must Watch Videos. Some items are quoted from AllThingsSmitty/must-watch-css.

I told him on Twitter. I appreciate his valuable efforts.*

2016

  1. Component-Based Style Reuse :page_facing_up: transcript :watch: 37:24 - Pete Hunt @ CSS conf 2016.
  2. CSS4 Grid: True Layout Finally Arrives :page_facing_up: transcript :watch: 29:27 - Jen Kramer @ 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 - Mark Otto @ jQuery UK.
  2. CSS Architecture with SMACSS :watch: 30:15 - Caleb Meredith @ DevTips channel.
  3. CSS Workflow from the Ground Up :watch: 46:06 - Jonathan Snook @ Generate conf 2015.

⇧ back to top

Books :books:

⇧ back to top

Tutorials :clapper:

⇧ back to top

Maintainers

@sotayamashita, @troxler, @Rishabh04-02 and You!

Contribute

Feel free to dive in! Open an issue or submit PRs.

Awesome CSS follows the Contributor Covenant Code of Conduct.

}