FernosaCSS

KO | EN

gitlite — search

#javascript #typescript #android #machine-learning #rust #linux #docker #macos #nodejs #java #windows #awesome #cli #pytorch

(★ 13)

CSS UI and utility framework to build modern and responsive components

FernosaCSS Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

<a href="#">
 <img 
 src="https://user-images.githubusercontent.com/69644334/155681126-348b4471-51b6-4888-b28e-956af7dc2b46.svg"
 alt="Gray shape shifter" height="80"
 />
 </a>

<h1 align="center">Fernosa</h1>

Flexible CSS Framework Packed With Responsive Components And Utility
Join Our Discord For Help: https://discord.gg/9VgwJetEvG
Documentation: Soon (Currently Available On Discord)
 Note: This library is still under development so most of features might not work yet

# 👀 Why Fernosa?

<ul>
 <li>Fernosa is an open-source CSS library under development.</li>
 <li>It is customizable to the brink, allowing you to change the colours according to your colour palette, and based on that, the components will be generated.</li>
 <li>You can also make the most of the utility classes we provide to change the components to what you find suitable.</li>
 <li>It comes packed with beautiful and completely responsive components that can be used in your commercial and personal projects.</li>
 <li>Fernosa also gives you the freedom to use a lot of CSS effects that we provide, like neon, hover effects, etc.</li>
 <li>If you want to speed up your work without wasting hours customising components, Fernosa is for you.</li>
 </ul>

# 🤔 How TO Use It?

You can use Fernosa by linking the following stylesheet in your html `<head>` tag.

```html
<link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/gh/Fernosa/FernosaCSS@main/FernosaCSS/fernosa.css"
/>
```

Join our discord if you encounter any issues. our team will gladly assist you.

# 🙄 How to customize colors?

1.  Download the Visual studio code extension: [Live Sass Compiler](https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass)

2.  Download the SCSS file: [Here](https://github.com/Fernosa/FernosaCSS/blob/main/Fernosa/fernosa.scss)

3. In the scss file, simply edit the theme colors variables to suit your color theme
 
 
<img src="https://i.imgur.com/lj3U0Xc.png" />

# Example:
 
Try adding color gold and set it's color value to #FFD700
 
 
<img src="https://i.imgur.com/tWYbNNh.png"/>
 
 
Once you setup the color palette, click on watch sass which appears on the bottom.
<img src="https://user-images.githubusercontent.com/69644334/154828106-453da218-27e1-4f4a-9b74-459a9c7ddb34.png" />

Final step

Link the compiled css the sass compiler generates, to the html!
 
 
```html
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
```
 
Link this fontawesome CDN inside the head 
 
 
 
Also link the javascript CDN 
 
```html
 <script src="https://cdn.jsdelivr.net/gh/Fernosa/FernosaCSS@main/scripts/fernosa.js"></script>
```
 
That's it!
 
Wollah! It will start working, Happy Hacking!

FernosaCSS

FernosaCSS Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

FernosaCSS

FernosaCSS Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README