Fajny CSS Framework

Usage no npm install needed!

<script type="module">
  import fajnyCss from 'https://cdn.skypack.dev/fajny-css';


Getting Started


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

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

And this at the end of the <body>: <script src="https://unpkg.com/fajny-css/js/script.min.js"></script>.


Open the folder in your terminal and run this command npm i fajny-css.


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">
<link rel="stylesheet" href="/path/to/css/fajny-icons.min.css">

And this at the end of the <body>: <script src="/path/to/js/script.min.js"></script>.

You can find a nice tutorial to compile your code automatically with Grunt here.

All set, you can start to code!

How to use Fajny CSS

Customise Fajny CSS

Set your variables

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


By default Fajny CSS uses Nunito Sans Black for the titles and Mulish for the body. You can change this by changing the Google Fonts link in the head of your HTML file, and 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/.

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/buttons";
//@import "components/avatar";
@import "components/breadcrumbs";
@import "components/badges";
@import "components/cards";
@import "components/image-container";
@import "components/video"
@import "components/parallax";
@import "components/forms";
@import "components/alerts";