# phaast-css-documentation

> Light, elegant and robust css framework.

Latest version **1.0.0** (published 2020-06-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install phaast-css-documentation
pnpm add phaast-css-documentation
yarn add phaast-css-documentation
bun add phaast-css-documentation
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2020-06-17 |
| First published | 2020-06-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 16.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | v1siond |

## Links

- npm: https://www.npmjs.com/package/phaast-css-documentation
- npm.io page: https://npm.io/package/phaast-css-documentation

## Recent versions

- 1.0.0 (latest) — 2020-06-17

## README

# Description
Light, elegant and robust css framework.

## Installation

### Using NPM
`npm install css-phaast`

or

`yarn add css-phaast`

### Using git
`git clone https://gitlab.com/daring-bit-assembly/saas/phaast-css-npm.git`


## Documentation

### Components
Check [Phaast Ui!](https://daring-bit-assembly.gitlab.io/saas/phaast-css/)

### Package Structure
The package contains two main files (`phaast.css`, `phaast.js`) and three folders
 - phaast.js
 - phaast.css
 - css
 - scss
 - js

Inside the css folder you'll find css files for every component.

Inside the scss folder you'll find a `phaast.scss` file which imports all the files necesary to run the framework correctly, you will find the individual files for each component (`components` folder) and the individual files for the modifiers of each component (`tools` folder), there's a `global-tool` file located inside the `tools` folder which controls all the utilities.

Finally, the JS folder have individual modules that you can import or reference.


## Usage


### Basic Style
You have three ways to use the styles from css-phaast, the easiest one is to use the CDN

```html
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/css-phaast@<version>/phaast.css">
    ...
  </head>
```

#### Adding it to the head
Having the package locally

```html
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="<your-css-folder>/phaast.css">
    ...
  </head>
```

Or if you follow the NPM route or are using SASS

#### Using SASS
```css
  @import '~phaast/scss/phaast';
```

### Interactive Functionalities
If you want all the functionalities, you'll need the JS side, which controls the dropdowns, tabs, alerts, menus and some other functionalities, again, you have three ways of doing this, the easiest route is to use the CDN

```html
  <body>
      ...
      <script type="text/javascript" src="https://unpkg.com/css-phaast@<version>/phaast.js"></script>
  </body>
```

#### Adding a script
If you have the package locally

```html
  <body>
      ...
      <script type="text/javascript" src="<your-js-folder>/phaast.js"></script>
  </body>
```

#### Importing it directly into a JS file
If you went the NPM route

```js
  import 'css-phaast/phaast'
```

### Using individual Components
You can use individual components without having to import the whole package.

#### Using CDN
```html
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="https://unpkg.com/css-phaast@<version>/css/alerts.css">
    ...
  </head>
```

#### Local Files
```html
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="<your-css-folder>/alerts.css">
    ...
  </head>
```

Some components need an extra JS file to manage interactivity, these are: dropdowns, alerts, tabs and menus. We can get the needed files in three different ways:

Using CDN
```html
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/css-phaast@<version>/js/phaast.alerts.js">
```

Local Files
```html
  <link rel="stylesheet" type="text/css" href="<your-js-folder>/phaast.alerts.js">
```

Sass import using NPM package
```css
  // Importing css
  @import '~phaast/css/avatar.css';

  // Importing sass file
  @import '~phaast/scss/individual-components/avatar';
```

JS import using NPM package
```js
  import 'css-phaast/js/phaast.dropdown.js'
```

#### Webpack
Import these files in your entry js file

```js
import 'css-phaast/scss/phaast.scss'
import 'css-phaast/phaast'
```

## Tools

This project is powered by [nanogen](https://doug2k1.github.io/nanogen/)

## Development
 - We manage the app through two commands `yarn start` and `yarn build`, the first command compiles the files and copy them to the public folder with local routes. The second command does the same, but applies production routes, make sure to always run it before pushing.

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