1 Thing A Week 1 Thing
A Week

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

Week 177.0 — 15th March '21

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.

More from 1 Thing A Week
« I ❤️ SASS but am I making the most of it? How I'd fix the Coronavirus fixture fiasco Apple unveils M1 Ultra I thought I knew HTML pretty well, but I still have a lot to learn »

Advertisement

Notable

Quick links and commentary on interesting articles, videos and more throughout the week.

  1. 177.3 – Wednesday
    1. The perfect keyboard @yippiehey on instagram.com
  2. 177.5 – Friday
    1. Sweden Solar System swedensolarsystem.se
    2. Home Office Sofa @joaoteixeira_designstudio on instagram.com

Jump to notable items for Week #176, Week #178 , view the notable archive or my favourites.

About 1 Thing A Week

A website curated by @cchana bringing you 1 Thing A Week, delivered every Monday morning.

You can find a list of all articles in the archive, or read the most popular.

Find out more about 1 Thing A Week or read the privacy policy.

Market

Visit the market and support 1 Thing A Week.

You can find 1 Thing A Week on Twitter, Facebook, Instagram & Reddit