Week 180 was posted by Charanjit Chana on 2021-04-05.
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.
Tags: css, development, sass, skeletoncss