Forem: Roland Taylor

Reframing Frameworks: Finding the Balance

Roland Taylor — Wed, 04 Feb 2026 12:36:04 +0000

Let's talk a bit about a subject that often comes to mind when we're talking about CSS: should you learn the basics, or should you just master one or two frameworks and call it a day?

And as someone who's been on both sides of this fence, let me just say unequivocally: yes.

But all jokes aside, there is a real answer to this to question, and it is that you should both learn the basics (and learn them well), and get a good understanding of at least one framework or utility library along the way, preferably both.

I won't tell you where you should start, because each individual learns through different methods, but I personally lean more in the direction of learning the basics first, so that you're not tripped up by quirks and unexpected errors later.

Why Learn the Basics?

It's tempting to think that you don't need to learn the basics when learning the "basics" feels anything but basic, and having been in this position at one time in my life, I can certainly understand why. When you first get into web design, unless you're feeling especially adventurous, it's easy to settle into heavy or even full reliance on frameworks to build just about everything.

After all, few of us want to sit around all day defining different buttons and their various states, deciding what colours to use, keeping everything consistent, and of course — testing it all to ensure that it works. That's a lot of work, and unless you're being paid to do it, it doesn't always seem worth it.

"That's just like... your opinion, man"

Yet, an old lesson I learned a good number of years ago still holds true: frameworks are opinions, and while opinions are often helpful shortcuts, you can't take every opinion with you into every arena.

Another thing I've learned, is that opinions, no matter how helpful, don't always teach you how to think. By "how to think", I mean the very logical process of thinking itself, not just "a set of ideas you should hold." If you don't have a foundational understanding of why some ideas are good ideas, it's easy to make a mess even when you try to put those good ideas to use.

The same can be said for code generation. Sure, you can have a coding assistant compile a stylesheet for you, and it can do a mighty fine job. I know this from personal experience. However, if you don't know what it is that the coding assistant has given you and how to manipulate it, you can run into situations where there are goals you just can't reach, because you don't even know how to describe what it is that you're trying to create.

Where Frameworks & Utility Libraries Fit

As I've already mentioned, CSS frameworks are best understood as collections of opinions, and utility libraries are best understood as collections of prefabs. Both serve a number of highly valuable purposes, and can save you a lot of time, effort, and stress if used correctly. What both frameworks and utility typically libraries do, is cover much of the repetitive work that often makes CSS work truly tedious and off-putting to those who don't already dig the language.

However, there's a deeper potential purpose to each, and it's one that is often not well understood. Frameworks can often teach you how to use CSS economically, and utility libraries often teach you how to use CSS more logically and consistently. Both teach you how to think not just in rules and properties (the core components of CSS itself), but in systems; the key component that is often lacking in how we view CSS as a language.

Systems Help the Basics Make Sense

For this reason, I wouldn't discourage anyone from learning to use a popular framework or library, like Bootstrap, Foundation, or Tailwind. I say go for it, but do so with the awareness that you're not just learning how to apply a bunch of classes to your HTML so you don't have to do the work of learning CSS fundamentals. As a matter of fact, I'd recommend learning your framework or library of choice a bit more deeply.

One of the best ways you can improve your skills is by opening the inspector on a web page using your favourite framework and seeing both how and why it works (and, frankly, why sometimes it doesn't). You'll quickly notice that certain patterns are repeated across the board, and you can then use these patterns in your own, custom code until you find out what works and what breaks.

If you really want to maximize your potential, I recommend combining your master of the basics and of existing solutions in the following areas:

Strategy

You might think that you can just tell a code-friendly LLM to generate code with the best strategies and call it a day, and sometimes, that's enough, to be fair. But, as many developers are discovering, "AI slop" is a real phenomenon, and it can extend to code. CSS is not exempt. In fact, it can be one of the worst victims of this. But before you blame the LLM, you should know that much of the issue often comes from bad inputs. Why? Because you need to know what you're doing in order to make good code, or to tell someone (or something) else what you're looking for.

The same applies whether you're writing you're own code, or using a framework or library. There will be times when you need to work around an existing solution and build your own. Knowing both how to think, and what to do, gives you the edge here.

Optimization

Performance is a non-negotiable if you're going to use CSS professionally. Most frameworks and libraries have been optimized to work well out the box, and sometimes do allow for some wiggle room in this sense. But, if you're going to push the boundaries of both design and performance, you need to know more than just how to drop some classes on your HTML elements. You need to know how CSS works, so you can streamline its behaviour and avoid unnecessary slowdowns.

Skill & Customization

It goes without saying, but I'll still say it: you need to learn the basics if you want to become truly skilled at CSS. Surely, you become "skilled" using at frameworks and libraries without learning CSS more deeply, but you'll be limited to what the framework or library itself gives you. That may not seem like a big deal at first, but think about this: even simply changing things like colours, spacing, various states and rounding of borders — all require that you actually know CSS more intimately.

Finally, here's my #1 recommendation:

Learn By Building Hands-on

This is how I've learned to fall in love with the language. I've built multiple frameworks and utility libraries over my time. Some sucked, some soared, some I can't believe I wrote them (I'll let you guess whether that's good or bad. Hint: It's both). I've also built many custom solutions on top of existing frameworks, turning them from "cookie cutter" into "unbelievable".

If you take anything away from this post, let it be this: you need to master the basics so you can remaster the extraordinary.

Pinta's website refresh - Giving back with design

Roland Taylor — Thu, 10 Apr 2025 18:08:43 +0000

Hey everyone!

As you may know, I have a deep passion for Open-Source software, and it's one of my personal missions to see Open-Source become the first choice for everyone, at all technical levels. This is why I'm proud to share this contribution - a massive overhaul for the Pinta website!

I use Pinta internally at my agency, because it strikes the perfect balance between more hefty editors like GIMP and Krita, and lightweight editors like Drawing and KolorPaint. As such, this project is a labour of love, and the first in what I hope will be many opportunities to give back.

If you'd like to read more about the project, my motivations for doing this, and the ways in which we're aiming to elevate Open-Source software through design, you can check out the blog post.

P.S. Pinta has a brand-new release coming pretty soon, which you can also read about in my in-depth review of Pinta 3.0.

I'll be back soon with CSS tutorials and fun, so be sure to stick around!

I want to get back into desktop programming - help me choose

Roland Taylor — Fri, 07 Jun 2024 02:50:11 +0000

Hi all!

Every so often, I find myself missing the fun of building user interfaces and running applications that I put together myself, even if just for the sake of it. It's been so long for me, that the last time I build anything meaningful on the desktop, I was running Windows XP! Since then, I've been focused on the web (front end and backend; but frontend primarily) for the most part, with some CLI programming thrown in here and there.

But now, I'd like to get back into the groove of it, as a hobby, really, but I'm undecided on what language I should pick up, and where I should put my efforts.

So I'm throwing it out to you...

What's your favourite language + toolkit, and why?

If you're into desktop programming on Linux, what's your language + toolkit, and what makes it special for you? In the past, I've played around with interpreted languages for desktop programming, but I've always loved the speed and frankly, the "elite feeling" of compiled languages, such as C and C++.

However, I feel like we've come a long way since the days when these are our primary options (outside of Pascal and the like). So if you were getting started today, what would you choose? Rust? Vala? Something interpreted?

Feel free to share resources in the comments, too - I'd especially love to get into a language with a "noob-friendly" approach to getting started. I find that no matter how far I get in my understanding, the simpler, the better.

CSS Funstuff - Cards

Roland Taylor — Wed, 29 Nov 2023 16:08:42 +0000

Hey everyone!

I'm always amazed at the things you can do with CSS if you really put your mind to it! I'm sure many of you are too, judging from the responses I've seen to even my first posts in the series. So, once again, I'm back with another example of CSS Funstuff: Cards!

Here's the Deal:

Cards are used in UI design as a container for other elements, whether text, images, buttons, etc. Typically, creating a card is as simple as creating a generalized box, such as adding a border or shadow to an HTML container element.

Before we go further, if you're following this article as a tutorial, you may want to apply the standard CSS Funstuff styling to your document. To do this, simple copy and paste the following CSS styles:

:root {
  background-color: rgb(35, 35, 35);
  color: rgb(235, 235, 235);
  font-family: sans-serif;
  letter-spacing: .075rem;
  line-height: 2.735rem;
  padding: 5rem;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

Example 1:

Let's create a simple article element, with some filler text:

<article class="card">
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Quae dicta repellat quidem eum sint a, iusto labore unde,
    atque ab porro voluptas tempore quo? Culpa maxime
    aspernatur nisi hic eius!
</article>

We'll also give it a simple card style, using CSS:

.card {
  border-radius: 8px;
  box-shadow: 0 9px 18px rgba(5, 5, 5, .35);
  padding: 3.5rem;
  transition: 1s;
}

This should give us something that looks like this:

Now we have a simple card! But no tricks! Bummer, right? Of course, we want to change the background colour, border styles, or other such properties, we can. But if say, we want to rotate the card while keeping the text in place, we simply can't do that.

...or can't we?

Stacking the deck!

Fortunately, there is another way! Most, if not all, container level HTML elements can use what are known as pseudo-elements. With the right combination of certain pseudo-elements and some snazzy CSS styles, you do exactly what we couldn't do earlier, and more!

Example 2:

For this alternate example, we'll add another class, .card-alt, and add a new rule: position: relative;.

.card-alt {
  padding: 3.5rem;
  position: relative;
}

This new rule will be important for the next step. We'll be using the pseudo-element ::after, positioned absolutely. In order for this to work, we need the parent element, the article with the class .card-alt to be position relatively, so that any children within it can be positioned relative to the parent.

Next, we'll set the ::after pseudo-element to using the following styles:

.card-alt::after {
  background-color: rgba(255, 0, 0, 0);
  border-radius: 8px;
  box-shadow: 0 9px 18px transparent;
  content: '';
  inset: 0;
  position: absolute;
  transition: 1s;
  z-index: -1;
}

.card-alt:hover:after {
  background-color: rgba(235, 0, 135, .175);
  border-radius: 18px;
  box-shadow: 0 9px 18px rgba(5, 5, 5, .35);
  content: '';
  filter: hue-rotate(135deg);
  inset: 0;
  position: absolute;
  transform: scale(.975) rotate(3.75deg);
}

What this does is:

Create a card using the pseudo-element ::after as the card outline and background.
Rotate and scale the card background when hovered, and change the background color.

Note: The rule z-index: -1; is necessary to set the pseudo-element to be underneath the parent element.

Final result:

But wait! There's more!

As I always do with CSS Funstuff, I've put together some further examples that you can use. You can grab these examples for free over on my Gumroad page.

I'm back!!!

Roland Taylor — Sat, 09 Sep 2023 18:47:00 +0000

So... I've been MIA for a while...

In case you haven't noticed, I've been missing around these parts for a little while, although a lot has certainly been happening. In May of this year, I began my Outreachy journey, working with the Fedora Badges design project.

Before this time, I'd been hinting that I'd be releasing some new content, which I indeed ha(d/ve) in the works. The nature of life being as it is, however, I've had to delay the release of those articles, so I could focus on completing my internship successfully and taking care of some other pressing matters in life.

That said, my internship is now (successfully!) completed, and I've got some room to focus on giving you the content I've been promising for so long!

So what are we looking for, sir?

Glad you... or I? somebody... asked!

I've been working on a LONG post about conditionally applying styles via the use of @supports in CSS. Initially, I was going to release this post in one go, but as time dragged on and the post grew, I've come to realize that it would be better to split this post up into a series. And that's exactly what I'll be doing.

Part of the reason I've decided to do this is because CSS has been gaining new features by the bunch in recent years/months... weeks, even. There are a lot of opportunities for turning these new features into amazing functions within our websites and projects.

For instance, we can now use :has(), cascade layers, accent colors, and so much more!!!

I'll be playing with these new toys (and some old toys) and bringing you more #CSSFunstuff to play with! It's gonna be a fun ride!

If you haven't yet, feel free to follow me (wink wink, nudge nudge), but also let me know what new features in CSS you're excited about, so we can talk about them! I'm happy to dive in!

Until next post...

I'll be seeing you around! Please send me cool DEV articles in the comments or on my Mastodon profile (I'm pretty much done with... that other place). I'd like to see what everyone's been working on and learn some new tricks myself!

Glammer Open Source Edition: A Free Website Template

Roland Taylor — Fri, 14 Apr 2023 18:15:22 +0000

Hi everyone!

I know you're all (im?)patiently waiting for the return of CSS Funstuff, and trust me - it's coming! But until then, I've got something just as exciting to share with you!

A while ago, back when I was doing weekly design streams on my YouTube Channel and Twitch - why aren't you subscribed? - I did a stream where I designed a beautiful portfolio website template, called Glammer.

Unfortunately, that stream has since been lost to time and storage space 😬... but! The Glammer lives on! Over the year+ since that stream, I've been periodically working on it, adding polish and new features from time to time, developing along two pathways, and the first of those two, Glammer OSE, is finally ready to be released into its natural habitat - your hands!

Show me the goods!

Alright, alright! Calm down! Here you go!

As you can see, Glammer is themeable out the box and features 4 themes (1 default and 3 custom themes). Themes are saved even when you close the tab, and require no cookies (just local storage). You can easily add your own (just take a look at the CSS for an idea of how to create and modify the existing themes).

The technical bits

Under the hood, Glammer OSE makes use of pure HTML, CSS, and JavaScript, leveraging CSS custom properties to keep things consistent, and make things themeable. If you're new to the web design game and looking to learn some some more tricky concepts, this template is a great example to play with and learn more.

If you have further questions about any of the technical parts of the template, you can drop me a line right here and I'd be happy to help (even write another article)!

Where can I get it?

You can grab yourself of a copy of Glammer OSE from My Gumroad Store or click here: Glammer Open Source Edition

Glammer OSE is 100% free, and once you've grabbed the template, you'll get notified of any updates or giveaways I for this template! Feel free to opt out at any time if that's not your thing.

What's Next?

Now that Glammer OSE is out the door, look forward to the beefy, robust, battle-tested Glammer Pro, which brings even greater polish and flexibility.

I've added a slew of of cool features including:

Additional layouts.
Additional themes.
Dynamic Portfolio Page
Fully integrated Glammer Framework (build your own custom pages with the same CSS used in the template).
Full documentation including:
- Styling guide.
- JavaScript function guide.
- Theme template.

I'm not ready to give up Atom

Roland Taylor — Sat, 22 Oct 2022 17:37:01 +0000

Hi y'all! This one's a break from my usual content, but maybe something you'll relate to quite a bit.

You ever have a favourite editor, that you come back to over and over, no matter what? I mean, sure - other editors do it better (ostensibly), but this one does it right!

For me, that editor is none other than Github's Atom. While everyone and their mom's given up on Atom and slid on over to VSCode, I'm having a hard time breaking free.

I mean, don't get me wrong, VSCode is great, and I've used it quite a bit. It's just... Atom is perfect (stop that! I see that eyebrow rising!) - it has the right layout, the right themes, the right packages (sort of). It's just... right.

Now that it's being taken away, and the community seems not to be picking up the slack much, I don't know how to let go.

Do any of you feel the same way?

What's an app that lost support and reached its EOL (End Of Life) but you couldn't give it up?

CSS Funstuff: CSS Spinner

Roland Taylor — Sun, 01 May 2022 03:23:31 +0000

Hey all!

Time for a yet another CSS Funstuff tutorial! This time, we'll be creating an animated spinner with pure HTML+CSS! I have to warn you though, this one is a little longer than usual.

After all, it comes with territory, working with CSS.

Let's get right to it!

1st! Setting Up The Basics:

First, as always, let's style the background and set up some defaults. I use the same style in every project in this series, as you probably know by now.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(35, 35, 35);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

2nd: Building Our Spinner Object in HTML:

We'll need one div for the inside of the spinner, which ironically, is the container for everything else. What can I say? CSS - it's fascinating.

<div class="spinner">
</div>

We'll set up the CSS later, but for now, let's go ahead and add the divs that will make up the rest of the spinner.

<div class="spinner">
   <div class="n-s">
   </div>
   <div class="w-e">
   </div>
   <div class="nw-se">
   </div>
   <div class="sw-ne">
   </div>
</div>

You'll notice I've named the classes:

"n-s"
"w-e"
"nw-se"
"sw-ne"

These names are not chosen at random, and if you have your thinking cap on, you've probably figured out what their names stand for:

"north->south"
"west->east"
"northwest->southeast"
"southwest->northwest"

Essentially, these are "navigation points" for where we'll be placing the pseudo-elements that make up the rest of our spinner. From this point onward, we'll only be tackling CSS.

The CSS Funstuff!

First let's set up a CSS keyframe animation called spin. It's always good to keep in mind how things cascade in CSS. It will give our spinner rotation, as well as set the border of the .spinner class.

@keyframes spin {
  0% {
    border-color: rgba(255, 0, 0, .735);
    transform: rotate(0deg);
  }
  50% {
    border-color: rgba(255, 0, 0, .235);
  }
  100% {
    border-color: rgba(255, 0, 0, .735);
    transform: rotate(360deg);
  }
}

Next, let's style the .spinner class.

.spinner {
  animation: spin 5s linear 0s infinite normal;
  border: 2px solid;
  border-radius: 50%;
  height: 50px;
  position: relative;
  width: 50px;
}

We'll set up another animation next, this time called pulse:

@keyframes pulse {
  0% {
    opacity: .5;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: .5;
    transform: scale(0);
  }
}

Now you may be wondering, where will this one go? After all, we've already animated the .spinner class! Well, that's where the pseudo elements come into play:

.spinner::before,
.spinner::after {
  border-radius: 50%;
  content: '';
  inset: 0;
  position: absolute;
}

.spinner::after {
  animation: pulse 1s linear 0s infinite normal;
  border: 1px solid rgba(255, 0, 0, .35);
}

.spinner::before {
  animation: pulse .735s linear .235s infinite normal;
  border: 5px solid rgba(255, 0, 0, .135);
}

Now, we'll position all the child divs as needed:


.spinner div {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 50%;
  top: 0;
}

This piece won't be visible, but it's essential.

At this point, you should have something that looks like this:

Following this, we're going to build the rest of the spinner animation. It's a bit of work, so be prepared for reading a lot of code!

Setting up the animation:

As before, we'll tackle the animation first:

@keyframes stretch {
  0% {
    opacity: 0;
    transform: scaleY(0);
  }
  50% {
    opacity: 1;
    transform: scaleY(1.5);
  }
  100% {
    opacity: 0;
    transform: scaleY(0);
  }
}

All the moving parts:

Remember the four classes we added earlier, .n-s, .w-e, .sw-ne, and .nw-se? Well, the final step is for us to style them:

.spinner div::before,
.spinner div::after {
  animation: stretch 2s linear 0s infinite;
  animation-fill-mode: both;
  background-color: white;
  content: '';
  height: 15px;
  left: -2.5px;
  position: absolute;
  width: 5px;
  z-index: -1;
}

.spinner div:after {
  top: -50%;
}

.spinner div::before {
  bottom: -50%;
}

.spinner .nw-se,
.spinner .sw-ne,
.spinner .w-e {
  left: 0;
}

.spinner .w-e {
  top: calc(50% - 2.5px);
  transform: rotate(90deg);
}

.spinner .sw-ne {
  transform: rotate(45deg);
}

.spinner .nw-se {
  transform: rotate(-45deg);
}

.spinner .nw-se::before,
.spinner .nw-se::after,
.spinner .sw-ne::before,
.spinner .sw-ne:after {
  left: calc(50% - 2.5px);
  left: calc(50% - 2.5px);
}

.spinner .sw-ne:after {
  animation-delay: .125s;
}

.spinner .w-e:after {
  animation-delay: .25s;
}

.spinner .nw-se:after {
  animation-delay: .35s;
}

.spinner .n-s:before {
  animation-delay: .5s;
}

.spinner .sw-ne:before {
  animation-delay: .65s;
}

.spinner .w-e:before {
  animation-delay: .75s;
}

.spinner .nw-se:before {
  animation-delay: .85s;
}

The Final Product:

When it's all said and done, this is what you should get:

That's all for now! But wait, there's more! Download the source code. I'll soon update the source with a couple fun tweaks, as I often do in this series, so be on the look out!

[Visit my Gumroad page] for(https://rolandixor.gumroad.com) more like this.

CSS Funstuff: C-c-combo Breaker!!!

Roland Taylor — Sun, 03 Apr 2022 01:44:48 +0000

Hi y'all! I'm back with another fun CSS tutorial that will both teach you some CSS skills and show you how to make something awesome!

Before we get started!

For this tutorial, I highly recommend that you familiarize yourself with CSS Combinators if you haven't already. To help you out with that, you can grab the free guide I've put together from my Gumroad page.

Update: You can now play it online!!!

If you'd like to skip to the fun stuff, or if you're just not familiar with CSS OR don't feel like coding...

You can play the game from my website!

Once you're up to speed on that...

Let's dive in!

We always like to set the box-sizing, margin, and padding properties for all our elements, so you can add the following code to your CSS.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

We're also going to be using a single custom property for this tutorial, --bg, which will be used for setting the background colour of the elements in the combo.

:root {
   --bg: rgb(35, 135, 235);
}

Finally in terms of setup, let's set some properties on the body. Some of these are shared with other projects in the series, but the rest of them are specific to the layout we're going to use this time.

For that, let's use the following CSS code:

body {
   align-items: center;
   background-color: rgb(35, 35, 35);
   color: white;
   display: flex;
   flex-flow: column;
   font-family: 'Lato', sans-serif;
   font-size: 1.365em;
   font-weight: 300;
   gap: 15px;
   height: 100vh;
   justify-content: center;
   letter-spacing: .135em;
   width: 100vw;
}

With all this place, you should have a blank canvas to build upon. Remember to link up your CSS to your HTML if you haven't already.

Building our HTML:

There are lot of "moving" parts to this, so get ready to do some typing... or just copy and paste. Yeah, I recommend copying and pasting this one.

The HTML code:

   <body>
      <h1>ComboBreaker</h1>
      <main>
          <input class="combo-0" type="checkbox">
          </input>
          <input class="combo-1" type="checkbox">
          </input>
          <input class="combo-2" type="checkbox">
          </input>
          <input class="combo-1" type="checkbox">
          </input>
          <input class="combo-0" type="checkbox">
          </input>
          <input class="combo-1" type="checkbox">
          </input>
          <input class="combo-2" type="checkbox">
          </input>
       </main>
   </body>

What are we building?

Well... By now, you can probably tell that we're going to be creating some kind of a simple game, and yes... IN CSS!!!

You can add the goal below your <main> element if you'd like:

<p>
   The goal is to try to turn all of the circles
   white. Can you unlock the combo?
</p>

Doing things with style!

Before we get to the logic of the "game", let's add some simple styling to the <main>, <h1> and <p> elements.

main {
  align-items: center;
  display: flex;
  gap: 15px;
  justify-content: center;
}

h1 {
  margin: 2.35vh;
}

p {
  margin: 7.35vh;
}

We'll follow this up by styling the inputs and their associated pseudo-elements:

[class*='combo']::after {
  aspect-ratio: 1/1;
  background-color: var(--bg);
  border-radius: 50%;
  content: '';
  display: block;
  position: absolute;
  inset: -50% 0 0 0;
  transition: all 1s ease-in-out;
  width: 50px;
}

[class*='combo']::before {
  aspect-ratio: 1/1;
  background-color: #ffffff00;
  border: 5px solid transparent;
  outline: 2px solid white;
  border-radius: 50%;
  content: '';
  display: block;
  position: absolute;
  inset: 435% 0 0 17px;
  transition: all 1s ease-in-out;
  width: 10px;
}

[class*='combo']:checked:before {
  aspect-ratio: 1/1;
  background-color: white;
  border: 2px solid transparent;
  outline: 2px solid white;
  border-radius: 50%;
  content: '';
  display: block;
  position: absolute;
  transition: all 1s ease-in-out;
}

input {
  aspect-ratio: 1/1;
  position: relative;
  width: 50px;
}

This should give you something like this:

Building The Logic

Now, here's where things get tricky, and I have to admit, this took me a while to figure it all out.

But, it's well worth it because it demonstrates that CSS is more than just a "descriptive language", it's got logic and interaction, too. For the sake of simplicity, I've kept things down to a single line and just three possible combinations, but you can make this as complex as you'd like, and it should still work.

You just have to understand how CSS combinators work.

The code:

For each of our inputs, we'll modify the variable we added at the beginning. It will set the background color for each one.

Thanks to the power of CSS combinators, there's only one combination that will turn all of the circles white (unless you find another)!

.combo-0:checked,
.combo-0:checked + .combo-1,
.combo-1:checked ~ .combo-0,
.combo-0:checked ~ .combo-2:checked,
.combo-2 + .combo-1:checked,
.combo-0:checked + .combo-1 {
  --bg: white;
}

.combo-0:checked ~ .combo-2 {
  --bg: rgb(35, 135, 35);
}

.combo-1:checked + .combo-2 {
  --bg: blue;
}

.combo-1,
.combo-1:checked + .combo-2:checked,
.combo-2:checked {
  --bg: red;
}

All together, that should give you something like this:

...and that's it!

The "game" is complete! But it's no fun if you don't play it! Can you crack the combo? Try it! I've got a video of me playing around with it below. Note though: I won't give away the solution!

You can grab the full project from my Gumroad Page. I'll be releasing an updated version in the near future, so keep an eye out!

Creating custom cursors for your website

Roland Taylor — Thu, 17 Feb 2022 16:12:46 +0000

Hi!

In this quick tutorial, I'll show you how you can create custom cursors with just images and a few lines of CSS code.

Screenshot:

The Cursors:

We need at least one custom cursor image. You can literally use any image in a format the browser supports. For example, I've used the SVG format.

I've got three images:

default.svg
pointer.svg
text.svg

These will replace the following states:

Default.
Pointer.
Text.

The HTML code:

For this example, I have chosen three places to use my custom cursors:

The body:
A heading:
A button:

In the HTML code, you can add the following:

   <body>
      <h1>CSS Custom Cursor Demo<h1>
      <button>Custom Button</button>
   </body>

NB: The text within the tags can be literally anything.

The CSS Code:

The CSS code is where everything really happens. We only need one property for each element, as follows:

body {
   cursor: url('default.svg'), auto;
}

h1 {
   cursor: url('text.svg'), text;
}

button {
   cursor: url('pointer.svg'), pointer;
}

And that's it! Check out a recorded demo of this tutorial in action below:

Quick Design Tips Part 1 - Grouping Your Interests

Roland Taylor — Tue, 15 Feb 2022 20:42:07 +0000

Hi! In this series, I'm going to run through quick design tips that can help improve your designs!

Though this series is specifically geared toward front-end web designers, these tips translate to other platforms (such as desktop & mobile) as well.

Disclaimer:

The tips I'm sharing here are based on observation and experience, and this post is not meant to provide "expert" (ie: 'research'-based) opinion. I will, however, try to explain the "why" behind each point, rather than just giving a dry, empty "Do this; don't do that" perspective.

Now, without any further pre-ramble, let's jump in!

Visually group common interests

This can be done in a number of ways - even if you choose to think outside the box, a "box" should still exist, somewhere.

When grouping buttons - round the outliers

If you're not aiming for a UI with sharp edges everywhere (which can be cool, too!), it's really nice if you use selective rounding to indicate connectedness.

For example, let's say you have a group of related buttons:

There are multiple ways you could style them, depending on the overall style of your site. However, if you're looking to establish a style that both stands out, and has a hidden benefit of making your related content "feel" more "connected", here's a simple tip:

Round the corners of the first and last elements in the row

You can visually indicate that these separate buttons are still grouped as one by rounding the corners of the first and last buttons in the row. Doing so provides a visual indicator that these elements are not only grouped for convenience, but context.

Of course, it goes without saying that there will always be exceptions to the "rule". For instance, you may be working with an interface where everything uses sharp lines as a "signature" of that design. However, where applicable, this simple design tip can give your designs a subtle, but effective edge.

Whelp! That's all for now! I hope you found this quick design tip to be useful! If you did, feel free to give this article a like/bookmark or share! I also love to hear your feedback, so don't be afraid to respond in the comments.

Aesthetic - Your Next Landing Page

Roland Taylor — Sat, 05 Feb 2022 02:03:39 +0000

Looking to spruce up your website, or building the next big deal? Well, I've got your landing page!

Good looks are everything!

Well, to me at least. I like to say that good form = good function, and vice versa. I reject the notion that in order for something look good, it has to sacrifice functionality. At the same time, I don't believe that minimalism has to translate into sacrificing aesthetic appeal.

Unique Visuals

Glass UI

Enjoy the beauty of a glassy UI, bringing an appealing and modern look to your page. No need to poke around trying to figure it out for yourself!

Radial Menu

Aesthetic is unlike most of the templates you may find floating around the net. Featuring a stunning radial menu (with up to 8 items), Aesthetic will encourage returning visitors to develop a quick muscle memory for your website, which is useful for sites with high traffic.

Photography takes centre stage

Rather than relying on a bland backdrop, go all the way in and include eye-catching photography!

Easy customization

As I stated earlier, I believe that good form and good function go hand in hand, so I've extended that to the code itself. Aesthetic is easy to customize without having to dig through lines of code. Simply tweak the variables at the top of the CSS file, and you can reskin the entire page in seconds.

Interested? Grab it here:

Now that you've seen what Aesthetic can do, why not check it out? You can grab it from my Gumroad page, or check it out live on my website.

You can also check out some free resources on my Gumroad Page, such as the full source code for CSS Funstuff Series of projects!