Light, elegant and robust css framework.
npm install css-phaast
or
yarn add css-phaast
git clone https://gitlab.com/daring-bit-assembly/saas/phaast-css-npm.git
Check Phaast CSS!
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.
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>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
@import '~phaast/scss/phaast';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>If you have the package locally
<body>
...
<script type="text/javascript" src="<your-js-folder>/phaast.js"></script>
</body>If you went the NPM route
import 'css-phaast/phaast'You can use individual components without having to import the whole package.
<head>
...
<link rel="stylesheet" type="text/css" href="https://unpkg.com/css-phaast@<version>/css/alerts.css">
...
</head> <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:
<script type="text/javascript" src="https://unpkg.com/css-phaast@<version>/phaast.alerts.js"></script> <script type="text/javascript" src="<your-js-folder>/phaast.alerts.js"></script> // Importing css
@import '~phaast/css/avatar.css';
// Importing sass file
@import '~phaast/scss/individual-components/avatar'; import 'css-phaast/js/phaast.dropdown.js'Import these files in your entry js file
import 'css-phaast/scss/phaast.scss'
import 'css-phaast/phaast'