From 3f6a9546ec13063d0d5bdf21d30a93d3e8aa6050 Mon Sep 17 00:00:00 2001 From: Bradley Taunt Date: Tue, 2 Jul 2024 14:22:21 -0400 Subject: Rebuild changes based off latest barf --- build/posts/flexbox-bar-graphs/index.html | 302 ------------------------------ 1 file changed, 302 deletions(-) delete mode 100644 build/posts/flexbox-bar-graphs/index.html (limited to 'build/posts/flexbox-bar-graphs') diff --git a/build/posts/flexbox-bar-graphs/index.html b/build/posts/flexbox-bar-graphs/index.html deleted file mode 100644 index 6a368dd..0000000 --- a/build/posts/flexbox-bar-graphs/index.html +++ /dev/null @@ -1,302 +0,0 @@ - - - - - - - - Pure CSS Bar Graphs with Graceful Mobile Fallbacks - - - - - - - -
-

Pure CSS Bar Graphs with Graceful Mobile Fallbacks

-

2020-12-08

-

I recently published a new open source project, Flexbox Bar Graphs, and wanted to share a simple breakdown of how it was built. It isn’t anything mind-blowing, but I like the idea of placing bar graphs in a web page with zero Javascript.

-

So in the end, this is what our bar graphs will look like on desktop:

-

And this is how it will look on smaller devices:

-

Let’s get into the details!

-

The HTML

-

The main “secret” of this project is that our graphs are constructed out of HTML tables. Now before you freak out - this is perfectly fine and works in our favor quite well.

-
    -
  1. If the user has JS disabled –> they will still see our graphs
    2. -
  2. If the user has CSS disabled –> they will see a standard data table set
    3. -
-

All bases are covered!

-
<!-- Using a basic table with our custom data-id -->
-<table data-id="flexbox-bar-graph">
-    <caption>Web Performance Results</caption>
-    <thead>
-        <tr>
-            <th>Test Performed</th>
-            <th>Before</th>
-            <th>After</th>
-            <th>Difference</th>
-        </tr>
-    </thead>
-    <tbody>
-        <tr>
-            <th>Initial Load Time</th>
-            <td>
-                <!--
-                    WTF are these CSS variables?
-                    See the CSS section below
-                -->
-                <span style="--data-set:4.7/5;"></span>
-                <p>4.7</p>
-            </td>
-            <td>
-                <span style="--data-set:2.7/5;"></span>
-                <p>2.7</p>
-            </td>
-            <td>
-                <span style="--data-set:2/5;"></span>
-                <p>2</p>
-            </td>
-        </tr>
-    </tbody>
-</table>
-
-

Nothing crazy is happening here - just your standard HTML table structure. The one main thing to notice is the --data-set CSS variable placed inline on each data point. This will be important for our CSS to configure the individual bar graphs properly.

-

The CSS

-

This might look overwhelming if I just dumped the whole CSS file in one big code block, so instead I’m going to break them down into two parts:

-
    -
  1. Baseline styling (mobile)
    2. -
  2. Desktop styling
    3. -
-

Baseline

-

Here we target just our table elements with the data-id of flexbox-bar-graph. This allows us to avoid worrying about adding classes or IDs and also avoids conflicts with other non-graph styled tables in our projects.

-

The base :root element holds all of our bar graph colors. Change these as you see fit!

-
/* Bar Graph color variables */
-:root {
-    --bar-color-1: #357EC7;
-    --bar-color-2: #E42217;
-    --bar-color-3: #4CC417;
-    --bar-color-4: #7D0541;
-    --bar-color-5: #FFD801;
-}
-
-[data-id="flexbox-bar-graph"] {
-    border-collapse: collapse;
-    margin: 4rem 0 6rem;
-    width: 100%;
-}
-[data-id="flexbox-bar-graph"] caption {
-    text-align: left;
-}
-[data-id="flexbox-bar-graph"] thead th {
-    text-align: right;
-}
-[data-id="flexbox-bar-graph"] thead th:nth-child(1),
-[data-id="flexbox-bar-graph"] tbody th {
-    text-align: left;
-}
-[data-id="flexbox-bar-graph"] tbody th {
-    font-weight: normal;
-    font-style: italic;
-}
-[data-id="flexbox-bar-graph"] tbody td {
-    text-align: right;
-}
-[data-id="flexbox-bar-graph"] tbody td p {
-    margin: 0;
-}
-
-

Desktop

-

Now we set your “visual” bar graphs to show at a set width (in this example it is 1000px and above). That way the “default” styling can target the mobile device screen sizes.

- -

Bonus Styling

-

In the Flexbox Bar Graph repo, I’ve also included the ability to display these bar graphs horizontally, like so:

-

The change in CSS is actually quite simple to pull this off - you just need to include the data-layout attribute on the table itself.

-
[data-layout="horizontal"] tbody {
-    min-height: auto;
-}
-
-[data-layout="horizontal"] tbody tr {
-    flex-direction: column;
-    padding: 0 40px;
-}
-[data-layout="horizontal"] tbody tr th {
-    width: calc(100% - 80px);
-}
-
-[data-layout="horizontal"] tbody tr th {
-    text-align: left;
-    top: calc(100% + 20px);
-}
-
-[data-layout="horizontal"] tbody tr td {
-    flex-direction: row;
-    height: auto;
-    justify-content: start;
-    margin: 10px 0;
-}
-
-[data-layout="horizontal"] tbody tr td span {
-    height: 20px;
-    width: calc(var(--data-set) * 100%);
-}
-
-[data-layout="horizontal"] tbody tr td p {
-    margin-left: 10px;
-}
-
-

That’s All Folks!

-

That just about sums things up. Feel free to check out the Github repo itself, open any issues you find or fork it for your own!

- - \ No newline at end of file -- cgit v1.2.3-54-g00ecf