# 0-plume-css

> A tiny framework for sass/css artisans

Latest version **0.0.1** (published 2021-06-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install 0-plume-css
pnpm add 0-plume-css
yarn add 0-plume-css
bun add 0-plume-css
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2021-06-15 |
| First published | 2021-06-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | okyn |
| Maintainers | okn |
| Keywords | css, sass, framework, responsive, plume |

## Links

- npm: https://www.npmjs.com/package/0-plume-css
- npm.io page: https://npm.io/package/0-plume-css

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2021-06-15

## README

# Plume CSS - a tiny framework for css artisans

## Introduction

The goal of this library is to get a base that include a grid system, some helpers and the maximum of compatibilities with old scool browsers.

## Quick start

* Include from jsDelivr CDN
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/0kyn/plume-css/dist/css/plume.min.css">
```

## Development
* Clone the repository
```sh
git clone https://github.com/0kyn/plume-css.git my-project 
```

```sh
cd my-project 
```

* Watching for changes
```sh
npm run dev 
```

## Production

Build assets for production  
```sh
npm run prod 
```

## Docs
Plume CSS is mobile first, breakpoints are defined as Bootstrap ones :
```css
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { ... }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { ... }

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { ... }

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { ... }
```

### Grid system (12 columns) works in the same way

```html
<div class="plume-grid">
  <div class="row">
    <div class="col-6">50%</div>
    <div class="col-6">50%</div>
  </div>

  <div class="row">
    <div class="col-3">25%</div>
    <!-- 75% -->
    <div class="col-9">
      <div class="row">
        <div class="col-6">50% of 75%</div>
        <div class="col-6">50% of 75%</div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col-12 col-xl-4">mobile->100% - laptop(>1200px)->25%</div>
    <div class="col-12 col-xl-4">mobile->100% - laptop(>1200px)->25%</div>
    <div class="col-12 col-xl-4">mobile->100% - laptop(>1200px)->25%</div>
  </div>
</div>
```
> This grid system is based on `float` that makes it compatible with old browsers.

### Helpers
- center a single column in a row
```html
<div class="row">
  <div class="col-4 col-center">~33.3% centered column</div>
</div>
```

- hide a column at a specific breakpoint
```html
<div class="row">
  <div class="col-12 hide-xl">column hidden on laptop(>1200px)</div>
</div>
```

- show a column only for a specific breakpoint
```html
<div class="row">
  <div class="col-12 show-xl">column only visible on laptop(>1200px)</div>
</div>
```

- miscellaneous  
You'll find various helpers in `src/scss/base/helpers.scss`

---
_Source: https://npm.io/package/0-plume-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._