Adventures in dropping CSS frameworks

Published in

CodeX

3 min readNov 2, 2021

I’ve become a fan of Jason Knight’s rants against frameworks. Frameworks become prisons that pretend to save you time, but wind up taking more time and coding to overcome their limitations while making refactoring far more difficult.

I’ve written some previous examples on how to write a PWA without frameworks. Yet my organization’s biggest enterprise app, used by people in 22 countries to analyze and display hundreds of thousands of records of data, was written using Pure.css, perhaps the most minimalist of frameworks.

This app was born twenty years ago in ASP, then Tomcat/JSP, then PHP using CakePHP on Apache, then onto the Google Cloud using Bootstrap back when it required jQuery, and then on to Pure.

The Web and these frameworks evolve, often requiring refactoring existing code just to use the latest version. CakePHP v3 was not compatible with v2. Bootstrap 4 was not compatible with Bootstrap 3, and they all seemed to require !important statements in the css to do any styling.

Actually, they seemed to need MORE CSS than without the framework! I’ve taken to starting projects first with NO CSS and then adding it to taste, trying to achieve things without establishing CSS classes by simply styling HTML5 tags.

And then Mr. Knight throws down the gauntlet by railing against Pure.

OK. Challenge accepted. First, I simply removed the lines which loaded two Pure CSS files. I was rather astonished to see how little they were adding — basically just some prettier styling for things like buttons, inputs and tables (but needing dozens of CSS class references in the HTML). And most importantly, the navigation bar and columns.

Remi Goyard pubished a great example of a drop-down navigation bar requiring no <div> or CSS classes.

Columns are really easy now with CSS flexbox. To avoid needing to remove all the zillions of classes used by the Pure grid, I simply added by own CSS for the initializing class pure-g to establish a flex container under the same old name, or alternatively under the more logical “row.” I could not, however, figure out how to do this without a class as I need the <section> tag to work differently.

.pure-g, .row {
  display:flex; 
  flex-flow: row wrap; 
  justify-content: space-around;
}

For a row of forms, I wanted them flush left, which I could do via:

form {flex-grow:1;}

The other thing I REALLY wanted to get rid of was jquery, which I needed for DataTables (which also required quite a bit of extra CSS). DataTables is a lovely jquery plugin, but only including it in pages that need it means those pages require a different set of lines in <head>. That is annoying, as I’d like to just have one method to set up a page.

Fortunately, there is Simple DataTables written in vanilla javascript, which can be launched with two simple script lines in the body after outputting the tables, and no additional CSS:

<script src="https://cdn.jsdelivr.net/npm/simple-datatables@latest"></script><script>const table = new simpleDatatables.DataTable("table")</script>

That did require adding the class “table” to every table, but that only had to be done once in the method that writes tables.

The next to go is Font Awesome, as Unicode can handle nearly all the icons I use it for, via:

function icon($name="print") {
  $icons=[
  "delete"=>"&#128465;",
  "download"=>"&#128229;",
  "edit"=>"&#9999;",
  "line-chart"=>"&#128200;",
  "pie-chart"=>"&#9685";
  "plus"=>"&#10133;",
  "plus-circle"=>"&#8853;",
  "print"=>"&#128424;",
  "undo"=>"&#8634;",
  "upload"=>"&#11014;"];
  return $icons[$name];
}

Adventures in dropping CSS frameworks

Written by John Coonrod