├── LICENSE.md ├── Readme.md ├── cover.jpg ├── data.json ├── elements ├── accordion-examples │ ├── example-01.html │ └── example-02.html ├── accordion.html ├── accordion.json ├── alert-examples │ ├── example-01.html │ └── example-02.html ├── alert.html ├── badge-examples │ ├── example-01.html │ ├── example-02.html │ ├── example-03.html │ └── example-04.html ├── badge.html ├── banner-examples │ ├── example-01.html │ └── example-02.html ├── banner.html ├── banner.json ├── breadcrumbs-examples │ ├── example-01.html │ └── example-02.html ├── breadcrumbs.html ├── button-examples │ ├── example-01.html │ ├── example-02.html │ └── example-03.html ├── button.html ├── card-examples │ ├── example-01.html │ ├── example-02.html │ └── example-03.html ├── card.html ├── checkbox-examples │ ├── example-01.html │ ├── example-02.html │ └── example-03.html ├── checkbox.html ├── combobox.html ├── command-examples │ ├── example-01.html │ └── example-02.html ├── command.html ├── command.json ├── context-menu-examples │ ├── example-01.html │ └── example-02.html ├── context-menu.html ├── context-menu.json ├── copy-to-clipboard-examples │ ├── example-01.html │ └── example-02.html ├── copy-to-clipboard.html ├── copy-to-clipboard.json ├── date-picker-examples │ └── example-01.html ├── date-picker.html ├── date-picker.json ├── dropdown-menu-examples │ └── example-01.html ├── dropdown-menu.html ├── dropdown-menu.json ├── explanation_generation.txt ├── full-screen-menu-examples │ └── example-01.html ├── full-screen-menu.html ├── full-screen-menu.json ├── full-screen-modal-examples │ └── example-01.html ├── full-screen-modal.html ├── full-screen-modal.json ├── hover-card.html ├── hover-card.json ├── image-gallery.html ├── image-gallery.json ├── marquee-additional.html ├── marquee-examples │ └── example-01.html ├── marquee.html ├── marquee.json ├── menubar.html ├── menubar.json ├── modal-examples │ ├── example-01.html │ └── example-02.html ├── modal.html ├── modal.json ├── monaco-editor.html ├── monaco-editor.json ├── navigation-menu.html ├── navigation-menu.json ├── pagination-examples │ └── example-01.html ├── pagination.html ├── popover.html ├── popover.json ├── progress-examples │ └── example-01.html ├── progress.html ├── progress.json ├── quotes.html ├── radio-group.html ├── radio-group.json ├── range-slider.html ├── rating-examples │ ├── example-01.html │ └── example-02.html ├── rating.html ├── rating.json ├── retro-grid-examples │ └── example-01.html ├── retro-grid.html ├── retro-grid.json ├── select.html ├── select.json ├── slide-over-examples │ └── example-01.html ├── slide-over.html ├── slide-over.json ├── sticky-header.html ├── switch-examples │ └── example-01.html ├── switch.html ├── switch.json ├── table-examples │ ├── example-01.html │ └── example-02.html ├── table-of-contents.html ├── table.html ├── tabs-examples │ └── example-01.html ├── tabs.html ├── tabs.json ├── text-animation-examples │ ├── example-01.html │ └── example-02.html ├── text-animation.html ├── text-animation.json ├── text-input.html ├── textarea-auto-resize-examples │ └── example-01.html ├── textarea-auto-resize.html ├── textarea-auto-resize.json ├── textarea-examples │ └── example-01.html ├── textarea.html ├── toast.html ├── toast.json ├── tooltip-examples │ ├── example-01.html │ └── example-02.html ├── tooltip.html ├── tooltip.json ├── typing-effect.html ├── typing-effect.json ├── video-examples │ ├── example-01.html │ └── example-02.html ├── video.html └── video.json ├── getting-started ├── alpine-plugin.html ├── contribution.html ├── how-to-use.html └── introduction.html ├── index.html └── main.js /LICENSE.md: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) DevDojo 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 6 | 7 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 10 | -------------------------------------------------------------------------------- /Readme.md: -------------------------------------------------------------------------------- 1 | # Pines UI Library 2 | 3 | 4 | 5 | This is the main repo for the Open Source Pines UI Library. This repo is simple to setup and get running on your local if you wish to submit a fix or make some additions to the library. 6 | 7 | 1. Download the contents of the GitHub repo and store it in a folder. 8 | 2. Make sure you have NodeJS installed along with the http-server package. 9 | 3. CD into your folder and run `http-serve` 10 | 4. Visit the localhost URL to see PinesUI 11 | 12 | Be sure to visit DevDojo discussions section to ask questions and get assistance. 13 | 14 | ## License 15 | 16 | The Pines UI Library is open-sourced software licensed under the [MIT license](https://opensource.org/licenses/MIT). 17 | -------------------------------------------------------------------------------- /cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/thedevdojo/pines/c4ce9eab843f4b22c3a10937ea228c945b10c70d/cover.jpg -------------------------------------------------------------------------------- /elements/accordion-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
7 | 8 |
9 | 16 |
17 |
18 | Pines is a UI library built for AlpineJS and TailwindCSS. 19 |
20 |
21 |
22 |
23 | 30 |
31 |
32 | Add AlpineJS and TailwindCSS to your page and then copy and paste any of these elements into your project. 33 |
34 |
35 |
36 |
37 | 44 |
45 |
46 | Absolutely! Pines works with any other library or framework. Pines works especially well with the TALL stack. 47 |
48 |
49 |
50 |
-------------------------------------------------------------------------------- /elements/accordion-examples/example-02.html: -------------------------------------------------------------------------------- 1 |
7 |
8 | 12 |
13 |
14 | Pines is a UI library built for AlpineJS and TailwindCSS. 15 |
16 |
17 |
18 |
19 | 23 |
24 |
25 | Add AlpineJS and TailwindCSS to your page and then copy and paste any of these elements into your project. 26 |
27 |
28 |
29 |
30 | 34 |
35 |
36 | Absolutely! Pines works with any other library or framework. Pines works especially well with the TALL stack. 37 |
38 |
39 |
40 |
-------------------------------------------------------------------------------- /elements/accordion.html: -------------------------------------------------------------------------------- 1 |
7 |
8 | 12 |
13 |
14 | Pines is a UI library built for AlpineJS and TailwindCSS. 15 |
16 |
17 |
18 |
19 | 23 |
24 |
25 | Add AlpineJS and TailwindCSS to your page and then copy and paste any of these elements into your project. 26 |
27 |
28 |
29 |
30 | 34 |
35 |
36 | Absolutely! Pines works with any other library or framework. Pines works especially well with the TALL stack. 37 |
38 |
39 |
40 |
-------------------------------------------------------------------------------- /elements/accordion.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "activeAccordion" : "This will contain the string of the active accordion item (example: 'accordion-1')", 4 | "setActiveAccordion(id)" : "This will set the active accordion with the associated id" 5 | }, 6 | "additional_info" : "", 7 | "explanation" : "The accordion UI element on a website is like a digital filing cabinet, revealing and concealing sections of information with a click, granting users the power to navigate the web's vastness while maintaining order and harmony.", 8 | "alert_notification" : { 9 | "title" : "Not seeing the animation?", 10 | "description" : "We are using the AlpineJS collapse plugin in this example. Simply, include it in your project and you will see the collapse plugin in action." 11 | } 12 | } -------------------------------------------------------------------------------- /elements/alert-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
Alert Message Headline
4 |
This is the subtext for your alert message, providing important information or instructions.
5 |
6 |
7 | 8 |
Alert Message Headline
9 |
This is the subtext for your alert message, providing important information or instructions.
10 |
11 |
12 | 13 |
Alert Message Headline
14 |
This is the subtext for your alert message, providing important information or instructions.
15 |
16 |
17 | 18 |
Alert Message Headline
19 |
This is the subtext for your alert message, providing important information or instructions.
20 |
-------------------------------------------------------------------------------- /elements/alert-examples/example-02.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
Alert Message Headline
4 |
This is the subtext for your alert message, providing important information or instructions.
5 |
6 |
7 | 8 |
Alert Message Headline
9 |
This is the subtext for your alert message, providing important information or instructions.
10 |
11 |
12 | 13 |
Alert Message Headline
14 |
This is the subtext for your alert message, providing important information or instructions.
15 |
16 |
17 | 18 |
Alert Message Headline
19 |
This is the subtext for your alert message, providing important information or instructions.
20 |
-------------------------------------------------------------------------------- /elements/alert.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
Alert Message Headline
4 |
This is the subtext for your alert message, providing important information or instructions.
5 |
6 | -------------------------------------------------------------------------------- /elements/badge-examples/example-01.html: -------------------------------------------------------------------------------- 1 | Badge 2 | Badge 3 | Badge 4 | Badge 5 | Badge 6 | Badge 7 | Badge 8 | Badge -------------------------------------------------------------------------------- /elements/badge-examples/example-02.html: -------------------------------------------------------------------------------- 1 | Badge 2 | Badge 3 | Badge 4 | Badge 5 | Badge 6 | Badge 7 | Badge 8 | Badge -------------------------------------------------------------------------------- /elements/badge-examples/example-03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Badge 4 | 5 | 6 | 7 | Badge 8 | 9 | 10 | 11 | Badge 12 | 13 | 14 | 15 | Badge 16 | 17 | 18 | 19 | Badge 20 | 21 | 22 | 23 | Badge 24 | 25 | 26 | 27 | Badge 28 | 29 | 30 | 31 | Badge 32 | -------------------------------------------------------------------------------- /elements/badge-examples/example-04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Badge 5 | 6 | 7 | 8 | Badge 9 | 10 | 11 | 12 | Badge 13 | 14 | 15 | 16 | Badge 17 | 18 | 19 | 20 | Badge 21 | 22 | 23 | 24 | Badge 25 | -------------------------------------------------------------------------------- /elements/badge.html: -------------------------------------------------------------------------------- 1 | 2 | Badge 3 | -------------------------------------------------------------------------------- /elements/banner-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
16 |
17 | 18 | 19 | 20 | New Feature 21 | 22 | Click here to learn about our latest feature 23 | 24 | 27 |
28 |
-------------------------------------------------------------------------------- /elements/banner-examples/example-02.html: -------------------------------------------------------------------------------- 1 |
16 |
17 |
18 | 19 |
20 |

Cookie Notice

21 |

We use cookies to make your online experience better.

22 |
23 |
24 |
25 | 28 | 31 |
32 |
33 |
-------------------------------------------------------------------------------- /elements/banner.html: -------------------------------------------------------------------------------- 1 |
16 |
17 | 18 | 19 | 20 | New Feature 21 | 22 | Click here to learn about our latest feature 23 | 24 | 27 |
28 |
-------------------------------------------------------------------------------- /elements/banner.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "bannerVisible" : "If the banner is visible (default: false)", 4 | "bannerVisibleAfter" : "On initialize the banner will be visible after this many milliseconds" 5 | }, 6 | "additional" : { 7 | "description" : "

You can remove the setTimeout method in the init() method if you wish to toggle visibility another way.

", 8 | "note" : "Inside the click function on the close button, you may want to remove the setTimeout to prevent the banner from re-showing." 9 | } 10 | } -------------------------------------------------------------------------------- /elements/breadcrumbs-examples/example-01.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /elements/breadcrumbs-examples/example-02.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /elements/breadcrumbs.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /elements/button-examples/example-01.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 12 | 13 | 16 | 17 | 20 | 21 | -------------------------------------------------------------------------------- /elements/button-examples/example-02.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 12 | 13 | 16 | 17 | 20 | -------------------------------------------------------------------------------- /elements/button-examples/example-03.html: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | 9 | 12 | 13 | 16 | 17 | 20 | -------------------------------------------------------------------------------- /elements/button.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /elements/card-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
Card Title
4 | 5 |

Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.

6 | 10 |
-------------------------------------------------------------------------------- /elements/card-examples/example-02.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
5 | 6 |
7 | 8 |
Adam Wathan
9 | @adamwathan 10 | 11 | 14 |
15 |
16 |

Creator of @tailwindcss. Listener of Slayer. Austin 3:16. BTW, Pines UI is super cool!

17 |
18 |
19 | 20 | 21 | 22 |
23 | 673 Following 24 | 168.6K Followers 25 |
26 |
27 |
-------------------------------------------------------------------------------- /elements/card-examples/example-03.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 |
Card Title
6 | 7 |

This card element can be used to display a product, post, or any other type of data.

8 | 12 |
13 |
-------------------------------------------------------------------------------- /elements/card.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 |

Product Name

7 |

This card element can be used to display a product, post, or any other type of data.

8 | 9 |
10 |
-------------------------------------------------------------------------------- /elements/checkbox-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 |
5 |
6 | 7 |
8 |
-------------------------------------------------------------------------------- /elements/checkbox-examples/example-02.html: -------------------------------------------------------------------------------- 1 |
2 |

Select a library below

3 |
4 | 5 | 14 |
15 |
16 | 17 | 26 |
27 |
-------------------------------------------------------------------------------- /elements/checkbox-examples/example-03.html: -------------------------------------------------------------------------------- 1 |
2 |
3 | 4 | 12 |
13 |
-------------------------------------------------------------------------------- /elements/checkbox.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 |
-------------------------------------------------------------------------------- /elements/combobox.html: -------------------------------------------------------------------------------- 1 |
63 | 64 | 70 | 71 | 93 | 94 |
-------------------------------------------------------------------------------- /elements/command.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "commandItems" : "The items inside the command, each object will contain a category of items. Each item includes a title, value, icon, and default value. All items will be searchable, but only default items will be visible with an empty search.", 4 | "commandItemsFiltered" : "A filtered array of all the items. Updated on initialize and as the user types in the search field.", 5 | "commandItemActive" : "A command item being hovered by the mouse or highlighted by the keyboard.", 6 | "commandItemSelected" : "A command item that has been selected by the user via mouse click or enter on keyboard.", 7 | "commandId" : "Each item will have a unique ID, which is used to scroll to element in the event of an overflow of items in the command menu.", 8 | "commandSearch" : "The search term entered by the user.", 9 | "commandSearchIsEmpty()" : "A boolean value indicating if the search field is empty or not.", 10 | "commandItemIsActive(item)" : "A boolean value indicating if the command item is active or not.", 11 | "commandItemActiveNext()" : "Based on the current active item, this will be the next item in the list.", 12 | "commandItemActivePrevious()" : "Based on the current active item, this will be the previous item in the list.", 13 | "commandScrollToActiveItem()" : "If there are more commands than can fit in the menu, this will scroll the menu to the active item.", 14 | "commandSearchItems()" : "This will filter the command items based on the search term.", 15 | "commandShowCategory(item, index)" : "When the user searches, this function will determine if the filtered items contain a category that should be shown.", 16 | "commandCategoryCapitalize(string)" : "Simple helper function to capitalize the category name.", 17 | "commandItemsReorganize()" : "This will re-organize the commandItems on init. It will flatten them into a single dimensional array. This makes it easier to filter and iterate over the items." 18 | }, 19 | "alert_notification" : { 20 | "title" : "Adding items to the command", 21 | "description" : "In order to make use of this component you can simply add your items inside of the commandItems array. Each item will have a title, value, icon, and default value. All items will be searchable, but only default items will be visible with an empty search. Learn how to get the selected item below." 22 | }, 23 | "additional" : { 24 | "description" : "

Inside the init method is a watcher for the commandItemSelected which console.logs the selected item. Replace the console.log with your own functionality you want to use when a user selects that item.

" 25 | } 26 | } -------------------------------------------------------------------------------- /elements/context-menu.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "contextMenuOpen" : "If the context menu is open (default: false)", 4 | "contextMenuToggle (event)" : "This function will toggle the context menu to show or hide.", 5 | "calculateContextMenuPosition (clickEvent)" : "This function will calculate the position of the context menu based on the clickEvent position.", 6 | "calculateSubMenuPosition (clickEvent)" : "This function will calculate the position of the sub menu and adjust it if it is off screen." 7 | } 8 | } -------------------------------------------------------------------------------- /elements/copy-to-clipboard-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
13 |
14 |
15 | Copied! 16 |
17 |
18 |
19 |
20 |
21 | 25 |
-------------------------------------------------------------------------------- /elements/copy-to-clipboard-examples/example-02.html: -------------------------------------------------------------------------------- 1 |
13 | 19 |
-------------------------------------------------------------------------------- /elements/copy-to-clipboard.html: -------------------------------------------------------------------------------- 1 |
13 | 19 |
-------------------------------------------------------------------------------- /elements/copy-to-clipboard.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "copyText" : "The text to be copied to the clipboard", 4 | "copyNotification" : "Boolean value that will show whether or not the text has been copied", 5 | "copyToClipboard()" : "The function that will copy the value inside of copyText to the clipboard" 6 | } 7 | } -------------------------------------------------------------------------------- /elements/date-picker.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "datePickerOpen" : "If the date picker is open (true or false)", 4 | "datePickerValue" : "The default date value. If left empty the current date will be used", 5 | "datePickerFormat" : "You can choose a few different formats to display the date. See all available formats in the datePickerFormatDate() method.", 6 | "datePickerMonth" : "Numerical value of the current month (0-11)", 7 | "datePickerYear" : "Numerical value of the current year", 8 | "datePickerDay" : "Numerical value of the current day", 9 | "datePickerDaysInMonth" : "Array containing the number of days in the selected month", 10 | "datePickerBlankDaysInMonth" : "Array containing the number of blank days before the first day of the month", 11 | "datePickerMonthNames" : "Array containing the names of the months", 12 | "datePickerDays" : "Array containing the names of the days", 13 | "datePickerDayClicked(day)" : "When a day is clicked on the datepicker set the new date value", 14 | "datePickerPreviousMonth()" : "Go to the previous month", 15 | "datePickerNextMonth()" : "Go to the next month", 16 | "datePickerIsSelectedDate(day)" : "Check if the day is the selected date", 17 | "datePickerIsToday(day)" : "Check if the day is today", 18 | "datePickerCalculateDays()" : "Calculate the number of days in the month", 19 | "datePickerFormatDate(date)" : "Format the date to the selected format" 20 | } 21 | } -------------------------------------------------------------------------------- /elements/dropdown-menu.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "dropdownOpen" : "Boolean value that will toggle whether or not the dropdown is open" 4 | } 5 | } -------------------------------------------------------------------------------- /elements/explanation_generation.txt: -------------------------------------------------------------------------------- 1 | The ChatGPT prompt that is used to get the explanation for the UI element is: 2 | Can you give a concise paragraph explanation of what an [element] UI element is and how it's used on a website in the tone of Mark Twain. -------------------------------------------------------------------------------- /elements/full-screen-menu-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 63 |
64 | -------------------------------------------------------------------------------- /elements/full-screen-menu.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 38 |
-------------------------------------------------------------------------------- /elements/full-screen-menu.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "previewFullScreenMenu (for demo)" : "This is a preview of the full screen menu whether it's visible or not and is really only used for the purposes of this demo.", 4 | "previewFullScreenMenu" : "This will toggle the fullscreen menu to be open or closed." 5 | }, 6 | "additional" : { 7 | "description" : "

You will most likely only want the content inside of the <template x-teleport="body"> section. The other content outside of this element are for demo purposes.

" 8 | } 9 | } -------------------------------------------------------------------------------- /elements/full-screen-modal.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "fullscreenModal" : "A boolean value that will toggle the fullscreen modal to be open or closed." 4 | }, 5 | "alert_notification" : { 6 | "title" : "Alpine Teleport Directive", 7 | "description" : "This element uses the AlpineJS teleport directive, which will teleport the Full-screen modal to be a child of the body element. This allows the modal to be full-screen and prevents any display issues with its parent elements." 8 | }, 9 | "additional" : { 10 | "description" : "

The first <button> element can be any button or element you choose as long as it has the @click="fullscreenModal=true" attribute it will work the same and show the full screen modal when it is clicked.

" 11 | } 12 | } -------------------------------------------------------------------------------- /elements/hover-card.html: -------------------------------------------------------------------------------- 1 |
24 | @thedevdojo 25 |
26 |
27 | devdojo image 28 |
29 |

@thedevdojo

30 |

The creative platform for developers. Community, tools, products, and more

31 |

32 | 33 | 34 | 35 | Joined June 2020 36 |

37 |
38 |
39 |
40 |
-------------------------------------------------------------------------------- /elements/hover-card.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "hoverCardHovered" : "A boolean value that will show or hide the card.", 4 | "hoverCardDelay" : "When the user hovers, how long (in milliseconds) should the hover card be shown", 5 | "hoverCardLeaveDelay" : "When the users mouse leaves, how long (in milliseconds) should the hover card be hidden", 6 | "hoverCardTimout" : "The timeout for the hover event, leave this set to null.", 7 | "hoverCardLeaveTimeout" : "The timeout for the mouse leave event, leave this set to null.", 8 | "hoverCardEnter()" : "The method that handles the hover event.", 9 | "hoverCardLeave()" : "The method that handles the mouse leave event." 10 | } 11 | } -------------------------------------------------------------------------------- /elements/image-gallery.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "imageGalleryOpened" : "A boolean value to determine if the image gallery is opened or closed.", 4 | "imageGalleryActiveUrl" : "The src URL of the image that is currently active.", 5 | "imageGalleryImageIndex" : "When the image gallery is initialized we'll add an data-index incrementor (1, 2, 3, ... etc.) to all the images in the gallery.", 6 | "imageGalleryOpen(event)" : "The method that can be called to open the image gallery.", 7 | "imageGalleryClose()" : "The method that can be called to close the image gallery.", 8 | "imageGalleryNext()" : "The method that will be called to load the next image in the gallery.", 9 | "imageGalleryPrev()" : "The method that will be called to load the previous image in the gallery." 10 | 11 | }, 12 | "alert_notification" : { 13 | "title" : "Alpine Teleport Directive", 14 | "description" : "This element uses the AlpineJS teleport directive, which will teleport the Image Gallery to be a child of the body element. This allows the gallery to be full-screen and prevents any display issues with its parent elements." 15 | }, 16 | "additional" : { 17 | "description" : "

Adding or removing your own images is as simple as adding or removing the <li><img src='...' /></li> elements inside of the image gallery element (this is the same element that contains the x-ref="gallery" reference).

" 18 | } 19 | } -------------------------------------------------------------------------------- /elements/marquee-additional.html: -------------------------------------------------------------------------------- 1 |
2 |

Tailwind Config

3 |

To implement the `animate-marquee` class from your tailwind config, add the code below to your tailwind.config.js

4 | 
module.exports = {
 5 |     theme: {
 6 |         extend: {
 7 |             // Add custom keyframes
 8 |             keyframes: {
 9 |                 marquee: {
10 |                     '0%': {
11 |                         transform: 'translateX(0)'
12 |                     },
13 |                     '100%': {
14 |                         transform: 'translateX(-100%)'
15 |                     },
16 |                 },
17 |             },
18 |             // Add custom animations
19 |             animation: {
20 |                 'marquee': 'marquee 20s linear infinite',
21 |             },
22 |         },
23 |     },
24 |     plugins: [],
25 | }
26 |
-------------------------------------------------------------------------------- /elements/marquee-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
2 |
9 |
10 |
11 |
12 |
13 |
14 |
This is a continuous marquee example
15 | 16 | 17 |
18 |
19 |
20 |
21 |
28 |
29 |
30 |
31 |
32 |
33 |
This is a continuous marquee example
34 | 35 | 36 |
37 |
38 |
39 |
40 |
41 | 42 | 71 | 72 | -------------------------------------------------------------------------------- /elements/marquee.json: -------------------------------------------------------------------------------- 1 | { 2 | "alert_notification" : { 3 | "title" : "Custom CSS", 4 | "description" : "This element uses some custom CSS. If you wish to include the `marquee` animation in your tailwind.config.js, use the config from the code below." 5 | } 6 | } -------------------------------------------------------------------------------- /elements/menubar.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "menuBarOpen" : "A boolean value that signifies whether the menu bar is opened or closed.", 4 | "menuBarMenu" : "The menu bar that is currently opened. (example: 'file', 'edit', etc.)" 5 | }, 6 | "alert_notification" : { 7 | "title" : "Create your own menu", 8 | "description" : "You can define your own menu by duplicating one of the existing menus and changing the name. You can then add your own menu items." 9 | } 10 | } -------------------------------------------------------------------------------- /elements/modal-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
4 | 5 | 40 |
-------------------------------------------------------------------------------- /elements/modal-examples/example-02.html: -------------------------------------------------------------------------------- 1 |
4 | 5 | 40 |
-------------------------------------------------------------------------------- /elements/modal.html: -------------------------------------------------------------------------------- 1 |
4 | 5 | 36 |
-------------------------------------------------------------------------------- /elements/modal.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "modalOpen" : "A boolean value that will toggle the modal open or close." 4 | }, 5 | "alert_notification" : { 6 | "title" : "Alpine Teleport Directive", 7 | "description" : "This element uses the AlpineJS teleport directive, which will teleport the Modal element to be a child of the body element. This allows the modal to be full-screen and prevents any display issues with its parent elements." 8 | } 9 | } -------------------------------------------------------------------------------- /elements/monaco-editor.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "monacoContent" : "The initial value inside of the editor", 4 | "monacoLanguage" : "The language that should be used for syntax highlighting", 5 | "monacoPlaceholder" : "Specify whether or not you want a placeholder in the editor when there is not code in the editor", 6 | "monacoPlaceholderText" : "The placeholder text to be used inside of the editor when no code is present", 7 | "monacoLoader" : "This is used to show a loading indicator before the editor has been initialized and ready", 8 | "monacoFontSize" : "The font size to be used inside of the editor (may need to adjust the placeholder when changing this)", 9 | "monacoId" : "Used to add a unique ID to this element, allowing you to have multiple editors on the same page", 10 | "monacoEditor(editor)" : "This is the method that you can use to add your Monaco Events (learn more below)", 11 | "updatePlaceholder(value)" : "This method is used to update the placeholder text inside of the editor", 12 | "monacoEditorFocus" : "This method is used to focus the editor", 13 | "monacoEditorAddLoaderScriptToHead" : "This method is used to add the monaco editor loader script to the head of the document" 14 | }, 15 | "alert_notification" : { 16 | "title" : "Monaco Editor Library", 17 | "description" : "This element uses the Monaco Editor, You can add events and listeners for the editor object inside of the monacoEditor(editor) method." 18 | }, 19 | "additional" : { 20 | "description" : "

Inside of the x-init method, after the editor is loaded, you'll find a variable definition like so: monacoTheme = {}, you can change the theme by adding your own or including it from the monaco themes repo here. View a demo of all the available themes here.

" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /elements/navigation-menu.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "navigationMenuOpen" : "A boolean value that signifies whether the menu is opened or closed.", 4 | "navigationMenu" : "The menu that is currently opened. (example: 'getting-started', 'learn-more', etc.)", 5 | "navigationMenuCloseDelay" : "The delay in milliseconds before the menu closes after the mouse leaves the menu.", 6 | "navigationMenuCloseTimeout" : "The timeout for the menu mouse leave event, leave this set to null.", 7 | "navigationMenuLeave()" : "This method will trigger the menu to close after the mouse leaves.", 8 | "navigationMenuReposition(navElement)" : "This method will position the menu to be centered aligned to the navigation item that is hovered.", 9 | "navigationMenuClearCloseTimeout()" : "This method will clear the close timeout for the menu. This might occur if the user hovers back over a navigation item.", 10 | "navigationMenuClose()" : "This method will close the menu by setting navigationMenuOpen to false, and clearing the value of navigationMenu." 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /elements/pagination-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
2 |

Showing 1 to 10 of 89 results

3 | 52 |
-------------------------------------------------------------------------------- /elements/pagination.html: -------------------------------------------------------------------------------- 1 |
2 |

Showing 1 to 10 of 89 results

3 | 58 |
-------------------------------------------------------------------------------- /elements/popover.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "popoverOpen" : "A boolean value that will toggle the popover open or close.", 4 | "popoverArrow": "A boolean value that will show or hide the popover arrow", 5 | "popoverPosition" : "A value that will indicate whether the popover should be at the bottom or top.", 6 | "popoverHeight" : "The height of the popover. This will be calculated on initialize.", 7 | "popoverOffset" : "An offset value in pixels that will be applied to the popover position.", 8 | "popoverHeightCalculate()" : "A method that will calculate the height of the popover.", 9 | "popoverPositionCalculate()" : "A method that will calculate whether the popover should be at top or bottom." 10 | }, 11 | "alert_notification" : { 12 | "title" : "Alpine Focus Plugin", 13 | "description" : "This element uses the AlpineJS focus plug-in, which will trap the focus inside the popover when opened and return focus to the trigger when closed." 14 | } 15 | } -------------------------------------------------------------------------------- /elements/progress-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
14 | 15 |
-------------------------------------------------------------------------------- /elements/progress.html: -------------------------------------------------------------------------------- 1 |
14 | 15 |
-------------------------------------------------------------------------------- /elements/progress.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "progress" : "The progress percentage of the progress bar", 4 | "progressInterval" : "The interval of the progress bar, will be cleared after reaching 100%" 5 | } 6 | } -------------------------------------------------------------------------------- /elements/quotes.html: -------------------------------------------------------------------------------- 1 |
2 | 5 | 6 |
7 |

8 | These are some of the sleekest looking designs built for Alpine and Tailwind. I will definitely be using these in my next project. 9 |

10 |
11 | 12 | 23 |
24 | -------------------------------------------------------------------------------- /elements/radio-group.html: -------------------------------------------------------------------------------- 1 |
21 | 30 |
-------------------------------------------------------------------------------- /elements/radio-group.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "radioGroupSelectedValue" : "The value of the current selected radio button.", 4 | "radioGroupOptions": "An array of radio group options containing the title, description, and value." 5 | } 6 | } -------------------------------------------------------------------------------- /elements/range-slider.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /elements/rating-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
42 |
43 |
Rated
44 | 52 | 55 |
56 |
57 | -------------------------------------------------------------------------------- /elements/rating-examples/example-02.html: -------------------------------------------------------------------------------- 1 |
42 |
43 |
Rated Stars
44 | 52 | 56 |
57 |
58 | -------------------------------------------------------------------------------- /elements/rating.html: -------------------------------------------------------------------------------- 1 |
42 |
43 |
Rated Stars
44 | 52 | 56 |
57 |
58 | -------------------------------------------------------------------------------- /elements/rating.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "disabled" : "Indicates whether the rating functionality is disabled. If true, user interactions are ignored.", 4 | "max_stars" : "The maximum number of stars available for rating.", 5 | "stars": "The current number of stars selected by the user during the rating process.", 6 | "value" : "The final rating value that is set when the user clicks on a star.", 7 | "hoverStar(star)" : "Updates the stars property to reflect the star being hovered, unless the rating is disabled.", 8 | "mouseLeftStar()" : "Resets the stars to the current value during mouseleave event, unless the rating is disabled.", 9 | "rate(star)" : "Sets the stars and value to the selected star when clicked, and shows a temporary rating message.", 10 | "reset()" : "Resets both stars and value to 0, allowing the user to start the rating process over." 11 | } 12 | } -------------------------------------------------------------------------------- /elements/retro-grid-examples/example-01.html: -------------------------------------------------------------------------------- 1 | 29 |
30 |

Retro-Grid

31 | 32 |
33 |
34 |
35 |
36 |
37 |
38 |
-------------------------------------------------------------------------------- /elements/retro-grid.html: -------------------------------------------------------------------------------- 1 | 29 |
30 |

Retro-Grid

31 | 32 |
33 |
34 |
35 |
36 |
37 |
38 |
-------------------------------------------------------------------------------- /elements/retro-grid.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "angle" : "The angle of the retro grid, which is the degree that the grid is tilted." 4 | } 5 | } -------------------------------------------------------------------------------- /elements/select.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "selectOpen" : "A boolean value that will determine if the select dropdown is open or not", 4 | "selectedItem" : "The current selected item. This will hold the object of the selected item where you can get the title and value", 5 | "selectableItems": "An array containing an objects of selectable items. Each object should have a title, value, and disabled property", 6 | "selectableItemActive" : "This value contains an active item. An item is considered active when it is hovered or highlighted via the keyboard", 7 | "selectId" : "Each select element in your project will contain a unique ID, this will contain the unique ID", 8 | "selectKeydownValue" : "When the select element is focused and the user enters a key, the closest matching item will be selected", 9 | "selectKeydownTimeout" : "The timeout in milliseconds to clear the keydown value. (example: If a user types 'a', and waits two seconds and types 'b', we should search for an item starting with 'b', instead of 'ab')", 10 | "selectDropdownPosition" : "The positioning of the dropdown. Possible values are 'bottom' or 'top'", 11 | "selectKeydownClearTimeout" : "The timeout interval for the keydown value to be cleared", 12 | "selectableItemIsActive(item)" : "A method that will check if the item passed in is the current active item", 13 | "selectableItemActiveNext()" : "A method that will set the next item as active", 14 | "selectableItemActivePrevious()" : "A method that will set the previous item as active", 15 | "selectScrollToActiveItem()" : "A method that will scroll the active item into view", 16 | "selectKeydown(event)" : "This method will handle the keydown event on the select element", 17 | "selectItemsFindBestMatch()" : "This method will find the best matching item based on the keydown value", 18 | "selectPositionUpdate()" : "This method will calculate the position of the element and determine if selectDropdownPosition should be set to 'bottom or 'top'" 19 | } 20 | } -------------------------------------------------------------------------------- /elements/slide-over-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
5 | 6 | 49 |
50 | 51 | -------------------------------------------------------------------------------- /elements/slide-over.html: -------------------------------------------------------------------------------- 1 |
5 | 6 | 49 |
50 | 51 | -------------------------------------------------------------------------------- /elements/slide-over.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "slideOverOpen" : "A boolean value that will open or close the slide-over" 4 | } 5 | } -------------------------------------------------------------------------------- /elements/switch-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 13 | 14 | 20 |
-------------------------------------------------------------------------------- /elements/switch.html: -------------------------------------------------------------------------------- 1 |
2 | 3 | 4 | 13 | 14 | 20 |
-------------------------------------------------------------------------------- /elements/switch.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "switchOn" : "A boolean value that will toggle the switch on or off (active or inactive)" 4 | } 5 | } -------------------------------------------------------------------------------- /elements/table-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | 30 | 31 | 32 | 33 | 34 | 35 | 38 | 39 | 40 | 41 | 42 | 43 | 46 | 47 | 48 | 49 | 50 | 51 | 54 | 55 | 56 |
NameAgeAddressAction
Richard Hendricks30Pied Piper HQ, Palo Alto 20 | Edit 21 |
Erlich Bachman405230 Penfield Ave, Woodland Hills 28 | Edit 29 |
Monica Hall352030 Stewart Drive, Sunnyvale 36 | Edit 37 |
Dinesh Chugtai28Pied Piper HQ, Palo Alto 44 | Edit 45 |
Gilfoyle32Pied Piper HQ, Palo Alto 52 | Edit 53 |
57 |
58 |
59 |
60 |
-------------------------------------------------------------------------------- /elements/table-examples/example-02.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 23 | 24 | 25 | 26 | 27 | 28 | 31 | 32 | 33 | 34 | 35 | 36 | 39 | 40 | 41 | 42 | 43 | 44 | 47 | 48 | 49 | 50 | 51 | 52 | 55 | 56 | 57 |
NameAgeAddressAction
Richard Hendricks30Pied Piper HQ, Palo Alto 21 | Edit 22 |
Erlich Bachman405230 Penfield Ave, Woodland Hills 29 | Edit 30 |
Monica Hall352030 Stewart Drive, Sunnyvale 37 | Edit 38 |
Dinesh Chugtai28Pied Piper HQ, Palo Alto 45 | Edit 46 |
Gilfoyle32Pied Piper HQ, Palo Alto 53 | Edit 54 |
58 |
59 |
60 |
61 |
62 |
-------------------------------------------------------------------------------- /elements/table-of-contents.html: -------------------------------------------------------------------------------- 1 |
53 | 54 |
55 |

Table of Contents

56 | 57 | 61 |
62 | 63 |
-------------------------------------------------------------------------------- /elements/table.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 |
5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | 30 | 31 | 32 | 33 | 34 | 35 | 38 | 39 | 40 | 41 | 42 | 43 | 46 | 47 | 48 | 49 | 50 | 51 | 54 | 55 | 56 |
NameAgeAddressAction
Richard Hendricks30Pied Piper HQ, Palo Alto 20 | Edit 21 |
Erlich Bachman405230 Penfield Ave, Woodland Hills 28 | Edit 29 |
Monica Hall352030 Stewart Drive, Sunnyvale 36 | Edit 37 |
Dinesh Chugtai28Pied Piper HQ, Palo Alto 44 | Edit 45 |
Gilfoyle32Pied Piper HQ, Palo Alto 52 | Edit 53 |
57 |
58 |
59 |
60 |
-------------------------------------------------------------------------------- /elements/tabs-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
24 | 25 |
26 | 27 | 28 | 29 |
30 |
31 |
32 | 33 |
34 | This is the content shown for Tab1 35 |
36 | 37 |
38 | And, this is the content for Tab2 39 |
40 | 41 |
42 | Finally, this is the content for Tab3 43 |
44 | 45 |
46 |
-------------------------------------------------------------------------------- /elements/tabs.html: -------------------------------------------------------------------------------- 1 |
20 | 21 |
22 | 23 | 24 |
25 |
26 |
27 |
28 | 29 |
30 |
31 |

Account

32 |

Make changes to your account here. Click save when you're done.

33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 | 41 |
42 | 43 |
44 | 45 |
46 |
47 |

Password

48 |

Change your password here. After saving, you'll be logged out.

49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 | 57 |
58 | 59 |
60 |
-------------------------------------------------------------------------------- /elements/tabs.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "tabSelected" : "The index value of the currently selected tab. (starts at 1, not 0)", 4 | "tabId": "This is a unique ID that will be applied to the tab element. You can keep this as is or change it to something more meaningful.", 5 | "tabButtonClicked(tabButton)" : "A method that will be called when a tab button is clicked. The tab button element will be passed as a parameter.", 6 | "tabRepositionMarker(tabButton)" : "This method will reposition the tab marker.", 7 | "tabContentActive(tabContent)" : "This method will return true or false if the tab content is active. The tab content element should be passed as a parameter." 8 | }, 9 | "alert_notification" : { 10 | "title" : "Adding your own tabs and content", 11 | "description" : "To add your own buttons, you will need to add a button inside the x-ref=\"tabButtons\" element. More info below on how to implement new buttons and content." 12 | }, 13 | "additional" : { 14 | "description" : "

Each tab button needs to contain the following attributes :id=\"$id(tabId)\" @click=\"tabButtonClicked($el)\". Each button will sequentially show or hide any content element with the following attributes :id=\"$id(tabId + '-content')\" x-show=\"tabContentActive($el)\". See example one below for a simple demo of this functionality.

" 15 | } 16 | } -------------------------------------------------------------------------------- /elements/text-animation-examples/example-01.html: -------------------------------------------------------------------------------- 1 |

40 | Pines UI Library 41 |

-------------------------------------------------------------------------------- /elements/text-animation-examples/example-02.html: -------------------------------------------------------------------------------- 1 |

40 | Pines UI Library 41 |

-------------------------------------------------------------------------------- /elements/text-animation.html: -------------------------------------------------------------------------------- 1 |

39 | Pines UI Library 40 |

-------------------------------------------------------------------------------- /elements/text-animation.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "startingAnimation" : "An object containing the starting position of each character in the text. Text will be animated from this position to the ending position.", 4 | "endingAnimation" : "An object containing the ending position of each character in the text.", 5 | "addCNDScript" : "A boolean value, if set to true it will append the GSAP library to the page if it is not already loaded.", 6 | "animateText()" : "This method will play the text animation.", 7 | "splitCharactersIntoSpans(element)" : "This method will split all the characters into individual spans, allowing each character to be animated individually.", 8 | "addScriptToHead(url)" : "This method will append the GSAP library to the head of the page." 9 | }, 10 | "alert_notification" : { 11 | "title" : "GSAP Library", 12 | "description" : "This element makes use of the GSAP plugin. It will automatically be added if addCNDScript is set to true. If GSAP is already loaded on your page, you can set addCNDScript to false and the library will not be added to your page." 13 | }, 14 | "additional" : { 15 | "description" : "

Learn more about the startingAnimation and endingAnimation objects by referring to the gsap.fromTo() documentation.

" 16 | } 17 | } -------------------------------------------------------------------------------- /elements/text-input.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /elements/textarea-auto-resize-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
2 | 14 |
15 |
-------------------------------------------------------------------------------- /elements/textarea-auto-resize.html: -------------------------------------------------------------------------------- 1 |
2 | 14 |
-------------------------------------------------------------------------------- /elements/textarea-auto-resize.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "resize()" : "This is the method that will resize the textarea. It is called on initialization and every time the content in the textarea is updated." 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /elements/textarea-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 |
-------------------------------------------------------------------------------- /elements/textarea.html: -------------------------------------------------------------------------------- 1 |
2 | 3 |
-------------------------------------------------------------------------------- /elements/toast.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "toasts[]" : "An array of toast objects (see toast object below)", 4 | "toastsHovered": "When the toasts are hovered, this will be sent to true.", 5 | "expanded" : "A boolean value that indicates whether or not the toasts are expanded", 6 | "layout" : "You can choose the 'default' layout or have them 'expanded' by default", 7 | "position": "The position of the toast notifications", 8 | "paddingBetweenToasts": "When expanded the padding to add between the toasts", 9 | "deleteToastWithId(id)": "Delete a toast with the given id", 10 | "burnToast(id)": "This method will add the exit animation to the last toast and delete it", 11 | "getToastWithId(id)": "Get the toast with the given id", 12 | "stackToasts()" : "Stack the toasts on top of each other", 13 | "positionToasts()" : "Position the toasts based on their index and the current layout", 14 | "alignBottom()" : "Align element2 to be at the bottom of element1", 15 | "alignTop()" : "Align element2 to be at the top of element1", 16 | "resetBottom()" : "Reset all toasts to bottom of 0px", 17 | "resetTop()" : "Reset all toasts to top of 0px", 18 | "getBottomPositionOfElement(el)": "Get the bottom position of the given element", 19 | "calculateHeightOfToastsContainer()": "Calculate the height of the toasts container", 20 | "@set-toasts-layout.window": "This is an event listener to change the layout of the toasts", 21 | "@toast-show.window": "This is an event listener to show a toast notification" 22 | }, 23 | "alert_notification" : { 24 | "title" : "Usage", 25 | "description" : "

Copy the code from inside the <template x-teleport=\"body\">..</template> tags and add it to your project. You may want to add the window.toast global function to your site to make it easily pop a toast('Message'). This global function is located inside the x-init method on the root element.

" 26 | }, 27 | "additional" : { 28 | "description" : "Here is the default structure of a toast object:

When using the toast() global function you can create a simple toast with the following syntax: toast('Message') or you can pass in an object to create a more complex toast: toast('Message', {type: 'success', description: 'short description', position: 'top-right', html: ''})

" 29 | } 30 | } -------------------------------------------------------------------------------- /elements/tooltip-examples/example-01.html: -------------------------------------------------------------------------------- 1 |
10 | 11 |
12 |
13 |

14 |
15 |
16 |
17 |
18 |
19 | 20 |
hover me
21 | 22 |
-------------------------------------------------------------------------------- /elements/tooltip-examples/example-02.html: -------------------------------------------------------------------------------- 1 |
10 | 11 |
12 |
20 |

21 |
22 |
23 |
24 |
25 |
26 | 27 |
hover me
28 | 29 |
-------------------------------------------------------------------------------- /elements/tooltip.html: -------------------------------------------------------------------------------- 1 |
10 | 11 |
12 |
13 |

14 |
15 |
16 |
17 |
18 |
19 | 20 |
hover me
21 | 22 |
-------------------------------------------------------------------------------- /elements/tooltip.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "tooltipVisible" : "A boolean value that will show or hide the tooltip.", 4 | "tooltipText": "The text inside the tooltip.", 5 | "tooltipArrow" : "A boolean value that indicates whether or not to show the tooltip arrow.", 6 | "tooltipPosition" : "The position to display the tooltip. This value can be 'top', 'right', 'bottom', or 'left'." 7 | }, 8 | "alert_notification" : { 9 | "title" : "Create a Tooltip Plugin", 10 | "description" : "This specific element would be easier to re-use in your applications if it were converted into its own plugin. Here's a guide that will show you how to convert this element into it's own plugin." 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /elements/typing-effect.html: -------------------------------------------------------------------------------- 1 |
67 |
68 |

69 | 70 |
71 |
-------------------------------------------------------------------------------- /elements/typing-effect.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "text" : "This is the variable that contains the current string being displayed.", 4 | "textArray": "An array of strings to be typed on the screen.", 5 | "textIndex" : "This variable is used to keep track of which string in the textArray is currently being displayed.", 6 | "charIndex" : "This is used to keep track of the current character index that is being typed onto the screen.", 7 | "typeSpeed" : "In milliseconds, this is the speed that each character will be typed onto the screen.", 8 | "cursorSpeed" : "In milliseconds, this is the speed that the cursor will blink on and off.", 9 | "pauseEnd" : "In milliseconds, this is the time that the typing will pause after the string has been typed onto the screen.", 10 | "pauseStart" : "In milliseconds, this is the time that the typing will pause before each new string begins typing onto the screen.", 11 | "direction" : "This is the direction that the typing will occur. The options are 'forward' or 'backward'." 12 | }, 13 | "alert_notification" : { 14 | "title" : "Typing Effect Tutorial", 15 | "description" : "If you want to learn more about how this functions, you may be interested in our extensive tutorial on how to Create a Typing Effect in AlpineJS." 16 | } 17 | } -------------------------------------------------------------------------------- /elements/video.json: -------------------------------------------------------------------------------- 1 | { 2 | "data" : { 3 | "sources" : "The video sources for the video player. This includes the .mp4, .webm, and .ogg file to support all browsers.", 4 | "playing": "A boolean value that will indicate whether the video is currently playing or not.", 5 | "controls" : "A boolean value to show or hide the controls on the video player.", 6 | "muted" : "A boolean value that will mute or unmute the video player.", 7 | "fullscreen" : "A boolean value that will toggle the video to fullscreen.", 8 | "ended" : "A boolean value that will indicate whether the video has ended or not.", 9 | "mouseleave" : "A boolean value that will indicate whether or not the users mouse has left the video player.", 10 | "autoHideControlsDelay": "Delay in milliseconds before the controls will hide.", 11 | "controlsHideTimeout" : "The timeout interval event for hiding the controls.", 12 | "poster" : "The poster image for the video player.", 13 | "videoDuration" : "The total duration of the current video", 14 | "timeDurationString": "The duration of the video in '00:00' format", 15 | "timeElapsedString": "The time elapsed of the video in '00:00' format", 16 | "showTime" : "A boolean value that will indicate whether the time should be shown or not.", 17 | "volume" : "The current volume of the video player.", 18 | "volumeBeforeMute" : "We need to store the volume before we mute the video player so that we can unmute it to the correct volume.", 19 | "videoPlayerReady" : "A boolean value that will indicate whether the video player is ready to play or not.", 20 | "timelineSeek(e)" : "A function that will seek to a specific time in the video.", 21 | "metaDataLoaded(event)" : "A function that will be called when the video meta data has loaded.", 22 | "togglePlay(e)" : "A function that will toggle the video player between playing and paused.", 23 | "toggleMute()" : "A function that will toggle the video player between muted and unmuted.", 24 | "timeUpdatedInterval()" : "An interval method that will continuously be called as the video is playing.", 25 | "updateVolume(e)" : "A function that will update the volume of the video player.", 26 | "timelineClicked(e)" : "A function that will seek to a specific time in the video when the timeline is clicked.", 27 | "handleFullscreen()" : "A function that will set document.fullscreenElement or exit the fullscreen.", 28 | "mousemoveVideo()" : "A function that will fire when a mouse move event is triggered over the video.", 29 | "videoEnded()" : "A function that will fire when the video has ended.", 30 | "resetControlsTimeout()" : "A function that will reset the controls timeout.", 31 | "formatTime(timeInSeconds)" : "A function that will convert `seconds` to minutes and seconds" 32 | } 33 | } -------------------------------------------------------------------------------- /getting-started/contribution.html: -------------------------------------------------------------------------------- 1 |
2 |

Contribution

3 |
4 |

You may contribute to this project by visiting the GitHub Repo here. We currently do not have issues open, so you'll need to submit a PR with your contribution and we'll get to the PR as soon as we can.

5 |

If you wish to discuss functionality or any issues you have with Pines, you can visit the DevDojo Discussions/Questions section.

6 | 7 |
8 | 9 |
Star the Repo
10 |
If you want to see this project grow, it would help us out if you starred the repo and shared it with your friends.
11 |
12 | 13 |

Thanks for all your support with this project and we look forward to hearing your feedback.

14 | 15 |
16 | 17 |

Local Installation

18 | 19 |

Visit the main repo for the Pines UI Library. This repo is simple to setup and get running on your local if you wish to submit a fix or make some additions to the library.

20 | 21 |
    22 |
  1. Download the contents of the GitHub repo and store it in a folder.
    2. 23 |
  2. Make sure you have NodeJS installed along with the http-server package.
    3. 24 |
  3. CD into your folder and run `http-serve`
    4. 25 |
  4. Visit the localhost URL to see PinesUI
    5. 26 |
27 | 28 |

The installation instructions are also available via the GitHub repo at https://github.com/thedevdojo/pines

29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Pines UI Library 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 |

Getting Started

20 | 25 |

Elements

26 | 27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | /** 2 | * When the document is ready check to see if we are on an element or getting started page. 3 | * If we are on an element or getting started page, load the content from the HTML file. 4 | * If not, load the list of elements and getting started items from the JSON file. 5 | */ 6 | document.addEventListener('DOMContentLoaded', function() { 7 | let element = getQueryParameter('element'); 8 | const start = getQueryParameter('start'); 9 | if(element || start){ 10 | document.getElementById('list').remove(); 11 | 12 | load_file('./data.json', function(text){ 13 | let data = JSON.parse(text); 14 | let folderLocation = (element) ? 'elements' : 'getting-started'; 15 | let file = (element) ? element : start; 16 | if(element){ 17 | 18 | if(element.includes('-examples')){ 19 | element = element.replace('-examples', '').split('/')[0]; 20 | } 21 | document.getElementById('content').className = data.container[element]; 22 | } else { 23 | document.getElementById('content').className = 'max-w-3xl p-10 prose'; 24 | } 25 | load_file('./' + folderLocation + '/' + file + '.html', function(text){ 26 | document.getElementById('content').innerHTML = text; 27 | document.body.style = ''; 28 | }); 29 | }); 30 | } else { 31 | document.getElementById('content').remove(); 32 | load_file('./data.json', function(text){ 33 | let data = JSON.parse(text); 34 | addItemsToList(data.elements, document.getElementById('elements'), 'element', data.examples); 35 | addItemsToList(data.start, document.getElementById('gettingStarted'), 'start'); 36 | 37 | // for(let i=0; i < data.examples.length; i++){ 38 | 39 | // } 40 | 41 | document.body.style = ''; 42 | }); 43 | } 44 | }); 45 | 46 | 47 | /** 48 | * Get the value of a query parameter from the URL. ?element=accordion or ?start=introduction, etc. 49 | */ 50 | function getQueryParameter(parameter){ 51 | const queryString = window.location.search; 52 | const urlParams = new URLSearchParams(queryString); 53 | const element = urlParams.get(parameter); 54 | return element; 55 | } 56 | 57 | 58 | /** 59 | * Add element and getting started items from the JSON file to the html list 60 | */ 61 | function addItemsToList(myObject, myList, param, examples = null){ 62 | for (const key in myObject) { 63 | const listItem = document.createElement('li'); 64 | const link = document.createElement('a'); 65 | link.className = 'text-blue-500 underline'; 66 | link.href = '?' + param + '=' + key; 67 | link.textContent = myObject[key]; 68 | 69 | listItem.appendChild(link); 70 | 71 | if(examples){ 72 | if(examples[key]){ 73 | let exampleList = document.createElement('ul'); 74 | exampleList.classList.add('list-disc', 'pl-4'); 75 | let exampleFiles = examples[key]; 76 | for(let i=0; i < exampleFiles.length; i++){ 77 | let exampleListItem = document.createElement('li'); 78 | let exampleLink = document.createElement('a'); 79 | exampleLink.className = 'text-blue-500 underline'; 80 | exampleLink.href = '?' + param + '=' + key + '-examples/example-' + exampleFiles[i]; 81 | exampleLink.textContent = 'Example ' + exampleFiles[i]; 82 | 83 | exampleListItem.appendChild(exampleLink); 84 | exampleList.appendChild(exampleListItem); 85 | 86 | } 87 | 88 | listItem.appendChild(exampleList); 89 | } 90 | } 91 | 92 | myList.appendChild(listItem); 93 | 94 | } 95 | } 96 | 97 | 98 | /** 99 | * Load the contents of a file using the Fetch API and passes it to a callback function. 100 | */ 101 | function get_element(filename, callback) { 102 | fetch(filename).then(response => response.text()).then(text => callback(text)); 103 | } 104 | 105 | /** 106 | * Load the contents of a file using the Fetch API and passes it to a callback function. 107 | */ 108 | function load_file(filename, callback) { 109 | fetch(filename).then(response => response.text()).then(text => callback(text)); 110 | } 111 | 112 | 113 | /** 114 | * Format lowercase string to title case. 115 | */ 116 | function formatString(str) { 117 | let formattedStr = str.replace(/-/g, ' '); 118 | formattedStr = formattedStr.replace(/\b\w/g, (match) => match.toUpperCase()); 119 | return formattedStr; 120 | } --------------------------------------------------------------------------------