Cascading Style Sheets (CSS)

Context: frontend-dev-bookmarks / Languages, Protocols, Browser APIs

CSS are a stylesheet language used to describe the presentation of a document written in HTML or XML. It describes how elements should be rendered on screen, on paper, in speech, or on other media.

CSS Coding Conventions: Coding conventions are a set of guidelines for a specific programming language that recommend programming style, practices and methods for each aspect of a piece program written in this language.
- CSS Guidelines: High-level advice and guidelines for writing sane, manageable, scalable CSS.
- Idiomatic CSS: The following document outlines a reasonable style guide for CSS development. These guidelines strongly encourage the use of existing, common, sensible patterns.
- Maintainable CSS: MaintainableCSS is an approach to writing modular, scalable and of course, maintainable CSS.
- Primer: Primer is GitHub’s internal CSS framework. It includes basic global styling for typography, small components like buttons and tabs, and our general guidelines for writing HTML and CSS.
- Wordpress CSS Coding Standards: The purpose of the WordPress CSS Coding Standards is to create a baseline for collaboration and review within various aspects of the WordPress open source project and community, from core code to themes to plugins.
CSS Variables W3C Editor’s Draft: This module introduces cascading variables as a new primitive value type that is accepted by all CSS properties, and custom properties for defining them.
Flexbox: The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size.
- 5 Flexbox Techniques You Need to Know About: In this article we’re going to take a look at five flexbox approaches to solving common CSS layout problems. We’ve also included practical examples to showcase real life scenarios in which these techniques are applied.
- A Complete Guide to Flexbox: Chris Coyer provides a great reference to the flexbox features with code examples.
- A Visual Guide to CSS3 Flexbox Properties: Rather that explaining how the flex properties work, this guide will focus on how the flex properties affect the layout in a visual way.
- CSS Flexible Box Layout Module Level 1: W3C specification for CSS flexbox.
- Flex-Grow is weird. Or is it?: Manuel Matuzovic describes how flex-grow works, including it’s weird quirks. Then he goes into several examples on how common layout patterns may be implemented using flex-grow and flex-basis.
- Flexbox Froggy: A fun way to learn Flexbox by playing a game where you help Froggy and friends to arrive at a lilypad.
- Flexbox Patterns: These interactive examples will show you practical ways to use Flexbox to build UI components.
- Flexbugs: This repository is a community-curated list of flexbox issues and cross-browser workarounds for them.
How To Center in CSS: This tool consolidates the many ways of centering a div and gives you the code you need for each situation.
The Complete Guide to Centering a DIV: The aim of this article is to show how, with a few CSS tricks, any div can be centered; horizontally, vertically or both. And within the page or a div.
Understanding border-image: The new CSS3 property border-image can allow you to create flexible boxes with custom borders with a single div and a single image.
What No One Told You About Z-Index: The problem with z-index is that it’s not complicated, but it if you’ve never taken the time to read its specification, there are almost certainly crucial aspects that you’re completely unaware of.

License

This work is licensed under a Creative Commons Attribution 4.0 International License.

Please provide a link back to this repository. This is not necessary for GitHub forks.