First update to SkeletonCSS

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

Tweet WhatsApp Keep Upvote Digg Tumblr Pin Blogger LinkedIn Skype LiveJournal Like