You've somehow found the unofficial FN web components library. Good for you.


This is all about web components and simplicity. Where possible and extra functionality is kept to a minimum. You are encrouaged download each component individually and customise it to your specific needs as you see fit.

This means NO NPM INSTALL. Why?

When you install a library via NPM what happens? It gets thrown into the node_modules folder and you import it into your code from there. Which means your options for modifications are limited. You cannot modify what is inside node_modules because for one you usually do not publish that folder and two, what happens when that library updates? All your modified code is gone.

This encrouages developers to tell designers that they need to only include in designs what the developers chosen library can do, limiting both functional and visual design.

This library of web components is specifically designed to be modified and altered. Download each component.js file and rewrite the CSS, alter the JavaScript and HTML to do what your specific design calls for.

Repo: https://github.com/nasanu/cv

① Download


    Click the download icon at the top of each page

    OR 
    
    Download directly from the repo linked above.

② Import



    import "idk where you saved it/component.js"

③ Use


  
  <fn-component type="text" name="fName" placeholder="stuff"></fn-component>

Basically that is it. See each component for specific instructions.

What you want actual details?... K. Fine.

This is a web components library. This means that when you import a component its not like importing say a React Component. Here is the breakdown Barney style:

① Download

This is simply pulling the library from some random location on the internet and placing it in the file structure of your own codebase. Thats it.

② Import

Here the import is actaully running the JS associated with the import. In the case with fn-input this will cause the fn-input.js file to be run. The only important thing here is that this will add the "fn-input" element to the document element making it available in all of your HTML.

③ Use

Use it in HTML. This is a HTML element, just like a normal HTML tag. For example:
<fn-input>
Check the page for each component to see what props do what.

Getting data out?...

This is a library based on web components, as such getting data out is handled via Custom Events. In the following example the fn-input component is passed "fName" for its name paramater. For components that generate events, the name of the custom event you listen to is the components name paramater plus "Event", so in this case you listen to the "fNameEvent". It also needs to be noted that in Custom Events data is passed in the detail property of the event object. 


    
  
  //use it in your HTML
  <fn-input type="text" name="fName" placeholder="input stuff"></fn-input>
  
  //add an event listener to get the input, this is a custom event 
  //event name is the prop name + Event
  document.addEventListener("fNameEvent", ((e: CustomEvent) => {
      //do something with the output
      //custom events hold data in the detail property
      console.log(e.detail);
    }) as EventListener);

See each componet for more specific details
see the code
download it

Burst Effect

This component is used to produce a fireworks or confetti type of effect centering on the the click or touch event locaton. In the default configuration if you trigger the click event artificially in code then random coordinates are used for the click event.

click

In Code


    
  // import the component
  import "../lib/burst";
  
  //use it in your HTML
  <fn-burst particleCount={40} duration={0.9}></fn-burst>

How it works

see the code
download it

Input

A generic input styled for Fn. This component fires CustomEvents on input, focusin & focusout. 


  
// import the component
import {fn-input} from TBA;

//use it in your HTML
<fn-input type="text" name="fName" placeholder="input stuff"></fn-input>

//add an event listener to get the input, this is a custom event 
//event name is the prop name + Event
document.addEventListener("fNameEvent", ((e: CustomEvent) => {
    //do something with the output
    //custom events hold data in the detail property
    console.log(e.detail);
  }) as EventListener);

Playground

type
name
value
title
required
placeholder
error
footer
trigger
value

Data In (props)

type
Sets the type of the field: text | number
value
Sets the value shown in the input
name
The name of the input used primarily for the CustomEvent that is fired on input
title
The text that appears above the input
footer
The text that appears below the input
placeholder
Text that appears only when the input is empty.
required
If there is a value given to this prop then this input is considered a required field. If value is empty on either input or focus out then the sting entered here will be showen as an error
error
This prop sets the error state of the input. If this is missing or an empty string then the input has no error, otherwise the error class is added and the text in this prop is displayed in the footer.

Data Out (events)

name + Event
This event is fired on input, focusin & focusout events.
The name of the event is the value of the component's name prop + "Event". So if you use <fn-input type="text" name="fName" placeholder="input stuff"></fn-input> you will need to listen to the "fNameEvent" event: document.addEventListener("fNameEvent"...
see the code
download it

Language Selector

This component is allows users to change the displayed language. It works in conjunction with the translate component which is required to be setup first.

In Code


    
  // import the component
  import {fn-langselect} from TBA;
  
  //use it in your HTML
  <fn-langselect>someString</fn-langselect>

How it works

see the code
download it
its made of cheese

New Version Available!

We’re Excited to announce that a brand new version of Link is here, packed with amazing updates and improvements just for you.

What's new in Link 3.0.1
see the code
download it

Search Select

This is buggy af, needs work but I could not be fucked. You can see the heavy lifting is done, quickly supports listing and searching within a million items, with keyboard events.

In Code


    
  // import the component
  import {fn-searchSelect} from TBA;
  
  //use it in your HTML
  <fn-searchSelect items={JSON.stringify(items)}></fn-searchSelect>

How it works


see the code
download it

Supercar

An isometric Ferrari Testarossa driving along an endless city highway, with traffic, overhead signs, tower blocks, retro video game billboards and a sidewalk with a few food vendors, bus stops, parking meters and pedestrians, and a car park beside it. The whole scene is built from CSS 3D transformed elements and a little JS, no image files.

In Code


    
  // import the component
  import "../lib/supercar";

  //use it in your HTML
  <fn-supercar speed="320" color="#f2f2f6"></fn-supercar>

  //attributes
  //  speed  - how fast the road scrolls (default 320)
  //  color  - body colour (default #f2f2f6, white; #d4001a is Rosso Corsa red)
  //  paused - freezes the animation

How it works

The world is a flat plane tilted with rotateX(55deg) rotateZ(45deg) to give the isometric view. The car is built from tilted panels and cuboids placed in that 3D space. The road never moves; its surface, lane dashes and guardrail posts are repeating textures shifted by one period at a time so the loop is seamless, and the lamps, buildings, traffic, signs and billboards travel round a ring. The billboard posters are pixel art painted onto small canvases at start up.
see the code
download it

Text Wave Effect

IDK, doing shit with html out of pure despair from working with "experts" in LINK.

Well, the way they make shows is, they make one show. That show's called a pilot. Then they show that show to the people who make shows, and on the strength of that one show they decide if they're going to make more shows. Some pilots get picked and become television programs. Some don't, become nothing. She starred in one of the ones that became nothing. You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. My money's in that office, right? If she start giving me some bullshit about it ain't there, and we got to go someplace else and get it, I'm gonna shoot you in the head then and there. Then I'm gonna shoot that bitch in the kneecaps, find out where my goddamn money is. She gonna tell me too. Hey, look at me when I'm talking to you, motherfucker. You listen: we go in there, and that nigga Winston or anybody else is in there, you the first motherfucker to get shot. You understand?

In Code


    
  // import the component
  
  //use it in your HTML
  <fn-textwave>someString</fn-textwave>

How it works

see the code
download it

Theme Selector

This component is configured to detect the users current light/dark mode preferance and set its default state to match. It then allows users to change their theme with their choice saved to localStorage memory. Behind the scenes it simply toggles the "color-scheme" css value on :root to be either light or dark from its detault of "light dark".

In Code


    
  // import the component
  import {fn-theme} from TBA;
  
  //use it in your HTML
  <fn-theme></fn-theme>

In CSS


    
    /* make sure the color-scheme is set globally */
    :root {
        color-scheme: light dark;
    }

    /* define the variables */
    --accent: light-dark(#000, #fff);

    /* use the variables */
    h1{color:var(--accent)}

How it works

see the code
download it

Translate

This component takes a key value set between its opening and closing tags, matches that key to a JSON language file then outputs the value to the HTML. It is used in conjunction with the language selector that allows users to change the display language.

welcome

In Code


  // import the component
  import {fn-translate} from TBA;
  
  //use it in your HTML
  <fn-translate>welcome</fn-translate>

How it works

This is a work in progress, future versions will not require manual editing or a downalod of the file This componet requires some manual setup as it can accomodate any number of languages and translations. Editing of the "translate.js" script is a requirment for this one. Follow these steps (in the translate.js file):

① Install

Download translate.js and place it in your apps filesystem, just like any other JS file.

② Import in JS where you want to use it


  import "idk where you saved it/translate.js"

③ Customise translate.js file

At the top of the file are the imports for the language JSON files 

  import english from "../../translations/en.json";
  import japanese from "../../translations/ja.json";
  import french from "../../translations/fr.json";