OddBird

@OddBird@front-end.social
338 Followers
20 Following
329 Posts
Custom web apps and design systems, developed in thoughtful collaboration. A small agency with a big presence in the community – including core contributors to the CSS Working Group, Sass, and Django.
OddSitehttps://www.oddbird.net
Workshops & Talkshttps://www.oddbird.net/talks/

Make the Web a More Colorful Place!

Stacy @stacy created a tutorial for using new color spaces & formats with OddContrast.

Convert colors
See gamut boundaries
Check contrast
Share & bookmark combinations
Copy & swap colors

Read in OddNews:
https://us19.campaign-archive.com/?u=80219aa68d7bad77b9fd2eb93&id=3ea3627c16

#ux #design

Create performant layouts and resilient dropdowns with #CSS Anchor Positioning.

@jamessw has created a new course that explains how, and you can read the introduction in OddNews No. 25.

Read & subscribe to OddNews at:
https://us19.campaign-archive.com/?u=80219aa68d7bad77b9fd2eb93&id=73ec6d4846

Create performant layouts & resilient dropdowns

The 3rd demo video on Container Size Queries from @mia 's #CSS Layouts Workshop is out tomorrow.

Subscribe to get a notification on YT:
https://www.youtube.com/@wingingitoddbird

Sign up to get the demo in your inbox:
https://www.oddbird.net/oddnews/

CSS Workshop details:
https://www.oddbird.net/workshops/cascading-layouts/

Before you continue to YouTube

Thanks to everyone who has sent questions about @mia's upcoming CSS Layouts workshop!

Answers to recording, attendance, and format questions:

- Whether or not you can attend live, the workshop will be recorded and available immediately after the workshop for everyone who is registered.

- Each of the three days will be 2.5hrs, with 2 sessions and time for dedicate Q&A.

Tomorrow is the last day to get $100 off!

https://www.oddbird.net/workshops/cascading-layouts/

Cascading Layouts

A workshop on resilient CSS layouts

OddBird

Author-defined Functions are coming to CSS, and you can start to experiment with them now!

@mia explains how in a new article from OddNews No. 21.

Subscribe for monthly articles like this:
https://us19.campaign-archive.com/?u=80219aa68d7bad77b9fd2eb93&id=aac7298a5b

#CSS #frontend #webdevelopment

CSS custom functions you can experiment with now!

OddNews is our monthly email with the latest in front-end web development and UX design.

Feb issue is out:
- @jamessw explores ways to track down why an anchor isn’t found
- @mia reimagines fluid typography

Read & Subscribe: oddbird.net/oddnews

#CSS #UX #frontend

In case you missed them when they came out, here are a few of the most visited #CSS articles from the Birds in 2024.

@mia
Zoom, zoom, and zoom https://buff.ly/3XZwU8v
Learn Grid Now, Container Queries Can Wait https://buff.ly/3xDpsoL

@jamessw
Speeding Up Your Sass Compilation in Vite and Webpack https://buff.ly/49GFlJV
Anchor Positioning Is Disruptive https://buff.ly/4fXFXgb

Zoom, zoom, and zoom

The three types of browser (and CSS!) magnification

OddBird

OddNews Issue #18 is out!

In this issue:
- Winging It LIVE: CSS IS AWESOME Game Show
- Sass indented syntax improvements
- Anchor positioning is disruptive
- Winging It LIVE: Baseline and Web Features
- A songbird without a song

Featuring @stacy @mia @jamessw

https://us19.campaign-archive.com/?e=%5BUNIQID%5D&u=80219aa68d7bad77b9fd2eb93&id=730bb4b970

Game Show! CSS IS AWESOME on Dec 17

OddNews Issue #17 is out!

In this issue:
- Nov's Winging It LIVE: Baseline & Web Features
- The most desired #CSS feature you can’t use yet
- What do survey demographics tell us?
- New Awesome CSS Anchor Positioning Repo
- How to Support Anchor Positioning
- What is the air-speed velocity of an unladen swallow?

Featuring @mia @jamessw @jgerigmeyer

https://us19.campaign-archive.com/?u=80219aa68d7bad77b9fd2eb93&id=1389493bcf

What's the top CSS feature you can't use yet?

Using #HTMX for infinite scroll with @jerivas, @mia, and @sondrae.

For the full demo, check out:
https://www.oddbird.net/2023/09/19/winging-it-02/

If you need htmx development, we're happy to help! https://www.oddbird.net/contact/

htmx

During our conversation, we discuss what htmx is, how it improves user experience, and walk through some examples of common UI patterns using htmx.

OddBird