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

  <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

  <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

  @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

  <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

  <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

  import 'css-phaast/phaast'

Using individual Components

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

Using CDN

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

Local Files

  <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

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

Local Files

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

Sass

  // Importing css
  @import '~phaast/css/avatar.css';

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

JS

  import 'css-phaast/js/phaast.dropdown.js'

Webpack

Import these files in your entry js file

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

FAQs

What is css-phaast?

Is css-phaast popular?

Is css-phaast well maintained?

Package last updated on 06 Oct 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

css-phaast

Description

Installation

Using NPM

Using git

Documentation

Components

Package Structure

Usage

Basic Style

Adding it to the head

Using SASS

Interactive Functionalities

Adding a script

Importing it directly into a JS file

Using individual Components

Using CDN

Local Files

Using CDN

Local Files

Sass

JS

Webpack

Related posts

Oracle Drags Its Feet in the JavaScript Trademark Dispute

Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional