doc-fui-ds
Version:
Doc
231 lines (200 loc) • 16.8 kB
HTML
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title -->
<title>FUI Design System - Futuristic User Interface / UI</title>
<!-- Description -->
<meta name="description"
content="Explore the FUI Design System to create stunning futuristic user interfaces with innovative UI components, combining the power of Bootstrap or Tailwind CSS." />
<meta name="author" content="Mohammad Azad">
<!-- Favicon -->
<link rel="shortcut icon" href="assets/img/fui-design-system-logo-icon-16.png">
<link rel="apple-touch-icon" sizes="120x120" href="fui-design-system-logo-icon-120x120.png" />
<link rel="apple-touch-icon" sizes="152x152" href="fui-design-system-logo-icon-152x152.png" />
<!-- Bootstrap -->
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap.css">
<!-- Bootstrap icons -->
<link rel="stylesheet" href="assets/css/bootstrap/bootstrap-icons.css">
<!-- FUI -->
<link rel="stylesheet" href="assets/css/fui.css">
</head>
<body class="fui-bg-gradient-grid-dark fui-bg-attachment-fixed overflow-hidden">
<section id="header"></section>
<main class="position-xl-fixed fui-top-0 fui-bottom-0 fui-end-0 p-3 pt-0 pt-xl-3 pe-xl-3 ps-xl-0 fui-main">
<div class="row gx-0 gy-3 h-100">
<div class="col-xl-12 col-xxl-12">
<!-- Main content start-->
<div class="position-relative h-100 border border-primary border-opacity-50 p-4 pe-3">
<span class="position-absolute fui-top-n-1 fui-start-n-1 fui-size-10 border border-warning border-opacity-75 border-end-0 border-bottom-0 pe-none"></span>
<span class="position-absolute fui-top-n-1 fui-end-n-1 fui-size-10 border border-warning border-opacity-75 border-start-0 border-bottom-0 pe-none"></span>
<span class="position-absolute fui-bottom-n-1 fui-start-n-1 fui-size-10 border border-warning border-opacity-75 border-end-0 border-top-0 pe-none"></span>
<span class="position-absolute fui-bottom-n-1 fui-end-n-1 fui-size-10 border border-warning border-opacity-75 border-start-0 border-top-0 pe-none"></span>
<div class="fui-main-content fui-main-h-full overflow-x-hidden overflow-y-auto p-md-2 pe-md-3">
<div class="position-relative text-center bg-primary bg-opacity-10 px-4 py-5 fui-all-corner fui-inlay-primary-10 fui-border-primary-10" fui-corner fui-both>
<div class="p-4 my-2">
<div id="particles-js" class="position-absolute top-0 start-0 end-0 bottom-0 ">
<canvas class="particles-js-canvas-el" width="1903" height="615"></canvas>
</div>
<span class="">
<img src="assets/img/fui-design-system-logo-icon.svg" width="130" alt="" />
</span>
<h2 class="mt-4 pb-3 fui-width-md-50 mx-auto position-relative z-1">
Boost your <span class="text-warning">futuristic</span> idea with <span class="text-warning">FUI</span> native components.
</h2>
<div class="w-25 border-bottom border-white border-opacity-25 d-flex justify-content-between mx-auto my-4">
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex fui-w-64 fui-h-2 bg-warning position-relative fui-bottom-n-1 mx-auto"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
<p class="fui-fs-16 fui-width-md-75 mx-auto pt-3 position-relative z-1">
Components are the reusable building blocks of our design system to create patterns
and intuitive user experiences.
</p>
<p class="fui-fs-16 fui-width-md-75 mx-auto mb-5 position-relative z-1">
Before proceeding with the FUI Design installation, It is recommended that you
follow the steps listed below. We have covered all kinds of necessary information,
and provide you with all the guidelines and details that you will need to use FUI
Design System.
</p>
<div class="position-relative d-inline-flex">
<span class="position-absolute z-1 top-0 start-0 fui-size-8 border border-2 border-white border-opacity-75 border-end-0 border-bottom-0 pe-none"></span>
<span class="position-absolute z-1 top-0 end-0 fui-size-8 border border-2 border-white border-opacity-75 border-start-0 border-bottom-0 pe-none"></span>
<a href="internal.html" class="btn btn-lg bg-primary bg-opacity-25 fui-hover-bg-primary-75 px-5 border-0 rounded-0 fui-all-corner-0 fui-border-1 fui-border-white-50 fui-b-clip-x fui-b-extend-35 fui-b-7 text-white fw-bold" fui-clip-border>
<span class="d-inline-flex pb-2 text-uppercase fui-fs-16">Get Start</span>
</a>
<span class="fui-shap-trapezoid-t-4 fui-trapezoid-w-64px text-warning position-absolute bottom-0 start-50 translate-middle-x"></span>
<span class="position-absolute z-1 bottom-0 start-0 fui-size-8 border border-2 border-white border-opacity-75 border-end-0 border-top-0 pe-none"></span>
<span class="position-absolute z-1 bottom-0 end-0 fui-size-8 border border-2 border-white border-opacity-75 border-start-0 border-top-0 pe-none"></span>
</div>
<div class="w-50 border-bottom border-white border-opacity-25 d-flex justify-content-between position-absolute mb-2 bottom-0 start-50 translate-middle-x">
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
<span class="d-inline-flex w-25 fui-h-2 bg-white position-relative fui-bottom-n-1 mx-auto"></span>
<span class="d-inline-flex fui-size-2 bg-white position-relative fui-bottom-n-1"></span>
</div>
</div>
</div>
<div class="position-relative mt-5">
<div class="row g-5">
<div class="col-md-6 col-xxl-3">
<div class="position-relative h-100">
<span class="position-absolute fui-top-n-2 fui-end-n-2 fui-size-32 border border-4 border-primary border-start-0 border-bottom-0 pe-none"></span>
<div class="bg-primary bg-opacity-10 p-4 fui-tl-14 fui-br-14 fui-border-1 fui-border-primary h-100" fui-corner fui-border>
<div class="p-2">
<div class="d-flex align-items-center gap-3 mb-3 pb-1">
<span
class="d-inline-flex align-items-center justify-content-center fui-size-45 rounded-circle bg-primary bg-opacity-25 fui-outline fui-outline-5 fui-outline-primary-10">
<img src="assets/img/icon-animated-coding.gif" width="40"
alt="Utility-First Fundamentals icon" />
</span>
<h2 class="fui-fs-18 mb-0">
Utility-First <br />Fundamentals
</h2>
</div>
<p class="mb-0 fui-fs-14">
Build complex components with a utility-first workflow and
primitives.
</p>
</div>
</div>
<span
class="position-absolute fui-bottom-n-2 fui-start-n-2 fui-size-32 border border-4 border-primary border-end-0 border-top-0 pe-none"></span>
</div>
</div>
<div class="col-md-6 col-xxl-3">
<div class="position-relative h-100">
<span class="position-absolute fui-top-n-2 fui-end-n-2 fui-size-32 border border-4 border-primary border-start-0 border-bottom-0 pe-none"></span>
<div class="bg-primary bg-opacity-10 p-4 fui-tl-14 fui-br-14 fui-border-1 fui-border-primary h-100" fui-corner fui-border>
<div class="p-2">
<div class="d-flex align-items-center gap-3 mb-3 pb-1">
<span
class="d-inline-flex align-items-center justify-content-center fui-size-40 rounded-circle bg-primary bg-opacity-25 fui-outline fui-outline-5 fui-outline-primary-10">
<img src="assets/img/icon-animated-hover.gif" width="40"
alt="Utility-First Fundamentals icon" />
</span>
<h2 class="fui-fs-18 mb-0">
Hover, Focus & Other States
</h2>
</div>
<p class="mb-0 fui-fs-14">
Style interactive states like hover and focus with modifiers.
</p>
</div>
</div>
<span
class="position-absolute fui-bottom-n-2 fui-start-n-2 fui-size-32 border border-4 border-primary border-end-0 border-top-0 pe-none"></span>
</div>
</div>
<div class="col-md-6 col-xxl-3">
<div class="position-relative h-100">
<span class="position-absolute fui-top-n-2 fui-end-n-2 fui-size-32 border border-4 border-primary border-start-0 border-bottom-0 pe-none"></span>
<div class="bg-primary bg-opacity-10 p-4 fui-tl-14 fui-br-14 fui-border-1 fui-border-primary h-100" fui-corner fui-border>
<div class="p-2">
<div class="d-flex align-items-center gap-3 mb-3 pb-1">
<span
class="d-inline-flex align-items-center justify-content-center fui-size-40 rounded-circle bg-primary bg-opacity-25 fui-outline fui-outline-5 fui-outline-primary-10">
<img src="assets/img/icon-animated-reusing-style.gif" width="32"
alt="Utility-First Fundamentals icon" />
</span>
<h2 class="fui-fs-18 mb-0">
Reusing <br />Styles
</h2>
</div>
<p class="mb-0 fui-fs-14">
Reduce duplication with reusable abstractions for maintainable
projects.
</p>
</div>
</div>
<span
class="position-absolute fui-bottom-n-2 fui-start-n-2 fui-size-32 border border-4 border-primary border-end-0 border-top-0 pe-none"></span>
</div>
</div>
<div class="col-md-6 col-xxl-3">
<div class="position-relative h-100">
<span class="position-absolute fui-top-n-2 fui-end-n-2 fui-size-32 border border-4 border-primary border-start-0 border-bottom-0 pe-none"></span>
<div class="bg-primary bg-opacity-10 p-4 fui-tl-14 fui-br-14 fui-border-1 fui-border-primary h-100" fui-corner fui-border>
<div class="p-2">
<div class="d-flex align-items-center gap-3 mb-3 pb-1">
<span
class="d-inline-flex align-items-center justify-content-center fui-size-50 rounded-circle bg-primary bg-opacity-25 fui-outline fui-outline-5 fui-outline-primary-10">
<img src="assets/img/icon-animated-branding.gif" width="40"
alt="Utility-First Fundamentals icon" />
</span>
<h2 class="fui-fs-18 mb-0">
Customizing the Framework
</h2>
</div>
<p class="mb-0 fui-fs-14">
Tailor the framework to fit your brand and extend it with your own
custom styles.
</p>
</div>
</div>
<span
class="position-absolute fui-bottom-n-2 fui-start-n-2 fui-size-32 border border-4 border-primary border-end-0 border-top-0 pe-none"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main content end-->
</div>
</div>
</main>
<!--JSS & CSS library-->
<!-- Bootstrap bundel -->
<script src="assets/js/bootstrap.bundle.min.js"></script>
<!-- particles js -->
<script src="assets/plugins/particles/particles.js"></script>
<script src="assets/plugins/particles/app.js"></script>
<!-- custom js -->
<script src="assets/js/fui/include.js"></script>
<script>
includeHTML('header', 'header.html'); // Loads 'header.html' into #header
</script>
</body>
</html>