# pragma-css

> A pragmatic CSS framework to facilitate the creation of custom UI and style systems.

Latest version **0.7.8** (published 2019-12-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install pragma-css
pnpm add pragma-css
yarn add pragma-css
bun add pragma-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.7.8 |
| Published | 2019-12-17 |
| First published | 2018-08-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 1.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alexander Reiswich |
| Maintainers | alexander_reiswich |

## Links

- npm: https://www.npmjs.com/package/pragma-css
- Repository: https://github.com/AlexanderReiswich/pragma-css
- Homepage: https://alexanderreiswich.github.io/
- Issues: https://github.com/AlexanderReiswich/pragma-css/issues
- npm.io page: https://npm.io/package/pragma-css

## Recent versions

- 0.7.8 (latest) — 2019-12-17
- 0.7.7 — 2019-07-31
- 0.7.62 — 2019-07-11
- 0.7.61 — 2019-06-13
- 0.7.5 — 2019-05-10
- 0.7.4 — 2019-04-28
- 0.7.3 — 2019-04-28
- 0.7.2 — 2019-03-22
- 0.7.1 — 2019-03-17
- 0.7.0 — 2019-03-05
- 0.6.9 — 2019-02-09
- 0.6.8 — 2019-02-01
- 0.6.7 — 2019-02-01
- 0.6.6 — 2019-01-14
- 0.6.5 — 2019-01-13
- … 20 more at https://npm.io/package/pragma-css/versions

## README

# PragmaCSS

<br>

> A pragmatic CSS framework to facilitate the creation of custom UI and style systems.

<br>

**Official documentation:** [https://alexanderreiswich.github.io/](https://alexanderreiswich.github.io/)

<br>

PragmaCSS is an **opinionated, practically oriented CSS library**. It combines the components-focused approach that we
know and love from "traditional" CSS frameworks like [bootstrap](https://getbootstrap.com/) or
[materialize](https://materializecss.com) with concepts from utility CSS libraries like [tachyons](https://tachyons.io/)
or [tailwind](https://tailwindcss.com/); Unifying them in a sane way while aiming for a sensible balance between
simplicity and feature-richness.

PragmaCSS is quite light-weight as it focuses on providing the most essential features, which include a
shallow **HTML reset**, a **grid system** with gap-control, **UI classes** for buttons, forms and
various other elements, as well as plenty of **utility classes** for colors, typography, alignment,
responsiveness, animation and much more. No JavaScript functionality is included, it's just CSS.

PragmaCSS is built with [Stylus](http://stylus-lang.com), a very elegant, powerful and unrestrictive CSS
preprocessor. Stylus variables are used to configure all variable style attributes from a central file,
thus enabling you to effortlessly **customize** the entire style to your specific projects design needs.

PragmaCSS is separated into multiple stylus files. Each file serves a specific purpose, and the loading order
is important:

#### global.styl
This file is purely a collection of Stylus variables. By default, it's filled with sensible defaults,
but in your project, you should duplicate it and then customize it to your particular needs.
This file should only contain variable declarations and no actual CSS.

#### base.styl
This stylesheet resets and normalizes the look of basic HTML elements and sets reasonable defaults based on
the global configuration. It also contains classes for common UI elements such as buttons and form inputs.
It's important to load this file before utilities.styl so that you can override it with the utility classes.

#### custom.styl
This is an example file for your own custom stylesheet. It should be loaded after base.styl and before utilities.styl.
This way you can easily override all base styles and then still use utility classes to customize your own classes
from the HTML.

#### utilities.styl
This file contains all the generic, single-purpose utility classes that you'll use to style your pages
from within the HTML.

### Install it via NPM

```bash
npm install pragma-css
```

### Usage

Note: Your project needs to have [Stylus](http://stylus-lang.com) installed.

Simply import the stylus files inside your stylus index file:

```stylus
@import '~pragma-css/src/global.styl'
@import '~pragma-css/src/base.styl'
@import '~pragma-css/src/utilities.styl'
```

Alternatively, you can add it to your build process by loading the module in your project:

```javascript
import PragmaCSS from 'pragma-css'
```

And then adding the stylus files via their file paths:

```javascript
PragmaCSS.pathTo('global')
PragmaCSS.pathTo('base')
PragmaCSS.pathTo('utilities')
```

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