CSS Guidelines


CSS/Sass

* { Box-sizing: Border-box } FTW - A great technique for manipulating the CSS box-model to behave in a more predictable way.

Approaches to Media Queries in Sass - A detailed look at various approaches to media queries in Sass, their potential downsides, and a proposed solution.

Awesome SCSS - A curated list of awesome Sass and SCSS frameworks, libraries, style guides, articles, and resources.

Blending Modes Demystified - An excellent dive into CSS Blending Modes, and how we can now add transparency, rich color, and texture processing to our designs.

CSS Architecture for Design Systems - An example of how to create CSS architecture to support a thoughtful, robust UI design system.

CSS Box Model - A concise document on the CSS box model, or the model that describes the content of the space taken by an element.

CSS Guidelines - A high-level advice and guidelines for writing sane, manageable, scalable CSS by Harry Roberts.

CSS Protips - A collection of useful tips to help take your CSS skills pro.

CSS Purge - A collection of stats, resources, articles and talks focused on saving the web 1kb at a time by reducing CSSitis and high specificity.

CSSreference.io - A visual guide to CSS. It features the most popular properties, and explains them with illustrated and animated examples.

CSS Refresher Notes - A collection of 'refresher' notes and links on key CSS concepts and techniques.

Centering in CSS: A Complete Guide - An invaluable guide to centering in CSS, which allows you to select the circumstances to determine the right centering technique.

Centering with Sass - A detailed article around building a flexible mixin to handle centering in Sass.

ColorMe - A simple tool for visualizing the CSS color functions.

A Complete Guide to Flexbox - A guide to Flexbox Layout: a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic.

A Complete Guide to Grid - A guide to grid layout: a two-dimensional grid-based layout system that aims to do nothing less than completely change the way we design grid-based user interfaces.

Cyclomatic Complexity: Logic in CSS - An approach to visualising and measuring the complexity in the ‘logic’ powering our selectors so we can begin making much better decisions based on it.

Developing Extensible HTML and CSS Components - A look into how to build user interface modules that can be easily extended to allow for more flexibility in the browser.

Enhancing Responsiveness With Flexbox - A great video on what flexbox features are particularly suited to responsive layouts and how you can harness them by applying flexbox as a progressive enhancement.

Flexbugs - A community-curated list of flexbox issues and cross-browser workarounds for them.

Future Of CSS Layout: CSS Grid - An overview of CSS Grid Layout: a module that defines a two-dimensional grid-based layout system, optimized for user interface design.

The Image Replacement Museum - A comprehensive history of image replacement on the web, stretching back to 2003.

Maintainable CSS - An excellent set of principles, guides and conventions that help you write CSS for large or small scale websites.

Object Oriented CSS - The official wiki on OOCSS, an approach for writing CSS that’s fast, maintainable, and standards-based.

Open Web CSS Reference - A really comprehensive and little-known CSS property and feature reference.

Principles of Writing Consistent, Idiomatic CSS - A document that outlines a reasonable style guide for CSS development through the use of existing, common, sensible patterns.

Sass Boilerplate - A blank Sass boilerplate using the 7-1 architecture pattern and sticking to Sass Guidelines writing conventions.

Sass Compatibility - A useful reference which reports incompatibilities between different Sass engines.

Sass Guidelines - An opinionated styleguide for writing sane, maintainable and scalable Sass.

Sass Lint - A Node-only Sass linter for both sass and scss syntax.

Sass: Mixin or Placeholder? - An article on what exactly a mixin is for, and when to use a Sass placeholder.

Sassy Z-Index Management For Complex Layouts - A scaleable Sass technique that makes maintaining z-index incredibly easy.

Scaling CSS Components with BEM, REMs, & EMs - A look at how to leverage relative units for measurements while using BEM methodology and some clever standardization.

Structuring CSS in Large Projects - A look at the global nature of CSS, and how to structure it for maintainability on large projects.

Thoughtful CSS Architecture - An introduction to CSS architecture that will help you design a structure for your code so your projects and teams can grow without becoming an unmanageable mess.

The Ultimate Guide to CSS - A complete breakdown of the CSS support for the top 10 most popular mobile, web and desktop email clients on the planet.

Uncle Dave's Ol' Padded Box - A technique by Dave Rupert for perserving the aspect ration on background images by percentage padding based on the width of the parent element.

A Visual Guide to CSS3 Flexbox Properties - A great reference for how Flexible Box Layout works via code examples and accompanying visuals.

A Visual Guide to Sass & Compass Color Functions - A great reference for the number of useful functions you can use to alter and manipulate colors with ease using Sass color functions.

What the Flexbox?! - A simple, free 20 video course that will help you master CSS Flexbox!

Why You Should Avoid Sass @extend - A insightful article by Hugo Giraudel on the pitfalls of using @extend in your Sass code.


No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...