### Franken UI Quickstart Template with CDN Source: https://github.com/franken-ui/contexts/blob/master/installation.md A complete HTML quickstart template demonstrating how to integrate Franken UI's CSS and JavaScript via CDN. It includes setup for Inter font, dark mode, and theme customization. This template is ideal for getting a project started quickly. ```html Franken UI ``` -------------------------------- ### Sticky Start Offset Examples - HTML Source: https://github.com/franken-ui/contexts/blob/master/sticky.md Provides practical examples of using the `start` option with different units (px, %, vh) and a CSS selector. Each example demonstrates when the sticky element becomes active during scrolling. ```html
200px
100%
20vh
Selector
``` -------------------------------- ### UIKits Sticky: Overflow Flip Example (HTML) Source: https://github.com/franken-ui/contexts/blob/master/sticky.md Provides a practical example showcasing the 'overflow-flip' option with different configurations. This example illustrates how to achieve effects where a section covers the previous one or is revealed by the subsequent content using 'overflow-flip', 'position', 'start', 'end', and 'offset' attributes. ```html
overflow-flip: true
end: 100%
Cover previous section.
Reveal next section.
position: bottom
overflow-flip: true
start: -100%
end: 0
``` -------------------------------- ### Connect Multiple Containers Example (HTML) Source: https://github.com/franken-ui/contexts/blob/master/switcher.md A full example demonstrating the connection of a single set of toggles to two separate content containers using the `connect` parameter. ```html

Container 1

Container 2

``` -------------------------------- ### Switcher Navigation Example (HTML) Source: https://github.com/franken-ui/contexts/blob/master/switcher.md A complete example showing navigation controls within the switcher content, allowing users to jump to specific items or adjacent ones. ```html ``` -------------------------------- ### Install Franken UI via NPM Source: https://github.com/franken-ui/contexts/blob/master/installation.md Installs the latest version of Franken UI using the NPM package manager. This is the first step before configuring the Vite plugin. ```bash npm install franken-ui ``` -------------------------------- ### UK Command Component Programmatic Navigation Setup Source: https://github.com/franken-ui/contexts/blob/master/command.md This example outlines the necessary steps for implementing programmatic navigation with the UK Command component. It involves assigning an ID to the component and attaching an event listener for the 'uk-command:select' event to handle user selections. ```javascript const commandComponent = document.getElementById('your-command-id'); // Assign an ID to your uk-command element if (commandComponent) { commandComponent.addEventListener('uk-command:select', (event) => { const selectedValue = event.detail.value; // Handle the selected value, e.g., navigate or perform an action console.log('Selected:', selectedValue); // window.location.href = selectedValue; }); } ``` -------------------------------- ### CDN Installation of Franken UI CSS Source: https://github.com/franken-ui/contexts/blob/master/installation.md Install Franken UI's core CSS styles using a CDN link. This method is suitable for simple projects and rapid prototyping. For production, it's advised to use a specific version number instead of 'latest'. ```html ``` -------------------------------- ### Initialize UIkit Components via JavaScript Source: https://github.com/franken-ui/contexts/blob/master/javascript.md Programmatically initialize UIkit components by selecting an element using a selector and optionally providing configuration options. This method offers more control for dynamic component creation or complex setups. ```javascript var sticky = UIkit.sticky("#sticky", { offset: 50, }); ``` -------------------------------- ### UK Icon Usage Example Source: https://github.com/franken-ui/contexts/blob/master/icon-library.md Demonstrates how to use the UK-icon component with various icon names and their associated synonyms. These examples are purely illustrative and do not contain executable code. ```HTML ``` -------------------------------- ### Switcher Multiple Animations Example (HTML) Source: https://github.com/franken-ui/contexts/blob/master/switcher.md An example showcasing the use of multiple animations for the Switcher component, providing distinct in and out transition effects. ```html ``` -------------------------------- ### Sticky Element Example - HTML Source: https://github.com/franken-ui/contexts/blob/master/sticky.md An example demonstrating a sticky element with `data-uk-sticky`. It includes options for `end` and `offset`, and visually shows the sticky behavior within a placeholder. ```html
Stick to the top
``` -------------------------------- ### Navigation with Header and Divider Example - HTML Source: https://github.com/franken-ui/contexts/blob/master/nav.md Shows a practical example of a navigation menu that includes a header and a divider for better organization. This utilizes the `.uk-nav-header` and `.uk-nav-divider` classes. ```html
``` -------------------------------- ### Transition Examples - HTML Source: https://github.com/franken-ui/contexts/blob/master/transition.md Showcases practical implementations of UIkit transitions within a grid layout. This example includes fade, scale-up, slide-bottom, and combined slide effects applied to images and text overlays. ```html

Fade

Fade

Bottom

Bottom

Icon

2 Images

Scale Up Image

Headline

Subheadline

Small Top + Bottom

``` -------------------------------- ### Switcher Animation Example (HTML) Source: https://github.com/franken-ui/contexts/blob/master/switcher.md An example demonstrating the use of a fade animation for the Switcher component, enhancing the visual transition between content items. ```html ``` -------------------------------- ### Default Card Example in HTML Source: https://github.com/franken-ui/contexts/blob/master/card.md An example showcasing a default UIkit card with content, including a title and paragraph text. It demonstrates the basic usage and visual appearance of the card component. ```html

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

``` -------------------------------- ### Accordion Example - HTML Source: https://github.com/franken-ui/contexts/blob/master/accordion.md A complete HTML example demonstrating a functional Accordion component with multiple items. It showcases the 'uk-open' class for initially expanded items and includes sample content. ```html ``` -------------------------------- ### Tab Component Structure and Examples Source: https://github.com/franken-ui/contexts/blob/master/tab.md Demonstrates the basic HTML structure for using tabs and how to integrate dropdown menus within tabs. It also provides a detailed example of a tabbed interface with a dropdown. ```APIDOC ## Tabs and Dropdown Tabs can be used to trigger a dropdown menu from the [Dropdown component](https://franken-ui.dev/docs/2.1/dropdown). ```html ``` ### Example ```html ``` ``` -------------------------------- ### Navigation with Subtitles Example - HTML Source: https://github.com/franken-ui/contexts/blob/master/nav.md Presents an example of a navigation menu where several items feature subtitles using the `.uk-nav-subtitle` class. This enhances readability by providing additional context for each item. ```html
``` -------------------------------- ### Vertical Tabs Layout Example (HTML) Source: https://github.com/franken-ui/contexts/blob/master/tab.md An example demonstrating the implementation of vertical tabs using a grid layout. This showcases how to combine `.uk-tab-left` or `.uk-tab-right` with a two-column grid for side-by-side tab and content arrangement. ```html
``` -------------------------------- ### Example Tab Usage (HTML) Source: https://github.com/franken-ui/contexts/blob/master/tab.md A practical example demonstrating the usage of the Tab component with different tab items, including an active and a disabled tab. The `data-uk-tab` attribute is essential for enabling the tab functionality. ```html ``` -------------------------------- ### NPM Installation: Franken UI Tailwind CSS Plugin Source: https://github.com/franken-ui/contexts/blob/master/installation.md Install Franken UI as a Tailwind CSS plugin using NPM. This method requires an existing Tailwind CSS project, Node.js, and NPM. It involves installing dependencies and running an initialization command that configures PostCSS and Tailwind CSS. ```sh npm install postcss franken-ui ``` ```sh npx franken-ui init -p ``` -------------------------------- ### Initialize UIkit Components Programmatically (JavaScript) Source: https://github.com/franken-ui/contexts/blob/master/javascript.md Demonstrates initializing UIkit components like 'sticky' and 'notification' using JavaScript. It shows how to pass a CSS selector and an options object for initialization, and how functional components like 'notification' omit the element parameter. ```javascript var sticky = UIkit.sticky(".sticky", { offset: 50, top: 100, }); var notifications = UIkit.notification("MyMessage", "destructive"); ``` -------------------------------- ### Global Configuration and Initialization with UIkit Mixins Source: https://context7.com/franken-ui/contexts/llms.txt Illustrates how to apply global configurations to specific UIkit components using mixins and how to hook into the UIkit initialization process using the 'uikit:init' event. This allows for centralized control and customization. ```javascript UIkit.mixin( { data: { offset: 50, top: 100, }, }, "sticky" ); document.addEventListener("uikit:init", () => { console.log("UIkit initialized"); }); ``` -------------------------------- ### Adjusting Parallax Animation Easing in HTML Source: https://github.com/franken-ui/contexts/blob/master/parallax.md This example demonstrates how to modify the acceleration curve of a parallax animation using the 'easing' option. A value of '0' results in a constant speed. Negative values create animations that start fast and slow down, while positive values start slow and speed up towards completion. ```html
…
…
…
``` -------------------------------- ### HTML Button Triggering a Dropdown Menu Source: https://github.com/franken-ui/contexts/blob/master/button.md Shows a basic setup for a button that, when clicked, reveals a dropdown menu. This example illustrates the fundamental integration between a button and the Franken UI dropdown component. ```html
``` -------------------------------- ### UI Icon Usage Examples Source: https://github.com/franken-ui/contexts/blob/master/icon-library.md Demonstrates how to implement various icons using the '' component. Each example specifies an icon name and its corresponding HTML tag. This is useful for frontend developers integrating these icons into web pages. ```html ``` -------------------------------- ### Link Franken UI CSS from node_modules Source: https://github.com/franken-ui/contexts/blob/master/installation.md Includes the Franken UI CSS file directly from the node_modules directory using an HTML link tag. This is an alternative method for including the CSS. ```html ``` -------------------------------- ### Declarative UIkit Initialization and React Compatibility Source: https://context7.com/franken-ui/contexts/llms.txt Provides examples of how UIkit components can be initialized declaratively using HTML attributes. It also demonstrates the use of the 'data-uk-*' prefix for compatibility with frameworks like React. ```html
``` -------------------------------- ### Defining Parallax Animation Start and End Points in HTML Source: https://github.com/franken-ui/contexts/blob/master/parallax.md This example illustrates controlling the duration and trigger points of parallax animations using 'start' and 'end' options. It shows various configurations using percentages ('%'), viewport height ('vh'), and pixel values, including simple arithmetic operations for precise control over when animations begin and end relative to the viewport and target element. ```html
0 / 0
100% / 100%
30vh / 30vh
100% + 100 / 100% + 100
``` -------------------------------- ### Initializing UIkit Components Source: https://github.com/franken-ui/contexts/blob/master/javascript.md Initialize UIkit components by providing the target element (or selector) and an options object. Functional components may omit the element. ```APIDOC ## POST /franken-ui/contexts/initialize ### Description Initializes a UIkit component programmatically. ### Method POST ### Endpoint `/franken-ui/contexts/initialize` ### Parameters #### Request Body - **componentName** (string) - Required - The name of the UIkit component to initialize. - **selector** (string) - Required - A CSS selector or Node to target the component. - **options** (object) - Optional - Configuration options for the component. ### Request Example ```json { "componentName": "sticky", "selector": ".sticky", "options": { "offset": 50, "top": 100 } } ``` ### Response #### Success Response (200) - **componentInstance** (object) - The initialized UIkit component instance. #### Response Example ```json { "componentInstance": "[UIkit component object]" } ``` ``` -------------------------------- ### Access Initialized UIkit Component (JavaScript) Source: https://github.com/franken-ui/contexts/blob/master/javascript.md Illustrates how to retrieve an already initialized UIkit component. By calling the same initialization function without the options parameter, you can get a reference to the previously initialized component. ```javascript var sticky = UIkit.sticky(".sticky"); ``` -------------------------------- ### Full Example of Offcanvas with Overlay in HTML Source: https://github.com/franken-ui/contexts/blob/master/offcanvas.md A comprehensive HTML example demonstrating an offcanvas component with the overlay functionality activated. It includes a button to trigger the offcanvas and the necessary UIkit attributes and classes for styling and behavior. JavaScript from UIkit is required. ```html

Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

``` -------------------------------- ### Scrollspy Example with Mixed Target Classes Source: https://github.com/franken-ui/contexts/blob/master/scrollspy.md Illustrates a Scrollspy setup where a container defines a default animation (`uk-anmt-slide-bottom`), but individual child cards can override this with `data-uk-scrollspy-class` (e.g., `uk-anmt-slide-top`). This example uses `target: .uk-card` to apply scrollspy to all cards in the grid, with `delay: 300` and `repeat: true` for staggered and repeatable animations. It showcases varied animations on different cards within the same scrollspy group. ```html

Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

``` -------------------------------- ### Initialize and Control UIkit Components Programmatically Source: https://context7.com/franken-ui/contexts/llms.txt Demonstrates how to initialize UIkit components manually, retrieve existing instances, configure them, use functional components, invoke methods like toggle and show/hide, and handle component events. It also covers preventing default event behaviors and updating components. ```javascript const sticky = UIkit.sticky(".sticky-element", { offset: 50, top: 100, }); const existingSticky = UIkit.sticky(".sticky-element"); UIkit.modal("#my-modal", { escClose: true, bgClose: true, stack: false, }); UIkit.notification("Message", "primary"); UIkit.offcanvas("#sidebar").toggle(); UIkit.modal("#my-modal").show(); UIkit.modal("#my-modal").hide(); UIkit.util.on("#my-modal", "show", function () { console.log("Modal is about to show"); }); UIkit.util.on("#my-modal", "hidden", function () { console.log("Modal is now hidden"); }); UIkit.util.on(".uk-accordion", "beforeshow", function (e) { // if (someCondition) { // e.preventDefault(); // } }); UIkit.update(document.body, "update"); ``` -------------------------------- ### Listen to UIkit Component DOM Events (JavaScript) Source: https://github.com/franken-ui/contexts/blob/master/javascript.md Explains how to react to DOM events triggered by UIkit components. This example uses `UIkit.util.on` to listen for the 'show' event on an '#offcanvas' element and execute a callback function. ```javascript UIkit.util.on("#offcanvas", "show", function () { // do something }); ``` -------------------------------- ### Import Franken UI CSS in Main CSS File Source: https://github.com/franken-ui/contexts/blob/master/installation.md Imports the Franken UI CSS file into your main CSS file using the @import rule. This method assumes your build process handles CSS imports correctly. ```css @import "franken-ui/css/franken-ui.css"; ``` -------------------------------- ### Dropdown Examples (HTML) Source: https://github.com/franken-ui/contexts/blob/master/dropdown.md Demonstrates the implementation of the Dropdown component using HTML. It showcases two examples: one triggered by hover and another by click, illustrating how to use the 'data-uk-dropdown' attribute and its 'mode' option. ```html
``` -------------------------------- ### Retrieve Initialized UIkit Component Instance Source: https://github.com/franken-ui/contexts/blob/master/javascript.md Get an already initialized UIkit component instance by passing its selector or element to the component's function without a second argument. This allows you to interact with existing components. ```javascript var sticky = UIkit.sticky("#sticky"); ``` -------------------------------- ### Initialize and Show Lightbox Panel with Item - JavaScript Source: https://github.com/franken-ui/contexts/blob/master/lightbox.md Demonstrates how to initialize the Lightbox Panel for a given element and then display a specific item using its index. The 'show' method accepts an optional index to control which item is displayed. ```javascript UIkit.lightboxPanel(element).show(index); ``` -------------------------------- ### HTML: Basic Pagination with Previous/Next Links Source: https://github.com/franken-ui/contexts/blob/master/pagination.md This example demonstrates a basic pagination structure with links for 'Previous' and 'Next'. It utilizes the `.uk-pgn` class for styling and `data-uk-pgn-previous` and `data-uk-pgn-next` attributes for icon placement. ```html ``` -------------------------------- ### HTML: Pagination with Page Numbers and Disabled/Active States Source: https://github.com/franken-ui/contexts/blob/master/pagination.md This example showcases a more complex pagination setup including page numbers, ellipsis for skipped pages (using `.uk-disabled`), and an active page indicator (using `.uk-active`). It also includes navigation icons. ```html ``` -------------------------------- ### Basic UK Command Component Setup Source: https://github.com/franken-ui/contexts/blob/master/command.md This snippet shows the fundamental structure of the UK Command component, including how to define options within a hidden select element. It serves as the base for creating command palettes with various choices. ```html ``` -------------------------------- ### UIkit Initialization Hook Source: https://github.com/franken-ui/contexts/blob/master/javascript.md Execute code after UIkit has loaded but before components initialize by listening for the `uikit:init` event on the document. ```APIDOC ## POST /franken-ui/contexts/on-init ### Description Registers a callback to be executed when UIkit finishes its initialization. ### Method POST ### Endpoint `/franken-ui/contexts/on-init` ### Parameters #### Request Body - **callback** (function) - Required - The function to execute after UIkit is initialized. ### Request Example ```json { "callback": "function() { console.log('UIkit has finished initializing!'); }" } ``` ### Response #### Success Response (200) - **message** (string) - Confirmation message. #### Response Example ```json { "message": "Initialization hook registered successfully." } ``` ``` -------------------------------- ### Configure Vite Plugin for Franken UI Source: https://github.com/franken-ui/contexts/blob/master/installation.md Configures the Vite build tool to use the Franken UI Vite plugin. This involves importing the plugin and adding it to the Vite configuration. Ensure the plugin is imported early in the configuration to prevent CSS import issues. ```javascript import franken from "franken-ui/plugin-vite"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [ franken({ preflight: true, }), ], }); ```