Posts with tag css

Building Pure CSS Trees (part 3)

The last we left our pure-CSS tree component, it could render both horizontally oriented as well as vertically oriented; however, each orientation only worked in one direction—the horizontal tree only rendered left-to-right and the vertical tree only rendered top-to-bottom. What if we wanted to render trees in the inverse orientations?

Maintaining Binary State in CSS

I really like CSS, and I think of it as a programming language. It does not, however, have many of the utilities of other programming languages. As a result, many programmers quickly turn to Javascript whenever they need client-side interactivity. For whatever reason, this is a habit that I never picked up; in fact, I picked up the complete opposite habit—whenever I need some particular client-side interactivity, I first try to implement it in pure CSS.

As you might imagine, this doesn’t always work out. It has, however, led me to some pure CSS solutions that I quite like.¹ In this post, I want to outline one technique that I use time and time again to make more pure CSS solutions possible.

Building Pure CSS Trees (part 2)

In our last post, we built a simple pure-CSS tree from a nested list. That tree was horizontally oriented, but what if we wanted a vertically oriented tree? Today, let’s build that.

Building Pure CSS Trees (part 1)

Have you ever wanted to represent some hierarchical data on a webpage as a tree? In this series of posts, we are going to build a CSS-only solution for rendering hierarchical trees.

Introducing: Togglicons

Togglicons offers a single SCSS mixin for bringing customizable toggling icons into your web application.