1 Thing A Week 1 Thing
A Week

First update to SkeletonCSS

Week 180.0 — 5th April '21

After launching the "reserve your username" page for In My Bio, I back ported some small updates to SkeletonCSS. It's my personal base SCSS file for personal projects and it has already made the initial steps of a project faster.

Frameworks can give you a really good head start on projects, but they're often bloated and the plan with SkeletonCSS is to keep it as lightweight as possible. As well as a small restructure, I've introduced a couple of files to start separating out the CSS into more manageable files (for the future).

Inspired by Kevin Powell again, I now have a _colors.scss file where I have an object containing neutral and primary colours and assigning them to the :root element. There's also a _responsive.scss file which houses a single mixin at the moment to make writing out media queries a little easier.

It's been quite a while since I really used mixins in any meaningful way and maps are completely new to me.

// Turn this: $colors: ( primary: ( -3: hsl(20, 100%, 20%), -2: hsl(20, 100%, 40%), -1: hsl(20, 100%, 30%), 0: hsl(20, 100%, 50%), 1: hsl(20, 100%, 60%), 2: hsl(20, 100%, 70%), 3: hsl(20, 100%, 80%) ), neutral: ( 0: hsl(0, 0%, 0%), 1: hsl(0, 0%, 20%), 2: hsl(0, 0%, 40%), 3: hsl(0, 0%, 60%), 4: hsl(0, 0%, 80%), 5: hsl(0, 0%, 100%) ) );

// Into this: --color-primary--3: #662200; --color-primary--2: #cc4400; --color-primary--1: #993300; --color-primary-0: #ff5500; --color-primary-1: #ff7733; --color-primary-2: #ff9966; --color-primary-3: #ffbb99; --color-neutral-0: black; --color-neutral-1: #333333; --color-neutral-2: #666666; --color-neutral-3: #999999; --color-neutral-4: #cccccc; --color-neutral-5: white;

I spent a lot of time writing out the latter last year and this would have made it all way more maintainable (and bearable) had I had some exposure to it before. Better late than never, I guess.

More from 1 Thing A Week
« My CSS properties explainer thread on Twitter The Long Goodbye – Riz Ahmed 3 things I didn't know SCSS / SASS could do »

Advertisement

Notable

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

  1. 180.3 – Wednesday
    1. Rocket launch as seen from the ISS ISAA, NASA, Expedition 57 Crew on apod.nasa.gov
  2. 180.5 – Friday
    1. Wood and resin whales toxel.com

Jump to notable items for Week #179, Week #181 , 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