About the Delta Design System
I create handcrafted, responsive websites and applications for a living and for fun, and I frequently find myself reusing my own code. So I decided to turn my work into an open source design system that makes it easy to design responsive websites, apps, and prototypes with code that is semantic, flexible, customizable, and wicked efficient.
There are lots of available frameworks to choose from, and I’ve used more than a few:
I love these, but I always found myself working harder to customize and simplify the code I would wind up with, and I was never entirely satisfied with the results. That was the idea behind the Delta Design System: something that was relatively simple yet effective. But how did I get here?
Inspiration
I’ve been designing for the web for… well, let’s just say I’ve been designing for the web for awhile now. At some point in my early history, someone said that – if you really want to know what you’re doing – you need to design in html and css. I took that to heart and have been looking at source code like it’s the Matrix and designing with html and css ever since. Some things, however, had a major impact on me along the way.
Responsive Web Design
It’s no exaggeration to say that Ethan Marcotte’s Responsive Web Design article changed my life. Everything came into focus when I read that article. I love everything about the concept of responsive design. I am always stunned when I come across a project that does not take this approach from the get-go.
Flexbox
Working almost hand-in-hand with responsive design, flexbox was a concept I was able to get behind immediately. I was always a little annoyed using things like float and position: absolute to get the layouts I wanted, and I was almost always faced issues with the layouts anyway.
I may not now (or ever) have a complete grasp on flexbox, but the concept and the syntax was easy enough to change the way I thought about code and design.
Sass
I like to work quickly, and I don’t like making constant micro-adjustments to my css in order to make things work for a singular instance or purpose. It took me a long time to ramp up to Sass, but once I was able to start using the basics, it had a profound effect on the way I went about my work.
I’ve always been a little picky about my css (even though there’s more madness than method right now… could use some help with that), but with Sass I was able to make things more flexible and robust while still keeping things tidy. Sass also makes it much easier to make wholesale adjustments to my css without having to spend an eternity searching through every line of code.
Principles
I’ve got principles, and they’re a big reason why I use my code over and over again. I believe that products should be engineered to create better experiences for the user (and achieve applicable business goals and objectives). I want my work to be thoughtful and deliberate. A design system should help us work together to provide consistent experiences that perform well across all devices. The following principles have been part of my lexicon for years, so naturally they would also be a big part of the Delta Design System.
Efficiency
Make the best thing the easiest thing
Think simplicity: you are going to have to own this thing you build, and you are going to be tasked with supporting it’s continued evolution. We want to be nimble. We should never do something just because we can or because we think it is cool. We should only do something because it is the right thing to do for the given purpose. The least amount of code is the right amount of code.
Standards and decisions are codified and used to provide designers and developers easy-to-use tools to expertly and efficiently deliver the highest quality experiences to users. The goal is to simplify and standardize.
Accessibility
Accessibility is not negotiable
Standards should be built with a priority on 508 compliance and WCAG guidelines at every step of the design process. From colors to code, everything required to meet high standards of accessibility should be built into any design system or framework – no shortcuts whatsoever when it comes to accessibility. We all need to become experts on this topic.
I have done my best with regards to accessibility, but I know that there is more to do, and I welcome any and all qualified input on this subject.
Flexibility
Reduce, reuse, recycle
Review, test, evaluate, and repurpose patterns, code, and designs from other foundations, repositories, and style guides to make use of tried-and-true best practices. Do not create new components or recreate existing components unless the new pattern will be applicable to other existing properties. We want our work to be smart, methodical, efficient, and most of all functional. We want to use all of the tools we have available, but only when it makes us (or our partners) smarter, more efficient, more functional, and more effective.
Please Get Involved
I used to think I knew it all. Maybe I did at one time. However, a few years ago I came to the realization that I do not know it all. My favorite part of open source code is that it is a community, and I would love it if people would contribute to the project. There is still lots to do, and this project would be better with more involvement. At least I believe it would be.
I’ll be keeping an eye on issues. I’ll be tracking scheduled projects with updates and fixes. I hope to add a code guideline and contribution guidelines in the near future too.
Whatever your expertise: I need you. Cheers.