Exploring CSS: Micro-Frameworks (Plume)

By now, I've spent a LOT of time learning how to effectively use CSS from scratch and I think it's finally time that I stop doing that and allow myself to make my life easier. To do that, I will be doing an "Exploring CSS" Series where I take a look at libraries, pre-processors, frameworks, and the like to find out which I like and can start using going forward.

This is my first entry in the series, and I'll be looking at a micro-framework called Plume. Plume is:

A lightweight and highly themeable CSS Micro-Framework. Plume is meant to be the lowest CSS layer on your app. [Plume is great for] working on a small to medium application, if you feel that you don't need all the larger frameworks' features, or if you just want to code and grow all the style by yourself. Plume offers a solid, highly customizable and extendable start point.

Sounds like a great starting point to me!

What's To Like

Set Up

First of all, Plume is extremely simple and quite quick to get up and running. Just download the library (or install it), add the link to your HTML, and add class=”plume” to the body tag and you’re ready to go. You could also have certain "plumed" containers if you would like since it's scoped in your HTML, hence needing the class="plume" line. In that case, you would just include that in your wrapper element rather than the body tag.

Customization

Next up is customization. My biggest problem with things like Bootstrap is that it creates a sort of cookie-cutter website where nothing really stands out all that much. Plume; however, is all about creating a custom theme, and it's really easy to do (you barely even need to know CSS). Everything you need is on the Plume webpage, that's right - a single page. You just go through a list of supported attributes and customize each one however you like. You can see what it will look like on the page itself as you play with each option. Once you have your theme put together, just click the </> button and copy/paste the content into the top of your CSS file since it’s just a series of CSS variables. Want to make a change later on? Just go to your CSS and change the value for the appropriate variable and watch your whole site change to reflect it!

Another benefit of this variable approach? Since it’s so quick and easy to set up a custom theme, you can have a whole bunch of different themes on your site! Maybe you want different types of containers to have different coloring and font, or maybe you want your user to be able to choose between different theming options. It's easy to do, you just need a simple JavaScript script to change the relevant variables in your CSS :root and you're good to go. In fact, Plume has its own theme picker on the site to demonstrate this concept. I think adding that element of personal customization is pretty cool, and using Plume, it’s no sweat.

Components

Then there's actually building your site. Plume proved to be excellent for quickly building out basic site structure and linking it all to a home-made, consistent theme. It comes with some basic styled components, like various types of form inputs and buttons that will automatically sync up with your custom theme thanks to everything linking back to those CSS variables. It also sets up your basic container styling (sizing, alignment, spacing, etc.) for you, so no more wrestling to get your content centered.

All of the components are added purely by adding a class to your HTML elements. There is nothing else that you need to do. So say you want an element with everything centered except for the paragraph text. All you need to do is write some HTML:

<div class="pm-container pm-ground pm-text-center">
  <h2>Example</h2>
  <p class="pm-text-left">Some Text</p>
  <p class="pm-text-left">Some Text</p>
  <button class="pm-btn-success">Push Me!</button>
</div>

and you'll get this:

Responsive

And finally, Plume components are responsive out of the box, which is a huge win. It doesn't do a whole lot to help you with your site structure (grids, flexbox, layout templates, etc.), but that's not what these micro-frameworks are for, at least in my mind. You own setting up your site's structure, then you can sit back and let Plume make it look good!

What's Not To Like

Limitations

The options are pretty limited; however, with only about a dozen component families included. Using only Plume, I was able to get my site’s basic layout looking pretty darn good within an hour, but there is still a lot of individual element customization that I would likely want to add in from this point. This is, of course, by design. Remember the creator states "Plume offers a solid, highly customizable and extendable start point." So just know that you are still going to need to do some custom CSS work after you've "plumed up" your site.

Verdict

As this is the first one I'm evaluating, it's hard to say at this time. But just going on Plume's own merits and not comparing to anything else, I love it! I would absolutely use this as my starting point when I'm staring at a blank page. This framework takes a HUGE chunk of the tedious stuff off my plate and makes for a great consistent template for my site to be built upon.

Here's my simple testing layout using nothing but Plume:

And of course, here's the code:

// HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">   
    <link rel="stylesheet" href="plume-css/lib/plume-all.css">   <!-- Add Plume as a Stylesheet -->
    <link rel="stylesheet" href="style.css">
  </head>
  <body class="plume">  <!-- Apply Plume to full site -->
    <div class="pm-container pm-surface">

      <article class="pm-text-center pm-container pm-ground">
        <figure class="pm-text-center"> 
            <h3 class="pm-font-secondary">Project 1</h3>
            <img src="http://placekitten.com/g/600/300" alt="Visual Store"/>
            <figcaption>
                <p class="pm-font-primary">This is the first project in the list.</p>
            </figcaption>
        </figure>
        <p class="pm-font-primary pm-text-left"><strong>Main Features:</strong> Some cool things are in this.</p>
        <p class="pm-font-primary pm-text-left"><strong>Backend Techs:</strong> Here's what I used to build the API.</p>
        <p class="pm-font-primary pm-text-left"><strong>Frontend Techs:</strong> Here's how the site was built.  Make sure to include Plume!</p>
        <button class="pm-btn-gradient">Cool Button</button>
        <button class="pm-btn-success">Good News!</button>
        <button class="pm-btn-error">Bad News!</button>
      </article>

      <article class="pm-text-center pm-container pm-ground">
        <figure class="pm-text-center"> 
            <h3 class="pm-font-secondary">Project 2</h3>
            <img src="http://mrmrs.github.io/photos/whale.jpg" alt="Visual Store"/>
            <figcaption>
                <p class="pm-font-primary">This is Number 2.</p>
            </figcaption>
        </figure>
        <p class="pm-font-primary pm-text-left"><strong>Main Features:</strong> Some cool things are in this.</p>
        <p class="pm-font-primary pm-text-left"><strong>Backend Techs:</strong> Here's what I used to build the API.</p>
        <p class="pm-font-primary pm-text-left"><strong>Frontend Techs:</strong> Here's how the site was built.  Make sure to include Plume!</p>
        <button class="pm-btn-gradient">Cool Button</button>
        <button class="pm-btn-success">Good News!</button>
        <button class="pm-btn-error">Bad News!</button>
      </article>

      <article class="pm-text-center pm-container pm-ground">
        <figure class="pm-text-center"> 
            <h3 class="pm-font-secondary">Project 3</h3>
            <img src="http://mrmrs.github.io/photos/cpu.jpg" alt="Visual Store"/>
            <figcaption>
                <p class="pm-font-primary">Third entry is the charm.</p>
            </figcaption>
        </figure>
        <p class="pm-font-primary pm-text-left"><strong>Main Features:</strong> Some cool things are in this.</p>
        <p class="pm-font-primary pm-text-left"><strong>Backend Techs:</strong> Here's what I used to build the API.</p>
        <p class="pm-font-primary pm-text-left"><strong>Frontend Techs:</strong> Here's how the site was built.  Make sure to include Plume!</p>
        <button class="pm-btn-gradient">Cool Button</button>
        <button class="pm-btn-success">Good News!</button>
        <button class="pm-btn-error">Bad News!</button>
      </article>

    </div>
  </body>
</html>

// CSS

:root {   /* downloaded from Plume Site */
  --pm-primary-color: #309AFD;
  --pm-secondary-color: #00004b;
  --pm-app-surface-color: #F1F2F3;
  --pm-app-ground-color: #fff;
  --pm-mark-border-radius: 0px;
  --pm-button-border-radius: 0px;
  --pm-input-border-radius: 0px;
  --pm-input-border-width: 1px;
  --pm-pre-code-border-radius: 0px;
  --pm-app-text-color: #848586;
  --pm-app-base-font-size: 19px;
  --pm-app-line-height: 1.2rem;
  --pm-app-container-padding: 1rem 2rem;
  --pm-app-container-max-width: 900px;
}

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

body {
  margin: 0;
}