| title | category |
|---|---|
Getting started |
getting-started |
Just copy this in the <head> of your HTML:
{% include demo-code.html language="html" id="css_cdn" content=site.css_cdn %}
And this at the end of the <body>:
{% include demo-code.html language="html" id="js_cdn" content=site.js_cdn %}
Open your site's folder in a terminal and run this command:
{% include demo-code.html language="shell" id="npm" content=site.npm %}
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:
{% include demo-code.html language="html" id="css_local" content=site.css_local %}
And this at the end of the <body>:
{% include demo-code.html language="html" id="js_local" content=site.js_local %}
To compile automatically SCSS files to CSS, we're using Live Sass Compiler{:target="_blank" rel="noreferrer noopener"} VSCode extension.
All set, you can start to code!
You can change your fonts and colors directly in the variables in the file /scss/_variables.scss.
By default Fajny CSS uses Lato. You can change this by changing the Google Fonts{:target="_blank" rel="noreferrer noopener"} link at the beginning of scss/fajny.scss file, and in the scss/_variables.scss file.
You can edit the file /scss/_variables.scss and change the corresponding values. Find a nice color palette generator here: https://coolors.co/{:target="_blank" rel="noreferrer noopener"}.
If you do not want to use some components and save some space you can just comment them in the file /scss/fajny.scss:
{% include demo-code.html language="scss" id="components" content='// @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";' %}
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{:target="_blank" rel="noreferrer noopener"}. When making changes to JS files, run npm run build to compile your JS, and import the compiled JS from the /lib folder.