#
Fx UI

Installation

Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS. 

<link rel="stylesheet" href="https://fx-ui.netlify.app/componentsMain.css">

This is the <script> file that will provide all the logic required by the components. 

<script src="https://fx-ui.netlify.app/ComponentsStyles/logic.js"></script>

Accordian

Displays collapsible content panels for presenting information in a limited amount of space.

Example

Click the accordions below to expand/collapse the accordion content.

Section 1

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam sit reiciendis, ipsam quaerat, aperiam perspiciatis ad ullam architecto impedit natus illo nostrum molestias voluptas earum a voluptatibus fugiat fuga facere!

Section 2

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam sit reiciendis, ipsam quaerat, aperiam perspiciatis ad ullam architecto impedit natus illo nostrum molestias voluptas earum a voluptatibus fugiat fuga facere!

Section 3

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam sit reiciendis, ipsam quaerat, aperiam perspiciatis ad ullam architecto impedit natus illo nostrum molestias voluptas earum a voluptatibus fugiat fuga facere! 

<div class="accordion">
    <div>
        <input type="checkbox" name="example_accordion" id="section1" class="accordionInput">
        <label for="section1" class="accordionLabel">Section 1</label>
        <div class="accordionContent">
            <p>Section 1</p>
            <p>Lorem ipsum dolor sit ...</p>
        </div>
    </div>
</div>

Alerts

Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.

Examples

Alerts are available in 8 types- primary, secondary, success, danger, warning, info, light, dark.

You can use alert by adding the class .alert along with alert type class name (ie. class="alert secondary ")

A simple primary alert!
A simple secondary alert!
A simple success alert!
A simple danger alert!
A simple warning alert!
A simple info alert!
A simple light alert!
A simple dark alert!
<div class="alert alertPrimary">A simple primary alert!</div>
<div class="alert alertSecondary">A simple secondary alert!</div>
<div class="alert alertSuccess">A simple success alert.</div>
<div class="alert alertDanger">A simple danger alert!</div>
<div class="alert alertWarning">A simple warning alert!</div>
<div class="alert alertInfo">A simple info alert.</div>
<div class="alert alertLight">A simple light alert!</div>
<div class="alert alertDark">A simple dark alert!</div>

Badges

Badges can notify you that there are new or unread messages or notifications.

Examples

Badges scale to match the size of the immediate parent element by using relative font sizing.

Example Heading New

Example Heading New

Example Heading New

Example Heading New

Example Heading New
Example Heading New

Example Paragraph New 

<h1>Example Heading <span class="badge badgePrimary">New</span></h1>
<h2>Example Heading <span class="badge badgeSecondary">New</span></h2>
<h3>Example Heading <span class="badge badgePrimary">New</span></h3>
<h4>Example Heading <span class="badge badgeSecondary">New</span></h4>
<h5>Example Heading <span class="badge badgePrimary">New</span></h5>
<h6>Example Heading <span class="badge badgeSecondary">New</span></h6>
<p>Example Paragraph<span class="badge badgePrimary badgePill">New</span></p>
<ul class="breadcrumbs">
        <li class="breadcrumbsItem">
            <a href="#" class="breadcrumbsLink">Home</a>
        </li>
        <li class="breadcrumbsItem">About</li>
        </ul>
        <ul class="breadcrumbs">
        <li class="breadcrumbsItem">
            <a href="#" class="breadcrumbsLink">Home</a>
        </li>
        <li class="breadcrumbsItem">
            <a href="#" class="breadcrumbsLink">About</a>
        </li>
        <li class="breadcrumbsItem">Profile</li>
    </ul>
</div>
<ul class="breadcrumbs">
        <li class="breadcrumbsItem arrow">
            <a href="#" class="breadcrumbsLink">Home</a>
        </li>
        <li class="breadcrumbsItem arrow">About</li>
    </ul>
    <ul class="breadcrumbs">
        <li class="breadcrumbsItem arrow">
            <a href="#" class="breadcrumbsLink">Home</a>
        </li>
        <li class="breadcrumbsItem arrow">
            <a href="#" class="breadcrumbsLink">About</a>
        </li>
        <li class="breadcrumbsItem arrow">Profile</li>
    </ul>
</div>

Buttons

Displays collapsible content panels for presenting information in a limited amount of space.

Primary Buttons

There are five variations of a standard sized primary buttons i.e Solid, Outlined, Text, TextIcon. 

<button class="btn btnSolidPrimary">Primary Solid</button>
<button class="btn btnOutlinedPrimary">Primary Outlined</button>
<button class="btnText btnTextPrimary">Primary Text</button>
<button class="btn btnIconPrimary"><span class="btnIcon"><i class="fas fa-bookmark"></i></span></button>
<button class="btn btnTextIconPrimary"><span class="btnIcon"><i class="far fa-bookmark"></i></span>Bookmark</button>

Secondary Buttons

There are five variations of a standard sized secondary buttons also i.e Solid, Outlined, Text, TextIcon. 

<button class="btn btnSolidSecondary">Secondary Solid</button>
<button class="btn btnOutlinedSecondary">Secondary Outlined</button>
<button class="btnText btnTextSecondary">Secondary Text</button>
<button class="btn btnIconSecondary"><span class="btnIcon"><i class="fas fa-bookmark"></i></span></button>
<button class="btn btnTextIconSecondary"><span class="btnIcon"><i class="far fa-bookmark"></i></span>Bookmark</button>

Carousel

A slideshow component for cycling through elements-images or slides of text-like a carousel. 

<div id="slider">
  <input type="radio" name="slider" id="s1">
  <input type="radio" name="slider" id="s2">
  <input type="radio" name="slider" id="s3" checked>
  <input type="radio" name="slider" id="s4">
  <input type="radio" name="slider" id="s5">
  <label for="s1" id="slide1">
    <img src="./assets/img1.jpg" height="100%" width="100%">
  </label>
  <label for="s2" id="slide2">
    <img src="./assets/img2.jpg" height="100%" width="100%">
  </label>
  <label for="s3" id="slide3">
    <img src="./assets/img3.jpg" height="100%" width="100%">
  </label>
  <label for="s4" id="slide4">
    <img src="./assets/img4.jpg" height="100%" width="100%">
  </label>
  <label for="s5" id="slide5">
    <img src="./assets/img5.jpg" height="100%" width="100%">
  </label>
</div>

Dropdowns

Dropdowns are toggleable, contextual overlays for displaying lists of links and more.They’re toggled by hovering.

Example

Home
Link Cart Bill
Tutorials
HTML CSS JS
About
Head Body Foot 
<div class="dropContainer">
    <div class="dropItem">
        Home
        <div class="dropItemGroup">
            <a href="#" class="dropItem">Home1</a>
            <a href="#" class="dropItem">Home2</a>
            <a href="#" class="dropItem">Home3</a>
        </div>
    </div>
    <div class="dropItem">
        Video Tutorials
        <div class="dropItemGroup">
            <a href="#" class="dropItem">HTML</a>
            <a href="#" class="dropItem">CSS</a>
            <a href="#" class="dropItem">JavaScript</a>
        </div>
    </div>
    <div class="dropItem">
        About
        <div class="dropItemGroup">
            <a href="#" class="dropItem">About1</a>
            <a href="#" class="dropItem">About2</a>
            <a href="#" class="dropItem">About3</a>
        </div>
    </div>
</div>

Modal

Modals are built with HTML, CSS, and JavaScript. They’re positioned over everything else in the document. Modals use position: fixed , so whenever possible, place your modal HTML in a top-level position to avoid potential interference from other elements.

Example

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the center of the page.

Delete record(s)?

You'll lose your record(s) after this action. We can't recover them once you delete.

Are you sure you want to permanently delete them?

<button class="btn btnSolidPrimary modalTrigger">Show Modal</button>
<div class="modalBg">
  <div class="modal">
    <div class="modalHead">
      <h1>Delete record(s)?</h1>
      <button class="btn btnIcon crossBtn"><i class="fas fa-times"></i></button>
    </div>
    <div class="modalContent">
      <p>You'll lose your record(s) after this action. We can't recover them once you delete.</p>
      <p>Are you sure you want to permanently delete them?</p>
    </div>
    <div class="modalFooter">
      <button class="btn btnOutlinedSecondary modalBtn cancelBtn">Cancel</button>
      <button class="btn btnSolidPrimary modalBtn deleteBtn success">Delete</button>
    </div>

  </div>
</div>

Toasts

Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.

Examples

We have three variants of Toasts-success, warning and danger . 

<button class="success">Show success</button>
<button class="warning">Show warning</button>
<button class="error">Show error</button>

Form Control

Forms are the standard way to receive user inputted data. Text fields allow user input. .formControl can apply to all the required styling to the "div" element.

Example

A simple input filed have three variations- normal, readonly and disabled . 

<form id="form" class="form">
  <div class="formControl">
    <label for="username">Username</label>
    <input type="text" placeholder="Normal Input" />
  </div>
  <div class="formControl">
    <label for="username">Username</label>
    <input type="text" placeholder="Readonly" readonly />
  </div>
  <div class="formControl">
    <label for="username">Username</label>
    <input type="text" placeholder="Disabled" disabled />
  </div>
</form>

File Input

Example

This is a customised file input/upload button.

No file(s) selected 
<div class="fileInputContainer ">
  <input class="fileInput" type="file" name="myFile[]" id="myFile" multiple>
  <button class="btn btnSolidPrimary fileInputButton" type="button">Choose File(s)</button>
  <span class="fileInputLabel "></span>
</div>

Select

Select allows user input through specified options.

Example

<select class="select">
  <option disabled selected>Phone</option>
  <option value="Samsung">Samsung</option>
  <option value="Nokia">Nokia</option>
  <option value="Apple">Apple</option>
  <option value="Honor">Honor</option>
</select>

DataList

Datalists allow you to create a group of option elements that can be accessed (and autocompleted) from within an input element.

Example

<div class="formControl">
  <label for="myColor">Enter a color:</label>
  <input type="text" name="myColor" id="myColor" list="colorList">
  <datalist id="colorList">
    <option value="#FF0000">Red</option>
    <option value="#008000">Green</option>
    <option value="#FF00FF">Fuchsia</option>
    <option value="#008080">Teal</option>
  </datalist>
</div>

Check and Radios

Radios

Radio Buttons are used when the user must make only one selection out of a group of items.

Example

These radio buttons are customised according to our theme

<div class="radioContainer">
  <input type="radio" class="radioInput" value="Option1" id="meRadio1" name="meRadio">
  <label for="meRadio1" class="radioLabel">Option1</label>

  <input type="radio" class="radioInput" value="Option2" id="meRadio2" name="meRadio">
  <label for="meRadio2" class="radioLabel">Option2</label>

  <input type="radio" class="radioInput" value="Option3" id="meRadio3" name="meRadio">
  <label for="meRadio3" class="radioLabel">Option3</label>
</div>

Toggle Checkbox

Use checkboxes when looking for yes or no answers.

<label class="toggle" for="myToggle">
  <input class="toggleInput" name="" type="checkbox" id="myToggle">
  <div class="toggleFill"></div>
</label>

Range

Add a range slider for values with a wide range. This one is set to be a number between 0 and 100.

20

<div class="slider">
    <input type="range" min="0" max="100" value="20" oninput="rangeValue.innerText = this.value">
    <p id="rangeValue">20</p>
  </div>
</div>

Form Validation

Provide valuable, actionable feedback to your users with HTML5 form validation

Example

Create Account

Error message
Error message
Error message
Error message 
<div class="formContainer">
  <div class="formHeader">
    <h2>Create Account</h2>
  </div>
  <form id="form" class="form">
    <div class="formControl">
      <label for="username">Username</label>
      <input type="text" placeholder="youteee280" id="username" />
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error message</small>
    </div>
    <div class="formControl">
      <label for="username">Email</label>
      <input type="email" placeholder="a@florin-pop.com" id="email" />
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error message</small>
    </div>
    <div class="formControl">
      <label for="username">Password</label>
      <input type="password" placeholder="Password" id="password" />
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error message</small>
    </div>
    <div class="formControl">
      <label for="username">Re-type Password</label>
      <input type="password" placeholder="Password two" id="password2" />
      <i class="fas fa-check-circle"></i>
      <i class="fas fa-exclamation-circle"></i>
      <small>Error message</small>
    </div>
    <button class="btn btnSolid btnSolidPrimary formButton">Submit</button>
  </form>
</div>

Typography

We provide some basic styling on header tags. In the example, you can see the the 6 header tags' different sizes.

Sizes

Example Heading1
Example Heading2
Example Heading3
Example Heading3
Example Heading5
Example Heading6
Example Paragraph
<h1>Example Heading1</h1>
<h2>Example Heading2</h2>
<h3>Example Heading3</h3>
<h4>Example Heading4</h4>
<h5>Example Heading5</h5>
<h6>Example Heading6</h6>
<p>Example Paragraph</p>

<div class="h1">Example Heading1</div>
<div class="h2">Example Heading2</div>
<div class="h3">Example Heading3</div>
<div class="h4">Example Heading3</div>
<div class="h5">Example Heading5</div>
<div class="h6">Example Heading6</div>
<div class="p">Example Paragraph</div>

Weights

You can use the classes to apply differernt font-weights to you text.

Example Heading1
Example Heading1
Example Heading1
Example Heading1
Example Heading1
Example Heading1
Example Heading1
Example Heading1
<div class="h1 typeBolder">Example Heading1</div>
<div class="h1 typeBold">Example Heading1</div>
<div class="h1 typeBoltLite">Example Heading1</div>
<div class="h1 typeRegularBolder">Example Heading1</div>
<div class="h1 typeRegularBold">Example Heading1</div>
<div class="h1 typeRegular">Example Heading1</div>
<div class="h1 typeThin">Example Heading1</div>
<div class="h1 typeThinner">Example Heading1</div>