CSS

Awesome CSS - "A curated list of awesome frameworks, style guides, and other cool nuggets for writing amazing CSS."

Clippy #webapp - “CSS clip-path maker”

Compass - "Compass is an open-source CSS Authoring Framework."

Conditions for CSS Variables #article - “So, what we need is a way to use a single CSS variable for setting different CSS properties to different values, but not based directly on this variable (that is — those values shouldn't be calculated from our variable). We need conditions.” Using CSS variables as booleans.

CSS Before and After pseudo elements explained - part two: the content property #video - "The before and after CSS pseudo elements are great, and they have the content property which a lot of people don't really know how powerful it actually is, so in this video I show you some fun things you can do with it, from a markupless tool tip to a quick dive into CSS counters, which are awesome!"

CSS Filters Playground

CSS Gradients with background-blend-mode - “New CSS gradient possibilities with the background-blend-mode property.”

CSS Guidelines #article - “High-level advice and guidelines for writing sane, manageable, scalable CSS”

CSS Lint #webapp - “Will hurt your feelings* (And help you code better)”

CSS stacking contexts: What they are and how they work #article - "So what is a stacking context? A stacking context is an element that contains a set of layers. This can be a root stacking context, as created by the html element. Or it can be a local stacking context, as created by specific properties and values."

CSSYNTH

Image Effects with CSS

Managing CSS Projects with ITCSS - Presentation slides.

Navicon Transformations #demo

pointer-events #article - “The pointer-events property allows for control over how HTML elements respond to mouse/touch events – including CSS hover/active states, click/tap events in Javascript, and whether or not the cursor is visible.” Also allows you to pass click events through an element to whatever it’s behind it by using `pointer-events: none;` #chris_coyier #css-tricks

Pure CSS Parallax Websites #article - "This article demonstrates how to use CSS transforms, perspective and some scaling trickery to create a pure CSS parallax scrolling website." 👍Be careful, though. Applying perspective to a root element breaks fixed positioning by establishes a new stacking context.

Quantity Queries for CSS #article - “This is your guide to creating style breakpoints for quantities of HTML elements, much as you already do with @media queries for viewport dimensions. I’m not pointing at some blurry specification in the distance or a twinkle in an implementer’s eye. We’re going to do this today, with CSS that’s already available.”

The Raven Technique: One Step Closer to Container Queries #article - "For the millionth time: We need container queries in CSS! And guess what, it looks like we’re heading in that direction."

The stacking context #article - "The stacking context is a three-dimensional conceptualization of HTML elements along imaginary z-axis relative to the user, who is assumed to be facing the viewport or the webpage. HTML elements occupy this space in priority order based on element attributes."

Understanding CSS Layout And The Block Formatting Context #article - By Rachel Andrew. “There are a few concepts in CSS layout that can really enhance your CSS game once you understand them. This article is about the Block Formatting Context (BFC). You may never have heard of this term, but if you have ever made a layout with CSS, you probably know what it is. Understanding what a BFC is, why it works, and how to create one is useful and can help you to understand how layout works in CSS.” 👍

Understanding Variable Scope And Variable Injection In Less CSS #article - "The Less CSS preprocessor allows you to define variables that can be used throughout your CSS structure; however, as I have been digging into Less CSS more, I have found the rules around variable assignment and variable visibility to be a bit confusing. Sometimes variables can be overridden; sometimes they can't. Sometimes they can bubble-up; sometimes they can't. As such, I thought this would make a valuable exploration."

VisBug #extension - "Open source web design debug tools built with JavaScript: a FireBug for designers." #chrome

What No One Told You About Z-Index #article - "The problem with z-index is that very few people understand how it really works. 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."

Frameworks & Libraries

Bootstrap - “Build responsive, mobile-first projects on the web with the world’s most popular front-end component library. Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.”

Family.scss - "Family.scss is a set of 26 smart Sass mixins which will help you to manage the style of :nth-child’ified elements, in an easy and classy way."

new.css - "new.css is a classless CSS framework to write modern websites using only HTML. It's ~4.5kb."

tailwindcss - "A utility-first CSS framework for rapidly building custom designs. Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override."

Grid

Auto-Sizing Columns in CSS Grid: `auto-fill` vs `auto-fit` | CSS-Tricks #article - "One of the most powerful and convenient CSS Grid features is that, in addition to explicit column sizing, we have the option to repeat-to-fill columns in a Grid, and then auto-place items in them. More specifically, our ability to specify how many columns we want in the grid and then letting the browser handle the responsiveness of those columns for us, showing fewer columns on smaller viewport sizes, and more columns as the screen estate allows for more, without needing to write a single media query to dictate this responsive behavior."

A Complete Guide to Grid | CSS-Tricks - "CSS Grid Layout is the most powerful layout system available in CSS. It is a 2-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a 1-dimensional system. You work with Grid Layout by applying CSS rules both to a parent element (which becomes the Grid Container) and to that element’s children (which become Grid Items)."

CSS Grid. #course - "LEARN CSS GRID WITH WES BOS IN 25 PRETTY GOOD VIDEOS"

CSS Grid: Moving From CSS Frameworks To CSS Grid (2018 and beyond) - YouTube #video - "For the first time since its inception, CSS now has a real two-dimensional layout tool in the CSS Grid specification. We’ve had to resort to using floats, inline blocks and most recently, Flexbox. Because using these for layout is essentially a hack, we’re often tempted to resort to grid frameworks like those provided by Foundation and Bootstrap."

Why CSS grid-area is the best property for laying out content #video - "CSS Grid is amazing, and grid-area just make it so much better. When grid first launched I loved the idea of grid areas, but didn't get fully on board as it seemed like a little too much work... but once you start actually using them on a regular basis, you realize that while the initial setup in slightly longer, in the long run you can save a boat load of time!"

Performance

BEM 101 - BEM might allow us to have flatter CSS files, meaning less traversing of the tree to ensure selectors match.

Resets

CSS Remedy - "Start your project with a remedy for the technical debt of CSS. A gift to you from Mozilla Developer Outreach."

Eric Meyer: Reset CSS - "The reset styles given here are intentionally very generic. There isn't any default color or background set for the body element, for example. I don't particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your specific reset baseline. Fill in your preferred colors for the page, links, and so on."

Normalize.css - "Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing."

Reboot - "Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon."

Transformation

Autoprefixer - "PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use. It is recommended by Google and used in Twitter and Alibaba."

Less

PostCSS - "A tool for transforming CSS with JavaScript"

-prefix-free - "A script that lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed."

Purgecss - "Purgecss is a tool to remove unused CSS. It can be used as part of your development workflow. Purgecss comes with a JavaScript API, a CLI, and plugins for popular build tools."

Revisiting the rendering tier #article - "From 62,783 lines of Sass to CSS-in-JS. Introducing the new server rendering layer for theguardian.com"

Sass

Sources

CSS-Tricks - "CSS-Tricks is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress and powered up by Jetpack. It is made possible through sponsorships from products and services we like."

Kevin Powell #channel - Personal website. "Helping you learn how to make the web, and make it look good while you're at it. ❡ With a new video every Wednesday, I'll be bringing you How Tos and Tutorials, and well as simple tips and tricks. I'm mostly looking to help people who are new to the world of web development."

Wes Bos - "I create awesome web sites and web applications. Hire me to build you a website, teach you to code or speak at your event."

PreviousContent Management Systems NextEmail

Last updated 4 years ago