A fluid, adaptable, and customizable Sass(.scss) grid-system based on flexbox.

Project Author
  • Sass(.scss) Grid System Development
  • Docs Site Development
  • Logo Design


Spyder began as a personal project born out of frustration towards available grid systems at the time (think Bootstrap, Foundation, etc. circa 2013-14). I was not a fan of how css grids were commonly fixed width by default, with fluid widths viewed as optional. Furthermore, I thought it was overkill to have 12 column grids for smaller screensizes such as tablets or smaller PCs. I wanted a grid system that not only responded to different breakpoints, but physically adapted as well.Spyder was initially built as a float-based grid system, which was the most popular implementation of css based grids at the time. Once browser support for css flexbox was stable and consistent, Spyder was updated accordingly.


Spyder is currently used in production for a handful of 2600Hz marketing sites, this portfolio site, and spyder's own docs site. It is also in the process of becoming the underlying grid system for the Monster UI Design Framework. You can view the project on Github, or visit Spyder's documentation site to learn more.

what's this!?

You wouldn't visit a museum and view the work on display through a small device... why view a portfolio that way?

Snarky jokes aside...a mobile experience is coming soon.In the meantime, here are some things you can view until you get to a larger screen: