Welcome to Plume CSS, a lightweight and highly themeable CSS Micro-Framework. Plume is meant to be the lowest CSS layer on your app. You should use Plume if you are working on a small to medium application, if you feel that you dont 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. Plume was inspired by projects such as Skeleton, Milligram, MiniCss and Material, encompassing some practices found in all of them. On this page you'll find features overview, an Interactive Theme Editor, visual reference and a list of utilities and custom properties. Here are some of Plume's coolest characteristics:

📦   Pretty small

The complete source has ~5kb gzipped, or 28 kb inflated. You can also load only the modules that you'll need, as buttons.css or form.css elements, for example.

⛔   No JavaScript

Completly javascript free. Is just pure and simple CSS. You can test it by disabling javascript and reloading this page. The theme editor wont be available, but Plume will be intact.

🔌   Plug and play

Load the lib, load your custom theme if you have one, and you're ready to go. Plume is already normalized. You can start to build your application with a minimal and solid CSS foundation.

🖌   Highly themeable

70+ CSS custom properties available. Easily customizable from CSS or SCSS. Theme constructor with immediate visual feedback available (Button on the top left corner).

∈   Completely scoped

Styles are applied under the plume class, and all classes and properties are prefixed. You can add plume on an existent project with no harm and no side effects on the outer scope.

💎   Decoupled themes

Custom themes are just a set of CSS Custom properties. You can load them dynamically or scope them to have multiple themes on the same application - even same page (change this page theme on the bottom left button).

📐   No grid system

You can easily build any kind of layout with CSS Flexbox and/or Grid. If you still prefer to use a grid system, there are a plenty of them available out there (bootstrap grid, flexbox grid, etc), you choose.

🎯   Bare Elements Styled

Despite a large set of utilities, Plume applies the style on bare elements. Classes and custom attributes are used to alter the default styles and behavior. Since Plume its scoped, this wont harm your page.

Getting Started

Install with NPM (Also available with Yarn)

npm install plume-css

Then in your app

import 'plume-css'

Or download the package and add the css on your document:

<link rel="stylesheet" href="plume-css/lib/plume-all.css">

Attention: Plume is completely scoped! So, after loading it, you must add the plume class on a wrapper div to apply local styles or on the body tag to apply the styles on the entire page. You can also add the pm-container class to have a containerized wrapper. For advanced loading and usage, please check the Github Documentation.

<div class="plume"> ... </div>

This is a Heading

This is a Heading

This is a Heading

This is a Heading

This is a Heading

This is a Heading

Creativity is just connecting things. When you ask creative people how they did something, they feel a little guilty because they didn't really do it, they just saw something. It seemed obvious to them after a while. That's because they were able to connect experiences they've had and synthesize new things.

This is an example of mark tag in a paragraph, you can use them along text elements, and this is a kbd example alt + f4 representing a keyboard combination

Deserunt eiusmod ex proident ullamco magna occaecat proident pariatur. Est aute culpa nostrud ut deserunt esse occaecat nostrud esse nisi quis excepteur dolore. Occaecat quis sit cillum est ut ipsum elit deserunt. Esse cupidatat ex eu nostrud sit Lorem elit labore laboris dolor elit.

Nulla Lorem sint voluptate consequat sint. Proident laborum id irure Lorem dolore reprehenderit sint et Lorem ut sint laborum non. Culpa labore qui nisi enim laborum cillum elit minim nostrud aute. Eiusmod velit aute nulla do minim fugiat irure commodo excepteur. Amet culpa pariatur labore culpa ad et reprehenderit tempor in exercitation tempor mollit deserunt.

This is a link followed by another link

¹ When use the pm-btn-text button type, you can use the text color utilities to change the color.
² For rounded buttons, you can use the pm-btn-round modifier with any button from buttons family

• List Example A
• List Example B
• List Example C
• List Example D
• List Example E

1. List Example A
2. List Example B
3. List Example C
4. List Example D
5. List Example E

Male writers:

Ernest Hemingway

Carlos Drummond

Female writers:

Virgínia Woolf

Hilda Hilst

This is a text on a pre tag
another paragraph
and another

@function cssvar($name, $prefix: pm) {
  @return var(--#{$prefix}-#{$name});
}

This is an inline code function () {} used in a paragraph.

Plume has a large set of utilities that helps you to alter elements styles and behavior. They are pretty useful to avoid code repetition. You can check the complete utilities list on the link below:

Plume has a very flexible CSS Custom Properties collection that you can override to change its default appearance. You can use the Theme Editor by clicking on the Top left Button of this page or do it directly on your styles. To start experimenting, open the theme editor and try to change the App Surface Color to #000000 and the App Font Color to #ffffff on the editor, and voilá: you have a Dark Theme. Click on the link below to know more about: