css-phaast
v0.18.3
Published
Light, elegant and robust css framework.
Downloads
728
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 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
<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'