Minimal CSS frameworks for coding demos

On RubyTapas, I occasionally need to demonstrate web application code. I often use little Sinatra apps for this purpose, because it allows me to illustrate a web app programming concept with all the usual features like routing, sessions, and templates without switching between lots of different files.

When I do this, I also like the demo web pages to look modern and attractive. For some reason, default browser HTML styling still looks terrible, so this means turning to a CSS framework.

When I’m preparing a 1-file demo web application, I don’t want to think about asset packaging or selecting modules from an industrial-strength framework like Bootstrap or Foundation. I don’t want to think about whether I also need some JavaScript libraries to make the framework function correctly. I want something that’s just as minimal as Sinatra. Ideally, I should source it as a single CSS file.

Recently, as I was prepping another demo app, I reviewed several “micro CSS frameworks” for this purpose. Then I asked around for suggestions, and took a look over the recommendations I received as well.

Here are some notes. Keep in mind, these are in the context of a very specific and not terribly common use case: an aid to demonstrating web programming techniques. This is not an evaluation of these frameworks from the POV of production use.

This is also from the perspective of a developer, not a designer.

Skeleton: One of the oldest frameworks I’m aware of. Styles are a bit on the “delicate” side, not quite what I look for in a demo. More importantly, it’s a little too minimal. As far as I can tell there are no styles for form field errors or notifications.

Cutestrap: Quite nice looking. I started using this for my last demo app, but then realized that it too was a little more minimal than I was looking for. Like Skeleton, it lacked form error indicators or styles for notifications.

Spectre.css: I was initially pretty enthused about this one. It’s “batteries included”, with rich form styling, “toast”-style notifications, menus, and much more. I like this one because I know I could drop it into any demo app and have styles for any user interaction I might conceivably need to show.

What I don’t like about Spectre is that it requires the kind of markup verbosity I associate with Bootrstrap. For instance, a button might be marked up like so:

<button class="btn btn-primary btn-lg">Button</button>

Paraphrased: “here’s a button which is a button it’s also a primary button and also a large button“.

This kind of repetition is fine in large apps where the HTML is mostly generated, but in an exhibition it slows down typing and distracts from the purpose of the demo.

Bass.css: Billed as a “low-level” CSS toolkit. Looks to be of more interest to designers, with control over a lot of fiddly tweaks I don’t care about.

Kube: This looks pretty feature-complete, although I had to dig into the (copious) docs to realize this. The markup is pretty sane:

<button class="button primary big">Button</button>

I’m going to keep this one on my shortlist. Although, it almost feels too big for my purposes. Unlike most of the frameworks in this line-up, it also includes a JavaScript component. Maybe something to keep in mind for a “real” app.

Pure.css: This one also potentially falls into the “too much” category. In features, that is; it’s quite svelte in terms of download size. And if you don’t need all of it, you can cut down the size even more by selecting modules individually. Thankfully there’s a default single-file download that includes the whole ball of wax.

The website and particularly the layout examples are gorgeous. This CSS framework seems extremely flexible and powerful.

Also, the examples of form styling are delightfully free of framework-imposed boilerplate DIVs. E.g.:

<form class="pure-form pure-form-stacked">
    <fieldset>
        <legend>A Stacked Form</legend>

        <label for="email">Email</label>
        <input id="email" type="email" placeholder="Email">

        <label for="password">Password</label>
        <input id="password" type="password" placeholder="Password">

        <label for="state">State</label>
        <select id="state">
            <option>AL</option>
            <option>CA</option>
            <option>IL</option>
        </select>

        <label for="remember" class="pure-checkbox">
            <input id="remember" type="checkbox"> Remember me
        </label>

        <button type="submit" class="pure-button pure-button-primary">Sign in</button>
    </fieldset>
</form>

Bulma: Batteries-included, lovely to look at, comes all in one file. Also uses some quite understandable composable CSS styles:

<button class="button is-primary is-large">Button</button>

One thing that’s particularly notable about Bulma is that it is the Flexbox-based grid system that seems to make columns and tiles particularly easy to lay out.

The one drawback I’ve seen is that the examples of form styling seem to contain a lot of framework boilerplate:

<label class="label">Name</label>
<p class="control">
  <input class="input" type="text" placeholder="Text input">
</p>
<label class="label">Username</label>
<p class="control has-icon has-icon-right">
  <input class="input is-success" type="text" placeholder="Text input" value="bulma">
  <i class="fa fa-check"></i>
  <span class="help is-success">This username is available</span>
</p>
<label class="label">Email</label>
<p class="control has-icon has-icon-right">
  <input class="input is-danger" type="text" placeholder="Email input" value="hello@">
  <i class="fa fa-warning"></i>
  <span class="help is-danger">This email is invalid</span>
</p>
<label class="label">Subject</label>
<p class="control">
  <span class="select">
    <select>
      <option>Select dropdown</option>
      <option>With options</option>
    </select>
  </span>
</p>
<label class="label">Message</label>
<p class="control">
  <textarea class="textarea" placeholder="Textarea"></textarea>
</p>
<p class="control">
  <label class="checkbox">
    <input type="checkbox">
    Remember me
  </label>
</p>
<p class="control">
  <label class="radio">
    <input type="radio" name="question">
    Yes
  </label>
  <label class="radio">
    <input type="radio" name="question">
    No
  </label>
</p>
<p class="control">
  <button class="button is-primary">Submit</button>
  <button class="button is-link">Cancel</button>
</p>

These are the mini/micro-frameworks I’ve run across. Are there others I should look at?

7 comments

  1. I second the Pure.css suggestion. I started using it in my site (it only had old custom CSS that didn’t care about mobile before) and found it great to work with. However I didn’t take too much time investigating about the alternatives as you did 🙂 I guess most of them are just fine for most peolpe 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *