npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

plume-css

v1.0.13

Published

A lightweight and highly themeable CSS Micro-Framework

Downloads

214

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

felipperegaziofelipperegazio

Keywords

csssassmicrostylethemeplumethemeableframeworkplume-css

Readme

Plume CSS

Welcome to Plume CSS, a lightweight and highly themeable CSS Micro-Framework. No JS, no Dependencies. This is the Plume's repository and technical documentation. If you want to know exactly what Plume is, what it does and its main characteristics, please visit: https://felippe-regazio.github.io/plume-css/. For usage and technical information, please follow the README.

Compatibility

Full compatibility with the following Browsers:

  • Google Chrome 80.0.3987.132
  • Mozilla Firefox 76.0.1
  • Opera 68.0.3618.125
  • Safari 11.1.2

Installing

With NPM (Also available with Yarn)

npm install plume-css

Then on your app

import 'plume-css'

Browser Instalation

Clone or download this repository, or download the dist package on the github page.
Now just add it on your page:

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

Tested in a browser thats isn't here? Send a PR with the results. Found an issue? Send a PR describing it :)

CDN

You can also use Plume via CDN using a link tag:

<link href="https://unpkg.com/[email protected]/lib/plume-all.css" rel="stylesheet" rel="preload" as="style" media="all" defer>

Or via CSS:

@import "https://unpkg.com/[email protected]/lib/plume-all.css";

Getting Started

Since Plume is scoped, after installing it, you must add the plume class on a wrapper div to apply local styles, or add it on the body tag to style the entire page. You can also add the pm-container class to have a containerized wrapper.

  <!-- apply styles to entire document -->
  <body class="plume"> ... </body>  
  
  <!-- wrapper with plume local style -->
  <div class="plume"> ... </div>

Now you're ready to go

Loading by Modules

When you load plume-all.css or import 'plume-all', you bring the entire Plume lib to your app. Thats ok since the complete lib has only 5kb gziped. But you may want to load only some modules, as Buttons, or Form styles for example. You just need to load the plume-core module, then load the modules you want:

import 'plume-css/lib/plume-core'

or

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

Now you can load the modules that you want. The following modules are available

  • typography
  • buttons
  • form
  • tables
  • lists
  • pre-code
  • effects
  • utilities

So, if you want to add only typography and buttons, for example, you can do:

import 'plume-css/lib/plume-core';
import 'plume-css/lib/typography';
import 'plume-css/lib/buttons';

Or

<link rel="stylesheet" href="lib/plume-core.css">
<link rel="stylesheet" href="lib/typography.css">
<link rel="stylesheet" href="lib/buttons.css">

This method is specially useful if you want to import Plume styles on your SCSS projects.

@import 'plume-css/lib/plume-core.css';
@import 'plume-css/lib/typography.css';

h1 {
  // this will override plume's H1 default style
}

HTML & Body Normalizing

Plume is already normalized, but since its scoped, it cant access the HMTL and Body directly. So, to completely normalize the entire APP you must also normalize the HTML and Body. To do it, just use this snippet:

html {
  margin: 0;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

Utilities

Plume apply styles on bare components, but there is a large set of functional utilities - classes and data properties - that you can apply on your elements to alter its behavior. You can check the complete list of Utilities on this link: https://felippe-regazio.github.io/plume-css/.

NOTE: Plume is scoped under a main class plume by default, and all the classes and properties are prefixed with pm- by default. This guarantee highly compatibility and Collision Free CSS. If you are interested in change Plume's main class and prefix, please read the Building from Source section of this README.

Theming

Plume is written using a lot of custom properties (70+) that controls important aspects of the default style. Here we assume that you are familiarized with "CSS Custom Properties". You can override these properties to alter default elements style, or to create your own custom Theme. So, a custom theme is nothing more then a set of CSS Custom Properties overriding. You can check the complete Plume's Custom Properties List on the Github Page. You can add a theme by:

  1. Creating and downloading or Theme using the theme editor on Plume's Github Page.

  2. Manually overriding the variables on your code

Building

Starting

npm install

Developing

npm run dev

Building

npm run build

Building Sass & Docs

npm run build-all

Building Docs

The documentation and the Theme Editor is automatically generated. New properties, prefixes and base configuration changes will be automatically updated.

Developing

npm run dev-docs

Building

npm run build-docs

Developing from Sources

Plume has a very simple and solid architecture. You can tune and modify most of its basic aspects in a very simple manner. Its possible to change the main classes, prefixes, and other characteristics. If you want to know how Plume works under the hood, please read the developing.md.