Introducing SkeletonCSS, my take on a base SCSS file This is not a reset, but a starting point for any project

When it comes to CSS I don't think I've started a project with a reset file. Having written CSS for the best part of 20 years, I've never really found them useful or necessary. Yes, all browsers have their quirks but there's rarely been an issue that can't be overcome. The 3-pixel bug in IE6 is the only thing I've ever sought a reusable fix for.

Fast forward to today and I've kicked off a number of projects since 2017. Some of which have turned into something more permanent, and others have never made it past my laptop's hard drive. Each time I start with an empty SCSS file and begin the job of using copy and paste to bring in the basics.

It adds time to what I'm trying to do and almost every time, the structure is the same. When I had a minute to think about what I was doing, it dawned on me that I should make my own base file that I can run with.

That's where SkeletonCSS comes in. It's important to say that it is not a reset, but just the bare bones (skeleton 😉) to give me a basic structure to get started with:

• Introduces basic CSS variables
• Defaults to system fonts
• Mobile first with responsive breakpoints:
  • Larger than a generic mobile
  • Larger than a generic tablet
  • Laptops and desktops
• Media query for dark mode

That structure explains not only the purpose, but the structure of the file too. Because it's fairly small, it should be easy to adjust for your own needs if you find it useful. It's currently 62 lines of SCSS and compiles via CodeKit to just 532 bytes.

Resets, I'm sure, are useful in their own right, but this is all I really need to get a project going.

The future of SkeletonCSS

I'll be delving into mixins, partials and typography to make it even more useful but I'd like to keep the resulting CSS as small as possible.

Update

I came across an article that talks about using enabling selectors, not disabling ones and it's a philosophy that sits really well with me. Going forward it's an approach I'll look to take when writing my CSS and I'll be baking it into the SkeletonCSS project.