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