Posts with tag css

Always use flex-wrap: wrap on flex containers

I spent a bit of time this morning make some improvements to sqlite.directory, and I found myself needing to make a number of fixes around the mobile responsiveness of the UI. So, I thought I would take a moment to catalog a few common patterns and tips I have found useful when working with responsive design. This first tip was one that I found myself using quite a bit today.

Slideover Bootstrap Modals

Sometimes we don’t want a modal floating in the center of the viewport; sometimes, we want a full-height modal that slides into frame. Luckily, we can write a bit of CSS to extend the Bootstrap modal component to support slideover modals.

Building Pure CSS Trees (part 5)

After the first 4 parts of our series, we have some flexible (S)CSS that will render nested lists as trees. It can render horizontal trees, vertical trees, trees going from top-to-bottom or bottom-to-top, left-to-right or right-to-left , and even bracket-style centered trees.

Building Pure CSS Trees (part 4)

The last we left our pure-CSS tree component, it could render both horizontally oriented as well as vertically oriented as well as the inverse direction for either. With each orientation now capable of being rendered in either direction, might we be able to build a tree component that could put the root node in the center of the graph and have half of the descendant graph render to left and have to the right (for the horizontal orientation) or half to the top and half to the bottom (for the vertical orientation)?

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.