Flach Web

Welcome to Flach Web, a curated collection of modern web UI tools and libraries to enhance your development workflow. Click any section title to explore examples and usage in detail.

1. Tailwind CSS

A utility-first CSS framework for rapid UI development. Use concise classes like: p-4, text-center, bg-blue-500, and more to style your layout quickly and consistently.

   <script src="/tailwind/tailwind.js"></script>

2. AOS (Animate On Scroll)

Add scroll-triggered animations using data-aos attributes. Example: <div data-aos="fade-up">...</div>

data-aos-delay="300"
data-aos-duration="1000"
data-aos-offset="120"

  <link href="animations-scrolling/aos-js/aos.css" rel="stylesheet" />
   <script src="animations-scrolling/aos-js/aos.js"></script>
    <script>
      AOS.init({
        duration: 1000,
        easing: 'ease-out-back',
        once: false,
        mirror: true,
        offset: 100,
      });
    </script>

3. Sal.js

Lightweight animation library using IntersectionObserver. Example: <div data-sal="slide-left">...</div>

data-sal-delay, data-sal-duration
data-sal-easing

    <link rel="stylesheet" href="animations-scrolling/sal-js/sal.css" />
    <script src="animations-scrolling/sal-js/sal.js"></script>
  <script>
    sal({
      threshold: 1,
      once: false,
      easing: 'ease-out-cubic',
    });
  </script>

4. Animate.css + WOW.js

Combine Animate.css and WOW.js to animate elements on scroll. Example: <div class="wow bounceInUp">...</div>

Popular classes: fadeIn, zoomIn, slideInLeft.

     <link rel="stylesheet" href="animations/animate.css" />
    <script src="animations/wow.min.js"></script> 
   <script>
    new WOW().init();
  </script>

5. Font Awesome

Scalable vector icons customizable with CSS. Example usage:

<i class="fas fa-home"></i> – Solid home icon
<i class="fab fa-github"></i> – GitHub brand icon

Customize using classes like fa-2x, or Tailwind classes like text-blue-500.

   <link rel="stylesheet" href="font-awesome/css/all.min.css" />

6. Hint.css (Tooltips)

Simple tooltip library using data attributes. Example: <button class="hint--top" aria-label="Tooltip text">Hover me</button>

Position using classes like hint--top, hint--bottom, etc.
Customize with inline CSS variables:
style="--hint-background: #8e44ad; --hint-color: #fff;"

    <link rel="stylesheet" href="hint-css/hint.min.css" />

7. Fonts

Includes a collection of Arabic and English fonts for web typography. Easily integrate unique typefaces into your project.

    <link rel="stylesheet" href="fonts/fonts.css" />

8. Bootstrap 5

A powerful front-end framework for building responsive websites quickly using prebuilt components and utility classes. Bootstrap includes layout grids, buttons, modals, navbars, and more.

Responsive grid system with .container, .row, .col
Predefined button styles: .btn, .btn-primary, .btn-outline-*
Reusable components: .navbar, .card, .modal, .alert
JavaScript plugins: Carousel, Collapse, Dropdowns, Tooltips

Example usage: <button class="btn btn-success">Click me</button>
<div class="alert alert-info">Bootstrap Alert</div>

Customize using classes like .bg-*, .text-*, .m-*, and .p-* for margin and padding spacing.

       <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
        <script src="bootstrap/js/bootstrap.bundle.min.js"></script>

🔧 Initialization Scripts

All libraries are initialized with default settings for quick use:

AOS: Duration, offset, mirror
SAL: Easing, threshold
WOW: Basic setup on scroll

📌 Notes

Use only one animation library per element to avoid conflicts.
Add extra vertical space to see scroll animations clearly.
Customize animation offset for earlier or later trigger points.