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/flexbox-bar-graphs/index.html | 302 ++++++++++++++++++++++++++++++++++++ 1 file changed, 302 insertions(+) create mode 100644 build/flexbox-bar-graphs/index.html (limited to 'build/flexbox-bar-graphs/index.html') diff --git a/build/flexbox-bar-graphs/index.html b/build/flexbox-bar-graphs/index.html new file mode 100644 index 0000000..6a368dd --- /dev/null +++ b/build/flexbox-bar-graphs/index.html @@ -0,0 +1,302 @@ + + + + + + + + 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