Documentation here: https://fajny-css.github.io/
Copy this in the <head>
of your HTML:
<link rel="stylesheet" href="https://unpkg.com/fajny-css/css/fajny.min.css" />
And add this at the end of the <body>
:
<script src="https://unpkg.com/fajny-css/lib/fajny.min.js"></script>
Open your app's folder in a terminal and run:
npm i fajny-css-v3
Just copy this in the <head>
of your HTML, and change /path/to/css
by the real path to the file:
<link rel="stylesheet" href="/path/to/css/fajny.min.css" />
And this at the end of the body:
<script src="/path/to/lib/fajny.min.js"></script>
Then, add this to your package.json
:
{
...rest
"scripts": {
"build": "babel js -d lib"
},
"devDependencies": {
"@babel/cli": "^7.17.10",
"@babel/core": "^7.18.0",
"@types/node": "^17.0.31",
"@babel/preset-env": "^7.18.0"
}
}
Now, run npm install
.
You're all set!
We're using Live Sass Compiler to compile SCSS to CSS automatically.
Since we are using the most updated JavaScript, we need to compile JS files to have them as compatible as possible. Here, we're using Babel. When making changes to JS files, run npm run build
to compile your JS.
You can change your fonts and colors directly in the variables in the file scss/_variables.scss
.
By default Fajny CSS uses Lato for fonts. You can change this by changing the Google Fonts link at the beginning of the file scss/fajny.scss
, and then in the variables file.
You can edit the file scss/_variables.scss
and change the corresponding Hex values. You can find a nice color palette generator here: https://coolors.co/.
If you do not want to use some components and save some space you can just comment them in the file scss/fajny.scss
:
// @import "components/icon";
// @import "components/hr";
// @import "components/image";
// @import "components/video";
// @import "components/avatar";
@import "components/loader";
@import "components/button";
@import "components/button-icon";
@import "components/tag";
@import "components/badge";
@import "components/tooltip";
@import "components/input";
@import "components/input-image";
@import "components/input-check";
@import "components/form";
@import "components/card";
@import "components/cover";