Seed:
A component-first CSS design system.

Download the framework

Seed is available as a complete CSS framework and can be downloaded and used today!

The super fast way

Download the compiled and minified CSS from Github:

Once downloaded to your project, add it into your HTML:

<link rel="stylesheet" href="/css/seed-framework.min.css">

The slightly more complicated, but better way

Install via npm:

npm install seed-framework --save

Add it to your node-based workflow. The following example is using Gulp:

var gulp = require('gulp');
var sass = require('gulp-sass');
var seed = require('seed-framework');

gulp.task('sass', function () {
  return gulp.src('./sass/**/*.scss')
    .pipe(sass({
      includePaths: seed
    }))
    .pipe(gulp.dest('./css'));
});

You can find more node workflow examples in our Seed Pack quick start guide.

Download the Packs

One of Seed’s key features is it’s modularity. It’s CSS code-based is available as individual self-contained “Packs”. In fact, the “framework” is just a collection of Packs.

Check out Seed Packs

Why we created Seed

Seed was CSS project created at Help Scout to improve how we wrote and managed our CSS code base.

In addition to benefits you’d expect from a CSS solution or framework (such as components and general scalability), we needed something that was…

Build-tool independent – not tied to something like Webpack or Gulp
Intuitive and simple, allowing non-developers to build UI / page designs
Re-usable across multiple applications/projects
Small and self-contained – to be implemented piecemeal during the CSS refactor/migration process

The most important requirement would be for it to Allowed multiple folks to work on the same CSS code at the same time, across multiple Github branches across multiple on-going Pull requests (with minimal conflicts).

Thankfully, Seed was able to do all of those things for us and more! It’s been implemented in our Web app, Marketing website, and our Styleguide. (And this site too!)

About Seed

It’s got “Packs”

Seed’s CSS code-base is written in SCSS and is available as individual self-contained modules – we call them “Seed Packs”.

It’s open source

Every single Seed Pack as well as other Seed related node modules are completely open source!

It’s more than just code

Although Seed’s modules are available for download and use, Seed is much more than just SCSS/CSS code. It is also a CSS architecture and design philosophy with a strong focus on flexibility, re-usability, and intuitiveness.

Help Scout Developers

Seed: A component-first CSS design system.