FOIL UI is a CSS based Framework Library that contains the most Animations, Transitions, and the most Luxurious User Interface Alternative for the Web.
- FOIL-UI-Framework-Library
- How to run and use FOIL-UI
- FOIL-Text-Header
- FOIL-Navigation-Bar
- FOIL-Font-Styles
- FOIL-button
- FOIL-button-small
- FOIL-Layout
- FOIL-Layout Rounded
- FOIL-Highlight
- FOIL-Font-Size
- Tips and Tricks
- Credits
There is a easy, and efficient way to use and run FOIL-UI.
-
You can use the CDN version of the FOIL-UI. This is recommended, because it always will update itself, so you will have the amazing and unique new features of FOIL-UI. This is hosted on the jsdeliver platform. [https://www.jsdelivr.com/]
https://cdn.jsdelivr.net/gh/senalbulumulle/FOIL-UI-Framework-Library/FOIL-UI.css
Text Header is a DIV class that gives the font sizes similar to the Common HTML Tags like:
<h1> <h2> <h3> <h4> <h5> <h6>To Get Started, call the div class called .FOIL-Text-Header.
<div class = "FOIL-Text-Header-1">This is the Text</div><div class = "FOIL-Text-Header-2">This is the Text</div><div class = "FOIL-Text-Header-3">This is the Text</div><div class = "FOIL-Text-Header-4">This is the Text</div><div class = "FOIL-Text-Header-5">This is the Text</div><div class = "FOIL-Text-Header-6">This is the Text</div>Navigation Bar is a DIV class that allows you to put links on top of a web interface or web page.
To Get Started, call this div class:
<div class = "FOIL-Navigation-Bar"></div>NOTE: By default, the div class "FOIL-Navigation-Bar" is transparent.
Here's how you can get the colors on the Navigation Bars in FOIL UI.
<div class = "FOIL-Navigation-Bar color-is-red>"></div><div class = "FOIL-Navigation-Bar color-is-black>"></div><div class = "FOIL-Navigation-Bar color-is-yellow"></div> <div class = "FOIL-Navigation-Bar color-is-green"></div><div class = "FOIL-Navigation-Bar color-is-blue"></div>FOIL-Font-Styles is a DIV class that displays the different typefaces.
To Get Started, call this div class:
<div class = "FOIL-Font-Styles"></div>Here's how you can get the font styles on FOIL UI.
<div class = "FOIL-Font-Styles--Impact>"></div><div class = "FOIL-Font-Styles--Georgia>"></div><div class = "FOIL-Font-Styles--Verdana"></div> <div class = "FOIL-Font-Styles--times"></div><div class = "FOIL-Font-Styles--sans-serif"></div>Note: By Default the Times Font will be displayed as output without the FOIL-Font-Styles div class.
FOIL-button is a DIV class that displays buttons that can do anything with.
To Get Started, call this div class:
<div class = "FOIL-button"></div>Here's how you can get the colors of the buttons on FOIL UI.
<div class = "FOIL-button color-is-red"></div><div class = "FOIL-button color-is-black"></div><div class = "FOIL-button color-is-yellow"></div> <div class = "FOIL-button color-is-green"></div><div class = "FOIL-button color-is-blue"></div><div class = "FOIL-button color-is-orange"></div><div class = "FOIL-button color-is-pink"></div><div class = "FOIL-button color-is-purple"></div>FOIL-button-small is a DIV class that displays small buttons that can do anything with.
To Get Started, call this div class:
<div class = "FOIL-button-small"></div>Here's how you can get the colors of the small buttons on FOIL UI.
<div class = "FOIL-button-small color-is-red"></div><div class = "FOIL-button-small color-is-black"></div><div class = "FOIL-button-small color-is-yellow"></div> <div class = "FOIL-button-small color-is-green"></div><div class = "FOIL-button-small color-is-blue"></div><div class = "FOIL-button-small color-is-orange"></div><div class = "FOIL-button-small color-is-pink"></div><div class = "FOIL-button-small color-is-purple"></div>FOIL-Layout is a DIV class that displays layouts that can do anything with.
To Get Started, call this div class:
<div class = "FOIL-Layout"></div>Here's how you can get the colors of the layouts on FOIL UI.
<div class = "FOIL-Layout color-is-red"></div><div class = "FOIL-Layout color-is-black"></div><div class = "FOIL-Layout color-is-yellow"></div> <div class = "FOIL-Layout color-is-green"></div><div class = "FOIL-Layout color-is-blue"></div><div class = "FOIL-Layout color-is-orange"></div>FOIL-Layout Rounded is a DIV class that is related to FOIL-Layout that displays rounded layouts that you can do anything with.
To Get Started, call this div class:
<div class = "FOIL-Layout Rounded"></div>Here's how you can get the colors of the rounded layouts on FOIL UI.
<div class = "FOIL-Layout Rounded color-is-red"></div><div class = "FOIL-Layout Rounded color-is-black"></div><div class = "FOIL-Layout Rounded color-is-yellow"></div> <div class = "FOIL-Layout Rounded color-is-green"></div><div class = "FOIL-Layout Rounded color-is-blue"></div><div class = "FOIL-Layout Rounded color-is-orange"></div>FOIL-Highlight is a DIV class that displays a highlight color that can do anything with.
To Get Started, call this div class:
<div class = "FOIL-Highlight"></div>Here's how you can get the colors of the highlights on FOIL UI.
<div class = "FOIL-Highlight color-is-red"></div><div class = "FOIL-Highlight color-is-yellow"></div><div class = "FOIL-Highlight color-is-green"></div> Here's how you can get the text colors of the highlights on FOIL UI.
<div class = "FOIL-Highlight text-color-is-white"></div><div class = "FOIL-Highlight text-color-is-black"></div>Note: After you call the "FOIL-Highlight color-is-" div class, call the "FOIL-Highlight text-color-is" div class.
<div class = "FOIL-Highlight color-is-orange">
<div class="FOIL-Hightlight text-color-is-black">
<FOIL-Font-Size-10>Hello world</FOIL-Font-Size-10>
</div>
</div>FOIL-Font-Size is a unique feature that alters the <html> tags. This allows an ability to increase text size without using the div class or using regular tags like <h1> <h2> <h3> <h4> <h5> <h6> or <p> .
Here is an Example using <FOIL-Font-Size>:
<html>
<head>
<link rel="stylesheet" href="FOIL-UI.css" type="text/css">
</head>
<body>
<div class="FOIL-Font-Styles--sans-serif">
<div class="FOIL-Layout color-is-black">
<!-- Using the FOIL-Font-Size Feature -->
<FOIL-Font-Size-30> This is my web app </FOIL-Font-Size-30>
</div>
</div>
</body>
</html>To modify the FOIL-UI components easily, without having to change the entire source code, you can do this. Just follow the steps here.
-
Create a new file in your project directory called
custom.css -
Include the FOIL-UI.css file like this:
/* Using FOIL-UI Locally in your project */
@import url('FOIL-UI.css');
/* Using FOIL-UI using the CDN */
@import url('https://cdn.jsdelivr.net/gh/senalbulumulle/FOIL-UI-Framework-Library/FOIL-UI.css');