Skip to main

Open Source Tools

Support tools that you and millions of developers rely on

Since we began, OddBird has contributed to open tools & standards — focusing lately on CSS and related platform features with Miriam joining the W3C as an Invited Expert. That work takes resources, making it hard for independent contributors like us to stay involved. If you appreciate our work, you (or your company) can sponsor us directly.

Sponsor our open web contributions »

Screenshot of demo showing inline and block shorthand values for setting start and end values of margin, padding, and border properties.

Support Logical Shorthands in CSS

Can we get this process unstuck?

by Miriam Suzanne

The CSS Working Group recently resolved to add a size shorthand for setting both the width and height of an element. Many people asked about using it to set the ‘logical’ inline-size and block-size properties instead. But ‘logical shorthands’ have been stalled in the working group for years.

With a little funding, we could make it happen!

Sponsor our work on logical shorthands »

OddBird dropped in like a task force, learned the ropes of programming language design and development, and made substantial improvements to the product. We’d love to work with them again!

—Natalie Weizenbaum, Lead designer and developer of Sass at Google

OddBird is a company I recommend without reservation. They are among the best in the world at front end, design systems, and w3c standards.

—Nicole Sullivan, Product Manager for Web UI at Google Chrome

Open Web

W3C CSS Working Group

Developing specifications for the CSS language

Miriam Suzanne (invited expert) since

Miriam is an Invited Expert on the W3C CSS Working Group, helping to develop the next level of Cascading & Inheritance, in addition to other CSS standards. She’s also active in the CSS4 and Design Token Community Groups.

Sass

CSS with superpowers

Miriam Suzanne (core team) since

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. After creating several of the most popular Sass plugins, Miriam became a core contributor to the language.

OddTools

OddContrast

Color contrast checker with Oklch, Oklab, P3, and more

OddBird (creators) since

OddContrast is a color format converter, featuring newer color formats like Oklch, Oklab, and the Display P3 color space. It’s also a color contrast checker to help designers meet WCAG 2 accessibility standards.

HTML & CSS Polyfills

Popover, CSS Anchor Positioning, Cascade Layers

OddBird (creators) since

Along with our work for the W3C developing specifications for the CSS language, OddBird has started and maintains a number of powerful polyfills for new web platform features including the Popover attribute, CSS Anchor Positioning, and Cascade Layers.

Herman

Automated style guides

OddBird (creators) since

Design systems streamline development, communication, and consistency – but often rely on dedicated teams and extended budgets. We wanted a tool that helps create and maintain living style guides & pattern libraries in an agile process, and on a budget. Herman helps you keep your development process simple – and your UX consistent – as you scale over time.

True

Unit-testing for Sass developers

Miriam, Jonny, Carl, David G, & Kit (creators) since

True is the only full-featured unit-testing framework designed specifically for the Sass language. Write your tests in Sass, compile them with Sass, and then (optionally) pass the results to a Javascript test-runner for command-line control and reporting.

Other Contributions

Blend

Sass support for LCH, Lab, and more CSS color spaces

Miriam & Jonny (creators) from

Open Source Sponsors

Current Sponsors

A huge thank you to the individuals and organizations sponsoring OddBird’s open source work!

Blue-Footed Boobies

Open Collective Avatar for benface

Common Loons

Open Collective Avatar for ScheppOpen Collective Avatar for ThijsOpen Collective Avatar for AnonymousOpen Collective Avatar for Nicolas ChevobbeOpen Collective Avatar for Paul van BuurenOpen Collective Avatar for William KillerudOpen Collective Avatar for Nikita DubkoOpen Collective Avatar for JohannesOpen Collective Avatar for Eric PortisOpen Collective Avatar for Outline GbROpen Collective Avatar for Mat MarquisOpen Collective Avatar for Roman KomarovOpen Collective Avatar for Alice BoxhallOpen Collective Avatar for Luke WarlowOpen Collective Avatar for Pelle WessmanOpen Collective Avatar for Jens GrochtdreisOpen Collective Avatar for Lynn FisherOpen Collective Avatar for Ashur CabreraOpen Collective Avatar for Pascal DuezOpen Collective Avatar for Tyson GachOpen Collective Avatar for MayankOpen Collective Avatar for thanks.devOpen Collective Avatar for Syntax

Sponsor OddBird’s OSS Work

We love contributing back to the languages & tools that developers rely on, from CSS & Sass to browser polyfills and Python. Help us keep that work sustainable and focused on developer needs!

2024 OddTools Posts

  1. see all Winging It posts
    Winging It post type

    Using New Color Formats

    on Winging It episode 9 with James, Miriam, & Stacy on | 53 mins

    Miriam Suzanne, Stacy Kvernmo, and James Stuckey Weber demo how to use new color formats with OddContrast, a color tool for previewing, accessibility testing, and selecting the format/space.

2019

  1. Sample organized color swatches with hex and hsl values
    Talk post type

    Agile Design Systems

    with meaningful code and automation

    by Miriam Suzanne

    Past

    • – Washington, DC

      Agile Alliance

    • – Denver, CO

      Agile Denver

    see all Talks & Workshops
  2. Giant pencil awarded to Miriam Suzanne for Best of CSS Dev Conf 2017
    Talk post type

    Don’t Use My Grid System

    It’s time to move past grid systems like Susy

    by Miriam Suzanne

    Past

    • – Boulder, CO

      Boulder Python

    • – San Francisco, CA

      Covalence Conf

    see all Talks & Workshops

2018

  1. Article post type

    VueConf US

    Agile design systems in Vue

    by Miriam Suzanne on

    I’ve been excited about Vue.js since Sarah Drasner first showed me the basics. Since then, we’ve started using it for client work at OddBird, and I’m constantly impressed by the power and simplicity – so it was a real honor being invited to speak at the first VueConf US in…

    see all Article posts
  2. Sample organized color swatches with hex and hsl values
    Article post type

    Herman Style Guides

    An agile approach to design systems on a budget

    by Miriam Suzanne on

    Design systems streamline development, communication, and consistency – but often rely on dedicated teams and extended budgets. We wanted a tool to create and maintain living style guides & pattern libraries in an agile process, and on a budget. Herman helps keep our development flow simple, and our UX consistent…

    see all Article posts

2017

  1. Viewport size diagram
    Article post type

    Media Queries & Grid Settings

    Practical media helpers for Susy3

    by Miriam Suzanne on

    Most grids change with the viewport – and Susy needs new settings at each breakpoint. Susy3 is designed without mixins for complete flexibility from project to project, but it can be useful to build additional tools and shortcuts as you go. Here are some snippets to help you get started…

    see all Article posts
  2. the text color(kevin bacon) on a pink background
    Talk post type

    Code Patterns for Pattern Making

    by Miriam Suzanne

    Past

    • – Denver, CO

      Refresh Denver

    • – Denver, CO

      Front Range Front End

    see all Talks & Workshops
  3. see all Article posts
    Flexible grid column layout
    Article post type

    Welcome to Susy3!

    Make grid systems your fallback plan

    by Miriam Suzanne on

    We’re excited to introduce Susy 3.0, a major update to our popular grid-math calculator – now more focused and flexible than ever. Susy was designed to make layout math easy, without forcing you into generic patterns and ugly markup. But grid systems are on the way out, replaced by real CSS layout specs that live in the browser. With Susy3, we want to help make that a smooth transition.

  4. Narrow and wide spread column math
    Article post type

    Understanding ‘Spread’ in Susy3

    by Miriam Suzanne on

    Susy 3.0 will be released in the next week, if all goes well, and there’s a lot to write about it. I wanted to start with a detailed overview of one core concept: spread.

    see all Article posts
  5. Blueprint for NYC signage
    Article post type

    Code Patterns & Style Guides

    by Miriam Suzanne on

    Living Style Guide documentation on the web is a difficult problem, gaining a lot of attention in the last few years. Let’s take an in-depth look at one way to store patterns directly in Sass, and generate documentation automatically.

    see all Article posts
  6. Style written on sketchbook page
    Article post type

    Generating Code Documentation for Polyglot Projects

    by David Glick on

    Code documentation is ideally written as close to the actual code as possible, but compiled into a comprehensive set of documentation that includes code from all languages in use. Here’s how we intend to do that.

    see all Article posts

2016

  1. Miriam Suzanne answers questions on SitePoint
    Link post type

    Sass Toolkits, Live Q&A

    Miriam Suzanne at SitePoint on

    I did a live Q&A at SitePoint in August, talking about: Customizing Susy for your projects Other ways to do layouts (and why you might not even need a toolkit) How to select a toolkit, or build your very own!

    see all Link posts
  2. Miriam Suzanne answers questions on SitePoint
    Link post type

    Sass Toolkits, Live Q&A

    Miriam Suzanne at SitePoint on

    I did a live Q&A at SitePoint talking about: Customizing Susy for your projects Other ways to do layouts (and why you might not even need a toolkit) How to select a toolkit, or build your very own!

    see all Link posts

2014

  1. see all Talks & Workshops
    Susy is not a grid system
    Talk post type

    Your Own Damn Susy System

    an introduction to the Susy layout toolkit

    by Miriam Suzanne

    Past

    • – Baltimore, MD

      Bmore Sass

    • – San Francisco, CA

      The Mixin

2013

  1. Article post type

    Susy Next, Alpha 5

    by Miriam Suzanne on

    Susy Next alpha 5 is out, and loaded with changes. We now require Sass 3.3, we no longer require Compass, and there have been major syntax improvements. We’re getting real close to launch, and we’d love to know what you think. Play around, and let us know!

    see all Article posts
  2. Article post type

    Susy Next, Alpha 4

    by Miriam Suzanne on

    Susy Next alpha 4 is now available.

    see all Article posts
  3. Article post type

    Susy Next, The Second Alpha

    Go download & play with it!

    by Miriam Suzanne on

    We haven’t written full docs yet, and this blog post will be vastly incomplete, but I’ll give you a quick rundown of where we’re going. This is all open to change, of course. There’s a reason we’re still in alpha.

    see all Article posts
  4. Article post type

    Isolation and Bleed in Susy

    by Miriam Suzanne on

    A few new features have landed in Susy 1.0.7, even as we work on more integrated syntaxes for 2.0. The isolate() and isolate-grid() mixins help you manage the worst effects of sub-pixel rounding, while bleed() helps you break items out of the box.

    see all Article posts
  5. Article post type

    Susy Next, The First Alpha

    by Miriam Suzanne on

    Last night we released the very first alpha build of Susy Next. This release is extremely sparse. What we have built is a background ‘engine’ for calculating grid math. There are some rough first steps towards api and syntax, but they are more “proof of concept” experimentation than usable interface.

    see all Article posts
  6. see all Article posts
    Article post type

    Sass Layout in 2013 and the Future of Susy

    by Miriam Suzanne on

    The web is littered with grid systems and ‘frameworks’ that force your code & design into narrowly defined patterns. Even the most semantic of us have had to push specialized techniques in order to create a usable syntax.

    But Sass has come a long way, and I’m convinced that it’s time for something new.

    What if you had a layout system that bends completely to the needs of your site? What if you could use one unified syntax for handling responsive layouts of any kind? What if you had a modular system that let you mix-and-match to customize for every site, and change your output with simple extensions?

2012

  1. Article post type

    Off-Canvas Layout with Susy

    by Miriam Suzanne on

    The off-canvas layout pattern for responsive web design has been getting all the attention lately, and I’ve had several people ask how Susy One might play along. I’ll show you how easy it is, and how much flexibility Susy can add along the way.

    see all Article posts
  2. see all Article posts

OddNews Sign Up

Get the latest news in front-end development — CSS, HTML, JavaScript, and UX. See Archive