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.
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.
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!
Miriam is an Invited Expert
on the W3CCSS 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 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.
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.
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.
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 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.
A huge thank you to the individuals and organizations
sponsoring OddBird’s open source work!
Blue-Footed Boobies
Common Loons
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!
OddContrast,
OddBird’s color format converter
and contrast checker,
gets new features –
including the ability
to swap background and foreground colors,
and display color gamut ranges
on the color sliders.
Contrast ratios now incorporate
foreground color alpha values.
onWinging It
episode 9
withJames,
Miriam,
&Stacyon
| 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.
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…
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…
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…
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.
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.
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.
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.
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!
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!
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!
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.
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.
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.
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?
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.
