Skip to main

Open Source Tools

We build tools that millions of developers rely on

We use open source software regularly, and try to contribute back to the projects we use. We also develop a number of our own tools, that might be useful to others.

OddTools

Blend

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

CSS Color Modules Level 4 & Level 5 include several new CSS color formats, new color-adjustment syntax, and a contrast function. Blend provides early access to many of these features, while working with Sass colors.

Cascading Colors

Dynamic & interactive color palettes using CSS

Generate dynamic and interactive color palettes. Define custom themes with CSS custom properties, allow user-adjustments with a bit of light-weight JS, and customize the underlying system with Sass.

Herman

Automated style guides

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.

Accoutrement

Integrated design-system management in Sass

OddBird’s Accoutrement tools help keep design tokens meaningful to both humans and machines – opening the door for automation, while improving readability. These tools also integrate with Herman, our automated pattern-library generator.

True

Unit-testing for Sass developers

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.

Susy

CSS layout framework

Susy was a responsive layout engine for Sass, before flexbox and CSS grid were available. Susy is now deprecated, and will not receive updates. If you need help moving off Susy, or learning the latest in web layout, we offer training and consulting to help bring you up-to-date.

Core Team

W3C CSS Working Group

Developing specifications for the CSS language

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.

CSS Remedy

Addressing the technical debt of CSS

CSS Remedy provides a modern proposal for how CSS should work by default. Browsers are limited on how far they can improve default styles, but you don’t have to stay in the past.

Sass

CSS with superpowers

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

Nunjucks

Sophisticated templating for JavaScript

A powerful markup templating language with block inheritance, autoescaping, macros, asynchronous control, and more. Heavily inspired by Jinja2, Nunjucks is fast, lean, highly performant, and extensible.

Django

Python web framework

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel.

Compass

CSS-authoring framework & Sass library

An open source CSS authoring framework which uses the Sass language to make writing and sharing stylesheets powerful and easy. Compass was the first package-manager and toolkit-sharing platform for CSS, helping popularize the Sass language – and offering powerful browser-compatibility tools that changed the landscape for designers developers.

Virtualenv

Virtual Python Environment Builder

A tool for creating isolated ‘virtual’ python environments.

Pip

Python Package Installer

The PyPA recommended tool for installing Python packages.

Other Contributions

Helium

A Floating Browser Window for OS X

Helium is a floating browser window that allows you to watch media, browse the web, and do much more while you stay productive. Your content will never fall behind your other windows even as you switch tasks. Helium supports a customizable translucency mode that allows you to simultaneously see your content and your work, without intercepting mouse clicks when it’s translucent. You have the ability to click, drag, and scroll behind your floating content.

Warehouse

Next Generation Python Package Repository

A new code base that implements a Python package repository, with plans to eventually replace the current code powering PyPI. The goal is to improve PyPI by making it more user-friendly, with a modern look, additional features, and a more maintainable code-base, with full test coverage and documentation.

2019 Resources

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

    Agile Design Systems

    with meaningful code and automation

    see all Talk resources
  2. see all Talk resources

2018

  1. Article resource type

    VueConf US

    Agile design systems in Vue

    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 resources
  2. Article resource type

    Herman Style Guides

    An agile approach to design systems on a budget

    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 resources

2017

  1. Article resource type

    Media Queries & Grid Settings

    Practical media helpers for Susy3

    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 resources
  2. see all Talk resources
  3. see all Article resources
    Flexible grid column layout
    Article resource type

    Welcome to Susy3!

    Make grid systems your fallback plan

    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. Article resource type

    Understanding ‘Spread’ in Susy3

    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 resources
  5. Article resource type

    Code Patterns & Style Guides

    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 resources
  6. Article resource type

    Generating Code Documentation for Polyglot Projects

    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 resources

2016

  1. Link resource type

    Sass Toolkits, Live Q&A

    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 resources
  2. Link resource type

    Sass Toolkits, Live Q&A

    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 resources

2014

  1. see all Talk resources

2013

  1. Article resource type

    Susy Next, Alpha 5

    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 resources
  2. Article resource type

    Susy Next, Alpha 4

    Susy Next alpha 4 is now available.

    see all Article resources
  3. Article resource type

    Susy Next, The Second Alpha

    Go download & play with it!

    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 resources
  4. Article resource type

    Isolation and Bleed in Susy

    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 resources
  5. Article resource type

    Susy Next, The First Alpha

    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 resources
  6. see all Article resources
    Article resource type

    Sass Layout in 2013 and the Future of Susy

    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 resource type

    Off-Canvas Layout with Susy

    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 resources
  2. see all Article resources