Getting started

Install Fajny CSS

Via CDN

Just copy this in the <head> of your HTML:

<link rel="stylesheet" href="https://unpkg.com/fajny-css/css/fajny.min.css" />

And this at the end of the <body>:

<script src="https://unpkg.com/fajny-css/lib/fajny.min.js"></script>

Via npm

Open your site’s folder in a terminal and run this command:

$ npm i fajny-css

Locally

Download the folder and add it to your site. Then, 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/fajny.min.css" />

And this at the end of the <body>:

<script src="/path/to/lib/fajny.min.js"></script>

To compile automatically SCSS files to CSS, we’re using Live Sass Compiler VSCode extension.

All set, you can start to code!

Customise Fajny CSS

Set your variables

You can change your fonts and colors directly in the variables in the file /scss/_variables.scss.

Fonts

By default Fajny CSS uses Lato. You can change this by changing the Google Fonts link at the beginning of scss/fajny.scss file, and in the scss/_variables.scss file.

Colors

You can edit the file /scss/_variables.scss and change the corresponding values. Find a nice color palette generator here: https://coolors.co/.

Choose your components

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";

JavaScript

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, and import the compiled JS from the /lib folder.