Note: This section of the site is under heavy construction, tread carefully.

Bookmarks tagged with “webdesign”

1,394 bookmarks by garrettc


Defensive CSS

Practical CSS and design tips that helps in building future-proof user interfaces.

Bookmarked on #



Why it's time to update our language about bad design patterns by Amy Hupe, content designer.

Why we need to retire the racist term we use to describe bad design patterns, and what to use instead.

Bookmarked on #



Heazy SVG Creator

SVG creator with waves, bubbles, and other shapes.

Bookmarked on #



A complete guide to using CSS filters with SVGs

“In this post, we’re going to learn about a unique and powerful set of CSS tools, SVG filters, to improve visual aspects of a website.”

Bookmarked on #


SVG spinners

A collection of 24 x 24 dp SVG spinners.

Bookmarked on #




Adactio: Journal—Pace layers and design principles

"I think it was Jason who once told me that if you want to make someone’s life a misery, teach them about typography. After that they’ll be doomed to notice all the terrible type choices and kerning out there in the world. They won’t be able to unsee it. It’s like trying to unsee the arrow in the FedEx logo. I think that Stewart Brand’s pace layers model is a similar kind of mind virus, albeit milder. Once you’ve been exposed to it, you start seeing in it in all kinds of systems."

Bookmarked on #


The Surprising Truth About Pixels and Accessibility: should I use pixels or rems?

"The truth is, if you want to build the most-accessible product possible, you need to use both pixels and ems/rems. It's not an either/or situation. There are circumstances where rems are more accessible, and other circumstances where pixels are more accessible."

Bookmarked on #







Understanding Layout Algorithms

"[…] CSS is so much more than a collection of properties. It's a constellation of inter-connected layout algorithms. Each algorithm is a complex system with its own rules and secret mechanisms. It's not enough to learn what specific properties do. We need to learn how the layout algorithms work, and how they use the properties we provide to them."

Bookmarked on #


Streets Series' Articles

A breakdown of improving a major US retailer’s website performance.

Bookmarked on #



Spruce CSS - Minimal, modern CSS framework

"An open-source, lightweight and modernish CSS design system, framework built on Sass."

Bookmarked on #


Color Codes

Excellent colour resource with subdomains per colour including complementary, analogous etc colours.

Bookmarked on #


Cirrus CSS

A component-and-utility-centric SCSS framework designed for rapid prototyping

Bookmarked on #


Intopia Launches WCAG 2.1 Map

“On 24 July 2018, Intopia launched WCAG 2.1 Map, a visual rendering of the Web Content Accessibility Guidelines (WCAG) version 2.1.”

Bookmarked on #


Unit testing Django and Wagtail

A repository for the discussion and publication of the CFPB development team standards.

Bookmarked on #



Building Web Layouts For Dual-Screen And Foldable Devices

"Dual-screen devices have been on the market for nearly three years. In that time new web platform technologies have been built with developer feedback to enable layout on the web that adapts to these devices. These web platform capabilities integrate with existing concepts, such as the viewport and media queries, so that developers and designers can spend more time ideating about how to leverage two displays to create enhanced experiences rather than learning a new set of code to build them."

Bookmarked on #



Katex math typesetting library

The fastest math typesetting library for the web. Simple API, no dependencies.

Bookmarked on #


Docker, Django, Traefik, and IntercoolerJS is My Go-To Stack for Building a SaaS in 2021

I provide a deeper-dive on the tech stack I like to use in 2021. It is simple, easy to work with, and allows you to grow out of it when the time comes. Updated for 2021!”

Bookmarked on #



almond.css: Collection of CSS styles to make simple websites look nicer

"Almond.CSS is a collection of class-less CSS styles to make simple websites look better. Almond.CSS helps in two ways: it normalizes the CSS styles to provide similar experience cross-browser, and it spices things a little by adding custom styles (that can be personalized!)"

Bookmarked on #



hue.tools

An open source toolbox for colours.

Bookmarked on #


Make Beautiful Gradients in CSS

"Unless you're really careful when selecting colors for your gradients, you'll often wind up with a desaturated midsection in your CSS gradients. As it turns out, though, we can absolutely avoid the gray dead zone. In this blog post, we're going to learn about why this happens, and how we can use color theory to create rich, vivid, thoroughly-alive gradients."

Bookmarked on #


SVG Icons Library

The Simple and Definitive hand-crafted SVG Icons Library.

Bookmarked on #


Filterable WCAG tests

The WCAG2.1 guidelines summarised with filters and categories.

Bookmarked on #


Ashley Sheridan - Making an Accessible Hamburger Menu

How to improve the accessibiilty of the checkbox approach to hamburger menus.

Bookmarked on #


Defensive CSS

"Oftentimes, we wish that there was a way to avoid a certain CSS issue or behaviors from happening. You know, content is dynamic, and things can change on a web page, thus increasing the possibility of a CSS issue or a weird behavior. Defensive CSS is a collection of snippets that can help you in writing CSS that is protected."

Bookmarked on #


<css-doodle />

A web component for drawing patterns with CSS

Bookmarked on #


Advanced Perceptual Contrast Algorithm

“WCAG 3 will use a new color contrast method called APCA (Advanced Perceptual Contrast Algorithm). It's a big improvement over the current system but there are a lot of changes to get your head around.”

Bookmarked on #


Fonts Knowledge - Google Fonts

"Welcome to our library of original guides to the world of typography, which the Google Fonts team is producing in collaboration with typographic experts from around the world. Google Fonts Knowledge enables designers and developers of all skill sets to choose and use type with purpose."

Bookmarked on #




Responsive Layouts, Fewer Media Queries

An excellent collection of responsive design techniques that don't require media queries

Bookmarked on #



Splide - The lightweight, flexible and accessible slider/carousel

"Splide is a lightweight, flexible and accessible slider/carousel written in TypeScript. No dependencies, no Lighthouse errors."

Bookmarked on #


Your CSS is an interface

“Interfaces are our gateway to working with computers.”

Bookmarked on #


Cleanup.pictures

"Remove objects, people, text and defects from any picture"

Bookmarked on #


CSS Shadow Palette Generator

Friendly tutorials for developers. Focus on React, CSS, Animation, and more!

Bookmarked on #