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

Bookmarks tagged with “css”

844 bookmarks by garrettc


HTML5 UP

Responsive HTML5 and CSS3 site templates released under the Creative Commons license.

Bookmarked on #


Defensive CSS

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

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 #


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 #


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 #


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 #


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 #


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 #




Responsive Layouts, Fewer Media Queries

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

Bookmarked on #



Your CSS is an interface

“Interfaces are our gateway to working with computers.”

Bookmarked on #


CSS Shadow Palette Generator

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

Bookmarked on #



Layout patterns

"A collection of layout patterns built using modern CSS APIs that will help you build common interfaces such as cards, dynamic grid areas, and full-page layouts."

Bookmarked on #


Designing Beautiful Shadows in CSS

"In my humble opinion, the best websites and web applications have a tangible “real” quality to them. There are lots of factors involved to achieve this quality, but shadows are a critical ingredient. When I look around the web, though, it's clear that most shadows aren't as rich as they could be. The web is covered in fuzzy grey boxes that don't really look much like shadows. In this tutorial, we'll learn how to transform typical box-shadows into beautiful, life-like ones."

Bookmarked on #


The start of a new era for Responsive Web Design | by Francois Brill | Oct, 2021 | UX Collective

"If you’ve been in the web design industry as long as I have, you know one thing is imminent, the only constant is change. Just about every 10 years or so, there’s a fundamental shift in how we do things that are paramount to leapfrogging what we’ve done before… and we are about to leap in to the next phase once again."

Bookmarked on #


Respecting Users’ Motion Preferences

"The prefers-reduced-motion media query has excellent support in all modern browsers going back a couple of years. In this article, Michelle Barker explains why there’s no reason not to use it today to make your sites more accessible."

Bookmarked on #


Web Components: HTML with Superpowers

"Earlier this year I spoke at An Event Apart’s Spring Summit and today I’m happy to share with you that talk called HTML with Superpowers, which is all about Web Components."

Bookmarked on #



Expandable Sections Within a CSS Grid

Nice CSS grid technique for inline expandable sections.

Bookmarked on #


Barebones: Responsive CSS Boilerplate

An update of Skeleton CSS to use grid.

Bookmarked on #


CSS Generators

Collection of generators for common css needs.

Bookmarked on #


Understanding min-content, max-content, and fit-content in CSS - LogRocket Blog

"Understanding the CSS sizing properties is necessary for developers who want the flexibility to present webpage content appropriately. In CSS, we define an element size using the length (px, em), percentage, and keyword values. While the length and percentage value types are often used for webpage layouts, they are not always a perfect fit. In some context, we use the keyword value types, including fit-content, min-content, and max-content. In this guide, we cover what these keyword values are, their differences, and how they can apply to a real-world project."

Bookmarked on #


csswizardry/ct: Let’s take a look inside your <head>

Diagnostic css file to identify issues in the head of a html document.

Bookmarked on #


The Future of CSS: Cascade Layers (CSS @layer)

"In the same way that Origins provide a balance of power between user and author styles, Cascade Layers provide a structured way to organize and balance concerns within a single Origin."

Bookmarked on #


Grainy Gradients | CSS-Tricks

"In this article, we’ll generate colorful noise to add texture to a gradient with only a small amount of CSS and SVG."

Bookmarked on #



CSS accent-color

"CSS accent-color from the CSS UI specification is here to tint elements with one line of CSS, saving you from customization efforts by providing a way to bring your brand into elements."

Bookmarked on #



Towards richer colors on the Web | Darker Ink

"The study of color brings together ideas from physics (how light works), biology (how our eyes see), computing, and more. There is a long and rich history following the desire to be able to use richer materials and colors when creating visual art, and the same is true of the Web today."

Bookmarked on #


Using CSS to Enforce Accessibility

Useful techniques for using CSS to highlight potential accessibility issues in a page.

Bookmarked on #


Shopify/dawn

Dawn represents a HTML-first, JavaScript-only-as-needed approach to theme development. It's Shopify's first source available theme with performance, flexibility, and Online Store 2.0 features built-in and acts as a reference for building Shopify themes.

Bookmarked on #


Gradient, Pattern, and Dither Generator

"Tools for making the websites fast, accessible, expressive, and green."

Bookmarked on #



Learn CSS

“This course breaks down the fundamentals of CSS into digestible, easy to understand pieces.”

Bookmarked on #