├── .github ├── ISSUE_TEMPLATE.md └── README.md ├── .gitignore ├── .vscodeignore ├── CHANGELOG.md ├── CONTRIBUTING.md ├── LICENSE.md ├── README.md ├── images └── icon.png ├── package-lock.json ├── package.json ├── promo └── demo.gif └── snippets ├── javascript.json └── snippets.code-snippets /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | - [ ] Check that you are running the latest version of Visual Studio Code 17 | - [ ] Check that you are running the latest version of the `UIKit 3.0 Snippets` plugin: (1.4.3) 18 | - [ ] Check that the `UIKit 3.0 Snippets` extension is enabled 19 | - [ ] Check that your editor suggestions are enabled (or manually trigger them with Ctrl + Space) 20 | 21 | ### Problem Encountered 22 | 23 | 24 | 25 | ### Steps to Reproduce 26 | 27 | 1. Step 1 ... 28 | 2. Step 2 ... 29 | 30 | -------------------------------------------------------------------------------- /.github/README.md: -------------------------------------------------------------------------------- 1 | # UIKit 3.0 Snippets for Visual Studio Code 2 | 3 | [![Version](https://vsmarketplacebadges.dev/version-short/Keno.uikit-3-snippets.svg 4 | )](https://marketplace.visualstudio.com/items?itemName=Keno.uikit-3-snippets) 5 | [![Installs](https://vsmarketplacebadges.dev/installs-short/Keno.uikit-3-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=Keno.uikit-3-snippets) 6 | [![Ratings](https://vsmarketplacebadges.dev/rating-short/Keno.uikit-3-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=Keno.uikit-3-snippets) 7 | 8 | ![](../promo/demo.gif) 9 | 10 | [📃 View the Changelog](https://github.com/dons20/UIKit-VSCode/blob/master/CHANGELOG.md) to see what's new! 11 | 12 | --- 13 | 14 | ## Introduction 15 | 16 | This extension adds all the snippets from [UIKit 3.0](https://getuikit.com/docs/introduction) into Visual Studio Code for easy access and usage. 17 | 18 | To show support for the project, you can do any of the following: 19 | 20 | - [Rate the extension on the marketplace](https://marketplace.visualstudio.com/items?itemName=Keno.uikit-3-snippets) 21 | - [Star the repository](https://github.com/dons20/UIKit-VSCode) 22 | 23 | > Please remember to direct your issues, queries and suggestions to the [issues page](https://github.com/dons20/UIKit-VSCode/issues) of the repository. 24 | 25 | _Please note: While effort is made to make the snippets easy to use without documentation, some components are too complex to provide comprehensive descriptions/snippets so be sure to check the [official documentation](https://getuikit.com/docs/)!_ 26 | 27 | Thank You! 28 | 29 | ## Setup 30 | 31 | #### Method 1 32 | 33 | 1. Go to Extensions by pressing Ctrl-Shift-X (Windows/Linux) or Cmd-Shift-X (Mac) 34 | 2. Search for UIKit 3.0 Snippets 35 | 3. Click on Install 36 | 4. Reload your editor and you're good to go! 37 | 38 | #### Method 2 39 | 40 | 1. With Visual Studio Code opened, press `Ctrl+P`. 41 | 2. Type in `ext install uikit-3-snippets` and press `Enter`. 42 | 43 | ## Table of Contents 44 | 45 |

46 |

Reveal Table of Contents

47 |

63 |

Reveal List of Commands (HTML5/PHP)

64 |

148 |

149 | 150 | - [List of Commands (Javascript)](#list-of-commands-javascript) 151 | 152 |

153 |

Reveal List of Commands (Javascript)

154 |

190 |

191 | 192 |

193 |

194 | 195 | ## Usage 196 | 197 | To use the snippets, open a HTML file, and start typing `uk-` (optionally followed by `Ctrl+Space` depending on user settings). A list of UIKit snippets will show up. 198 | Each snippet has a short and simple description to aid with understanding its use. 199 | For more details and even better examples and possible options, [head to the UIKit Documentation](https://getuikit.com/docs/introduction) 200 | 201 | A detailed list of supported commands are listed below in the [**List of Commands**](#list-of-commands-htmlphp) section. 202 | 203 | ## Contribution Guidelines 204 | 205 | [Read the contribution guidelines](/CONTRIBUTING.md) 206 | 207 | ## Changelog 208 | 209 | [View the changelog](/CHANGELOG.md) 210 | 211 | ## License 212 | 213 | UIKit 3.0 Snippets - Visual Studio Code plugin is licensed under the [MIT License](http://opensource.org/licenses/MIT) 214 | 215 | ## References 216 | 217 | [Readme layout inspiration](https://github.com/1tontech/bootstrap4-snippets/tree/master/vscode) 218 | 219 | [UIKit Snippets Original Source](https://getuikit.com/docs/introduction) 220 | 221 | ## List of Commands (HTML/PHP) 222 | 223 |

224 |

Click to Reveal List of Commands (HTML/PHP)

225 |

226 | 227 | ### UIKit Master Template 228 |

Reveal Content

229 |

230 | 231 | | Trigger | Description | 232 | |---------------------------|------------------------------------------------| 233 | | uk-\$ | Creates a basic UIKit template | 234 | | uk-\$-css-import | Imports a chosen minified css file for UIKit | 235 | | uk-\$-js-import | Imports the default minified scripts for UIKit | 236 | | uk-\$-js-component-import | Imports a selected js component file for UIKit | 237 | 238 |

239 |

240 | 241 | ### Accordion 242 | 243 |

Reveal Content

244 |

245 | 246 | | Trigger | Description | 247 | |----------------------------|-----------------------------------------------------------------------| 248 | | uk-accordion | [Attribute] Used to create an accordion element in a parent container | 249 | | uk-accordion-sample | Creates a sample Accordion component | 250 | | uk-accordion-no-collapse | Accordion that always keeps one item open | 251 | | uk-accordion-multiple-open | Accordion that allows multiple items to be opened at once | 252 | | uk-accordion-open-index | Accordion that opens an item by default | 253 | 254 |

255 |

256 | 257 | ### Alert 258 | 259 |

Reveal Content

260 |

261 | 262 | | Trigger | Description | 263 | |------------------|----------------------------------------------------------------| 264 | | uk-alert | [Attribute] Used to create an alert element in a block element | 265 | | uk-alert-default | A default alert applied to a div | 266 | | uk-alert-close | An alert with a close button | 267 | | uk-alert-styled | An alert with a chosen style applied | 268 | 269 |

270 |

271 | 272 | ### Alignment 273 | 274 |

Reveal Content

275 |

276 | 277 | | Trigger | Description | 278 | |---------------------|---------------------------------------------------| 279 | | uk-align | [Class] Floats the element to a selected position | 280 | | uk-align-responsive | [Class] Floats the element on specific widths | 281 | 282 |

283 |

284 | 285 | ### Animation 286 | 287 |

Reveal Content

288 |

289 | 290 | | Trigger | Description | 291 | |-------------------------------|--------------------------------------------------------------------------| 292 | | uk-animation-fade | [Class] The element fades in | 293 | | uk-animation-scale | [Class] The element fades in and scales up or down | 294 | | uk-animation-slide | [Class] The element fades in and slides in from a chosen direction | 295 | | uk-animation-slide-custom | [Class] The element slides in with a specific distance | 296 | | uk-animation-kenburns | [Class] The element scales slowly up without fading in | 297 | | uk-animation-shake | [Class] The element shakes | 298 | | uk-animation-stroke | [Class] The SVG element strokes are drawn | 299 | | uk-animation-stroke-svg | Easier usage of svg stroke animations | 300 | | uk-animation-reverse | [Class] The element's animation plays in reverse | 301 | | uk-animation-fast | [Class] The element's animation plays at a faster speed | 302 | | uk-animation-transform-origin | [Class] The element scales in from a different direction | 303 | | uk-animation-toggle | [Class] Added to a parent element to toggle animations on hover or focus | 304 | 305 |

306 |

307 | 308 | ### Article 309 | 310 |

Reveal Content

311 |

312 | 313 | | Trigger | Description | 314 | |-------------------|---------------------------------------------| 315 | | uk-article-basic | A basic article layout | 316 | | uk-article-sample | A complete sample article with placeholders | 317 | 318 |

319 |

320 | 321 | ### Background 322 | 323 |

Reveal Content

324 |

325 | 326 | | Trigger | Description | 327 | |--------------------------------|---------------------------------------------------------------------| 328 | | uk-background-color | [Class] Applies the selected background color | 329 | | uk-background-size | [Class] Scales the background image to a selected size | 330 | | uk-background-position | [Class] Alters the initial position of the background iamge | 331 | | uk-background-norepeat | [Class] Prevents the background image from being repeated | 332 | | uk-background-fixed | [Class] Locks the image in place while scrolling | 333 | | uk-background-image-responsive | [Class] Shows the background image on widths of chosen size upwards | 334 | | uk-background-blend | [Class] Applies a chosen blend mode to the background image | 335 | 336 |

337 |

338 | 339 | ### Badge 340 | 341 |

Reveal Content

342 |

343 | 344 | | Trigger | Description | 345 | |-----------------|------------------------------------------------------------------| 346 | | uk-badge | [Class] Used to create a notification badge in an inline element | 347 | | uk-badge-span | Creates a simple notification badge span | 348 | | uk-badge-anchor | Creates a simple notification badge anchor | 349 | 350 |

351 |

352 | 353 | ### Breadcrumb 354 | 355 |

Reveal Content

356 |

357 | 358 | | Trigger | Description | 359 | |--------------------|------------------------------------------| 360 | | uk-breadcrumb | [Class] Used to create a breadcrumb list | 361 | | uk-breadcrumb-list | Creates a default breadcrumb list | 362 | 363 |

364 |

365 | 366 | ### Button 367 | 368 |

Reveal Content

369 |

370 | 371 | | Trigger | Description | 372 | |--------------------------|------------------------------------------------------------| 373 | | uk-button-anchor | Creates an anchor with a button style | 374 | | uk-button-styled | Creates a button with a chosen style | 375 | | uk-button-disabled | Creates a disabled button | 376 | | uk-button-size | Creates a button with a selected size | 377 | | uk-button-dropdown | Creates a button that toggles a dropdown menu | 378 | | uk-button-group | Creates a group of buttons | 379 | | uk-button-group-dropdown | Creates a button group with a dropdown toggle on the right | 380 | 381 |

382 |

383 | 384 | ### Card 385 | 386 |

Reveal Content

387 |

388 | 389 | | Trigger | Description | 390 | |-----------------------|------------------------------------------------------------------------------| 391 | | uk-card-styled | Creates a card with a chosen style | 392 | | uk-card-secondary | Creates a card with a secondary style | 393 | | uk-card-hover | Creates a card with a hover effect | 394 | | uk-card-small | Creates a card with reduced padding | 395 | | uk-card-large | Creates a card with increased padding | 396 | | uk-card-header-footer | Creates a card divided into three sections | 397 | | uk-card-media | Displays an image inside a card without any spacing | 398 | | uk-card-horizontal | Creates a card with a horizontal layout (Ideal for media-left & media-right) | 399 | | uk-card-badge | Creates a card with a styled badge inside | 400 | 401 |

402 |

403 | 404 | ### Close 405 | 406 |

Reveal Content

407 |

408 | 409 | | Trigger | Description | 410 | |-----------------------|-------------------------------------------| 411 | | uk-close | [Attribute] Used to create a close button | 412 | | uk-close-button | Creates a close button | 413 | | uk-close-button-large | Creates a larger close button | 414 | 415 |

416 |

417 | 418 | ### Column 419 | 420 |

Reveal Content

421 |

422 | 423 | | Trigger | Description | 424 | |----------------------|---------------------------------------------------------------------------------------| 425 | | uk-column | [Class] Displays the inline content in multiple columns | 426 | | uk-column-responsive | [Class] Displays the inline content in multiple columns on specific width breakpoints | 427 | | uk-column-divider | [Class] Displays the inline content in multiple columns seperated by dividers | 428 | | uk-column-span | Creates a column with an inline element that spans each column | 429 | 430 |

431 |

432 | 433 | ### Comment 434 | 435 |

Reveal Content

436 |

437 | 438 | | Trigger | Description | 439 | |--------------------|------------------------------------------------------| 440 | | uk-comment-default | Creates a standard comment layout | 441 | | uk-comment-primary | Creates a highlighted comment with a standard layout | 442 | | uk-comment-list | Creates a nestable list of comments | 443 | 444 |

445 |

446 | 447 | ### Container 448 | 449 |

Reveal Content

450 |

451 | 452 | | Trigger | Description | 453 | |----------------------|---------------------------------------------| 454 | | uk-container | [Class] Used to create a centered container | 455 | | uk-container-default | Creates a centered container | 456 | | uk-container-size | Creates a container with varying size | 457 | 458 |

459 |

460 | 461 | ### Countdown 462 | 463 |

Reveal Content

464 |

465 | 466 | | Trigger | Description | 467 | |------------------------|--------------------------------------------------------------------------| 468 | | uk-countdown | [Attribute] Used to create a countdown timer | 469 | | uk-countdown-sample | Creates a countdown timer. Date is in the format: YYYY-MM-DDThh:mm:ssTZD | 470 | | uk-countdown-separator | Creates a countdown timer with each number separated by a colon | 471 | | uk-countdown-label | Used to add a label to each number on the countdown timer | 472 | 473 |

474 |

475 | 476 | ### Cover 477 | 478 |

Reveal Content

479 |

480 | 481 | | Trigger | Description | 482 | |-------------------------------|-------------------------------------------------------------| 483 | | uk-cover-container | Creates an image that covers its parent element | 484 | | uk-cover-container-video | Creates a video that covers its parent element | 485 | | uk-cover-container-iframe | Creates an iframe that covers its parent element | 486 | | uk-cover-container-responsive | Creates an element that scales responsively with its parent | 487 | 488 |

489 |

490 | 491 | ### Description List 492 | 493 |

Reveal Content

494 |

495 | 496 | | Trigger | Description | 497 | |-----------------------------|--------------------------------------------------------------------------| 498 | | uk-description-list | [Class] Used to create a description list | 499 | | uk-description-list-sample | Creates a sample list to display terms and descriptions below each other | 500 | | uk-description-list-divider | Creates a divided description list | 501 | 502 |

503 |

504 | 505 | ### Disabled 506 | 507 |

Reveal Content

508 |

509 | 510 | | Trigger | Description | 511 | |-------------|----------------------------------------| 512 | | uk-disabled | [Class] Disables an item within a list | 513 | 514 |

515 |

516 | 517 | ### Divider 518 | 519 |

Reveal Content

520 |

521 | 522 | | Trigger | Description | 523 | |---------------------|-------------------------------------| 524 | | uk-divider-icon | Creates a divider with a decoration | 525 | | uk-divider-small | Creates a smaller divider | 526 | | uk-divider-vertical | Creates a vertical divider | 527 | 528 |

529 |

530 | 531 | ### Dotnav 532 | 533 |

Reveal Content

534 |

535 | 536 | | Trigger | Description | 537 | |-----------------------------|--------------------------------------------------------| 538 | | uk-dotnav | Creates a navigation list with dots | 539 | | uk-dotnav-vertical | Creates a vertical navigation list with dots | 540 | | uk-dotnav-overlay | Creates a dotnav as an overlay for an element | 541 | | uk-dotnav-centered-viewport | Creates a dotnav centered vertically and aligned right | 542 | 543 |

544 |

545 | 546 | ### Drop 547 | 548 |

Reveal Content

549 |

550 | 551 | | Trigger | Description | 552 | |--------------------------|-------------------------------------------------------------| 553 | | uk-drop | [Attribute] Used to create a drop component | 554 | | uk-drop-basic | Creates a basic drop component | 555 | | uk-drop-example | Creates two example drops with different modes | 556 | | uk-drop-grid | Creates a drop with a grid inside | 557 | | uk-drop-position | Creates a drop with its alignment adjusted | 558 | | uk-drop-boundary | Creates a drop with a predetermined element as its boundary | 559 | | uk-drop-boundary-aligned | Creates a drop aligned to its boundary | 560 | | uk-drop-offset | Creates a drop with an offset | 561 | | uk-drop-animated | Creates a drop with an offset | 562 | 563 |

564 |

565 | 566 | ### Dropdown 567 | 568 |

Reveal Content

569 |

570 | 571 | | Trigger | Description | 572 | |------------------------------|------------------------------------------------------------------------| 573 | | uk-dropdown | [Attribute] Used to create a dropdown in a block element such as a div | 574 | | uk-dropbar-basic | Creates a basic dropbar example | 575 | | uk-dropbar-direction | Creates a dropbar that appears from the chosen direction | 576 | | uk-dropbar-large | Creates a dropbar that appears from the chosen direction | 577 | | uk-dropdown-basic | Creates a basic dropdown underneath a button toggle | 578 | | uk-dropdown-basic-inline | Creates a basic dropdown grouped with its toggle | 579 | | uk-dropdown-nav | Creates a dropdown containing a nav element | 580 | | uk-dropdown-grid | Creates a dropdown containing a grid | 581 | | uk-dropdown-position | Creates a dropdown with its alignment adjusted | 582 | | uk-dropdown-boundary | Determines a parent element as the dropdown's boundary | 583 | | uk-dropdown-boundary-aligned | Aligns the dropdown to the parent's boundary | 584 | | uk-dropdown-offset | Defines a custom offset for the dropdown | 585 | | uk-dropdown-animated | Applies one or more animations to the dropdown | 586 | 587 |

588 |

589 | 590 | ### Filter 591 | 592 |

Reveal Content

593 |

594 | 595 | | Trigger | Description | 596 | |----------------------|-----------------------------------------------------------| 597 | | uk-filter | [Attribute] Used to create a filter component | 598 | | uk-filter-sample | Used to filter or sort items in any given layout | 599 | | uk-filter-animations | Used to change the animation style from the default slide | 600 | 601 |

602 |

603 | 604 | ### Flex 605 | 606 |

Reveal Content

607 |

608 | 609 | | Trigger | Description | 610 | |-----------------------------------------|-----------------------------------------------------------------------------------| 611 | | uk-flex | [Class] Used to apply a flexbox layout model to an element | 612 | | uk-flex-block | Creates a flex container and behaves like a block element | 613 | | uk-flex-inline | Creates a flex container and behaves like an inline element | 614 | | uk-flex-horizontal-alignment | Defines the horizontal alignment of flex items and distributes space between them | 615 | | uk-flex-horizontal-alignment-responsive | Defines the horizontal alignment of flex items on specific device widths | 616 | | uk-flex-vertical-alignment | Defines the vertical alignment of flex items and distributes space between them | 617 | | uk-flex-direction | Defines the axis that flex items are placed on and their direction | 618 | | uk-flex-wrap-modifier | Defines the axis that flex items are placed on and their direction | 619 | | uk-flex-item-order | [Class] Displays an item as the first or last one (Add to item) | 620 | | uk-flex-item-dimensions | [Class] Determines how much space a flex item should take up (Add to item) | 621 | | uk-flex-grid-example | Creates a sample flex with a grid inside | 622 | 623 |

624 |

625 | 626 | ### Form 627 | 628 |

Reveal Content

629 |

630 | 631 | | Trigger | Description | 632 | |-------------------------|------------------------------------------------------------------------------------------------------------------| 633 | | uk-form-sample | Creates a sample form with all elements as reference | 634 | | uk-form-fieldset | Creates a fieldset for a form | 635 | | uk-form-legend | Creates a legend for a form | 636 | | uk-form-states | [Class] Applies a custom state to a form control | 637 | | uk-form-disabled | Disables a form control | 638 | | uk-form-sizes | Modifies the size of an input, select or textarea | 639 | | uk-form-width-modifiers | Modifies the width of an input, select or textarea | 640 | | uk-form-blank | Minimizes the styling of form controls | 641 | | uk-form-stacked | Stacks labels and controls on top of each other | 642 | | uk-form-horizontal | Aligns labels and controls horizontally (use uk-form-controls-text to better align checkboxes and radio buttons) | 643 | | uk-form-icon | Creates a form control with an icon inside to the left (or right with flip class) | 644 | | uk-form-icon-click | Creates a form icon that can be clicked | 645 | | uk-form-grid-example | Creates a form defined by a grid layout | 646 | | uk-form-custom-control | Replaces a file input or select form with your own HTML content | 647 | 648 |

649 |

650 | 651 | ### Grid 652 | 653 |

Reveal Content

654 |

655 | 656 | | Trigger | Description | 657 | |-------------------------|---------------------------------------------------------------| 658 | | uk-grid | [Attribute] Used to create a grid container inside a div | 659 | | uk-grid-stacked | Creates a basic stacked grid container | 660 | | uk-grid-expanded | Creates an expanded grid container with elements side by side | 661 | | uk-grid-gutter-modifier | Modifies the spacing between grid items | 662 | | uk-grid-nested-sample | Creates a sample nested grid | 663 | | uk-grid-divided | Seperates each grid cell with lines | 664 | | uk-grid-match-height | Matches the height of all grid cells | 665 | | uk-grid-match-cell | [Class] Matches the height of a grid cell | 666 | | uk-grid-width | Manually determines the column widths | 667 | | uk-grid-flex | Combines a grid element with flex | 668 | | uk-grid-masonry | Allows grid items of different heights to fit seamlessly | 669 | | uk-grid-parallax | Used to add a scrolling effect to columns within a grid | 670 | 671 |

672 |

673 | 674 | ### Heading 675 | 676 |

Reveal Content

677 |

678 | 679 | | Trigger | Description | 680 | |---------------------------|------------------------------------------------------------------| 681 | | uk-heading-primary | [Class] Used to create a heading with a specified size | 682 | | uk-heading-primary-sample | Creates a heading with a specified size | 683 | | uk-heading-divider | [Class] Used to create a heading with a divider underneath | 684 | | uk-heading-divider-sample | Creates a heading with a divider underneath | 685 | | uk-heading-bullet | [Class] Used to create a heading used in a list | 686 | | uk-heading-bullet-sample | Creates a heading as part of a list | 687 | | uk-heading-line | [Class] Used to create a heading with a vertically centered line | 688 | | uk-heading-line-sample | Creates a heading with a vertically centered line | 689 | 690 |

691 |

692 | 693 | ### Height 694 | 695 |

Reveal Content

696 |

697 | 698 | | Trigger | Description | 699 | |--------------------------|-----------------------------------------------------------------------------------| 700 | | uk-height | [Class] Modifies the height of an element to 100%/150px/300px/450px respectively. | 701 | | uk-max-height | [Class] Modifies the max-height of an element to 150px/300px/450px respectively. | 702 | | uk-viewport-height | [Attribute] Modifies the height of an element to fill the entire viewport. | 703 | | uk-viewport-height-class | [Class] Modifies the height of an element to have specified minimum heights | 704 | | uk-match-height | [Attribute] Expands all children of a container to the same height. | 705 | | uk-match-height-specific | [Attribute] Matches the height of specific child elements | 706 | | uk-match-height-all | [Attribute] Matches the height of all child elements even in other rows | 707 | 708 |

709 |

710 | 711 | ### Icon 712 | 713 |

Reveal Content

714 |

715 | 716 | | Trigger | Description | 717 | |-------------------------|-------------------------------------------------------------------------------------------| 718 | | uk-icon-span | Creates an icon within a span. (List of Icons Here: https://getuikit.com/docs/icon) | 719 | | uk-icon-link | Creates an icon within a link. (List of Icons Here: https://getuikit.com/docs/icon) | 720 | | uk-icon-ratio | Modifies the size of the icon by the ratio | 721 | | uk-icon-link-modifier | Resets the default link styling to a more muted color when using an icon inside an anchor | 722 | | uk-icon-button-modifier | Creates an icon button | 723 | | uk-icon-image-modifier | Scales a background image to the size of an icon | 724 | 725 |

726 |

727 | 728 | ### Iconnav 729 | 730 |

Reveal Content

731 |

732 | 733 | | Trigger | Description | 734 | |-----------------------|---------------------------------------------------------| 735 | | uk-iconnav | [Class] Used to create a navigation consisting of icons | 736 | | uk-iconnav-horizontal | Creates a navigation consisting of icons | 737 | | uk-iconnav-vertical | Creates a vertical navigation consisting of icons | 738 | 739 |

740 |

741 | 742 | ### Image 743 | 744 |

Reveal Content

745 |

746 | 747 | | Trigger | Description | 748 | |---------------|---------------------------------------------------------------------------| 749 | | uk-img | [Attribute] Lazy-load images on any element with ease | 750 | | uk-img-sample | Creates a basic lazy-loaded image component | 751 | | uk-img-custom | Creates an element with lazy-load applied | 752 | | uk-img-target | Creates an image component which triggers on another element's visibility | 753 | 754 |

755 |

756 | 757 | ### Inverse 758 | 759 |

Reveal Content

760 |

761 | 762 | | Trigger | Description | 763 | |------------------|-----------------------------------------------------------------------------------------| 764 | | uk-light | [Class] Used to improve the visibility of objects on light backgrounds in a light style | 765 | | uk-inverse-light | Improves the visibility of objects on dark backgrounds in a light style | 766 | | uk-dark | [Class] Used to improve the visibility of objects on light backgrounds in a dark style | 767 | | uk-inverse-dark | Improves the visibility of objects on light backgrounds in a dark style | 768 | 769 |

770 |

771 | 772 | ### Label 773 | 774 |

Reveal Content

775 |

776 | 777 | | Trigger | Description | 778 | |------------------|--------------------------------------------------| 779 | | uk-label | [Class] Used to create a label in a span element | 780 | | uk-label-default | Creates a label with a default style | 781 | | uk-label-success | Creates a label with a success style | 782 | | uk-label-warning | Creates a label with a warning style | 783 | | uk-label-danger | Creates a label with a danger style | 784 | 785 |

786 |

787 | 788 | ### Leader 789 | 790 |

Reveal Content

791 |

792 | 793 | | Trigger | Description | 794 | |------------------|--------------------------------------------------------------------| 795 | | uk-leader | [Attribute] Visually connects horizontal items with a line of dots | 796 | | uk-leader-sample | Creates a sample leader component | 797 | 798 |

799 |

800 | 801 | ### Lightbox 802 | 803 |

Reveal Content

804 |

805 | 806 | | Trigger | Description | 807 | |-------------------------------|--------------------------------------------------------------------------| 808 | | uk-lightbox | [Attribute] Turns all the anchors inside a container into lightbox links | 809 | | uk-lightbox-basic | Creates a lightbox container with an anchor inside | 810 | | uk-lightbox-caption | Creates a lightbox container with a caption at the bottom | 811 | | uk-lightbox-animation | Creates a lightbox container with a modified transition animation | 812 | | uk-lightbox-alternate-content | Creates a lightbox container with multiple content types | 813 | 814 |

815 |

816 | 817 | ### Link 818 | 819 |

Reveal Content

820 |

821 | 822 | | Trigger | Description | 823 | |-----------------|-----------------------------------------------------------------------------------------| 824 | | uk-link-muted | Creates a link with a muted style | 825 | | uk-link-text | Creates a link with a body text style | 826 | | uk-link-heading | Creates a link with a heading style | 827 | | uk-link-reset | Creates a link that inherits its color from its parent | 828 | | uk-link-toggle | Creates a link on the parent element and applies a link style to one of its child nodes | 829 | 830 |

831 |

832 | 833 | ### List 834 | 835 |

Reveal Content

836 |

837 | 838 | | Trigger | Description | 839 | |--------------------------|---------------------------------------------------------------------------------------------| 840 | | uk-list | [Class] Used to create a basic ordered or unordered list | 841 | | uk-list-basic | Creates a basic ordered or unordered list | 842 | | uk-list-bullet-modifier | Creates a bulleted list | 843 | | uk-list-divider-modifier | Creates a divided list | 844 | | uk-list-striped-modifier | Creates a striped list | 845 | | uk-list-large-modifier | Creates a list with increased spacing between items. Can be combined with other list styles | 846 | 847 |

848 |

849 | 850 | ### Margin 851 | 852 |

Reveal Content

853 |

854 | 855 | | Trigger | Description | 856 | |---------------------------|-----------------------------------------------------------------------------------------------| 857 | | uk-margin | [Class] Adds top margin, if it is preceded by another element, and always bottom margin | 858 | | uk-margin-position | [Class] Adds the selected margin to that side | 859 | | uk-margin-size | [Class] Adds a margin of chosen size | 860 | | uk-margin-size-position | [Class] Adds a margin of chosen size to the chosen side | 861 | | uk-margin-remove | [Class] Removes all margins | 862 | | uk-margin-remove-position | [Class] Removes the margin the chosen side(s) | 863 | | uk-margin-auto | [Class] Sets left and right margins to auto, centering block and flex elements | 864 | | uk-margin-auto-position | [Class] Sets the selected margin to auto, pushing block and flex elements to the opposite end | 865 | | uk-margin-dynamic-sample | Automatically adds spacing to stacking elements with the uk-margin attribute | 866 | 867 |

868 |

869 | 870 | ### Marker 871 | 872 |

Reveal Content

873 |

874 | 875 | | Trigger | Description | 876 | |-----------|---------------------------------------------------------------------------------| 877 | | uk-marker | [Attribute] Used to create a marker icon that can be displayed on top of images | 878 | 879 |

880 |

881 | 882 | ### Modal 883 | 884 |

Reveal Content

885 |

886 | 887 | | Trigger | Description | 888 | |-----------------------------|-------------------------------------------------------------| 889 | | uk-modal | [Attribute] Used to create a modal | 890 | | uk-modal-sample | Creates a modal with a button toggle | 891 | | uk-modal-close-default | Creates a modal with close button inside | 892 | | uk-modal-close-outside | Creates a modal with close button outside | 893 | | uk-modal-center | Creates a centered modal using the parameter 'center' | 894 | | uk-modal-header-footer | Creates a modal divided into different content sections | 895 | | uk-modal-caption | Creates a modal with a caption outside of it | 896 | | uk-modal-container-modifier | Creates a modal that expands to the default container width | 897 | | uk-modal-full-modifier | Creates a modal that fills the entire page | 898 | 899 |

900 |

901 | 902 | ### Nav 903 | 904 |

Reveal Content

905 |

906 | 907 | | Trigger | Description | 908 | |--------------------------------|-----------------------------------------------------------------------| 909 | | uk-nav | [Class] Used to create a nav with optional styling | 910 | | uk-nav-default | Creates a nav with default styling | 911 | | uk-nav-nested | Creates a nested nav with default styling | 912 | | uk-nav-accordion | Creates an accordion-styled nav with icons for parents | 913 | | uk-nav-accordion-multiple-open | Creates an accordion nav that can have multiple sub-navs open at once | 914 | | uk-nav-header | Creates a nav header | 915 | | uk-nav-divider | Creates a nav divider | 916 | | uk-nav-primary | Creates a nav with emphasized styling | 917 | | uk-nav-center | Creates a centered nav | 918 | | uk-nav-divider-modifier | Creates a nav that separates nav items with lines | 919 | | uk-nav-dropdown | Creates a nav in a dropdown | 920 | | uk-nav-navbar | Creates a nav in a navbar | 921 | 922 |

923 |

924 | 925 | ### Navbar 926 | 927 |

Reveal Content

928 |

929 | 930 | | Trigger | Description | 931 | |-------------------------------------|---------------------------------------------------------------------------------| 932 | | uk-navbar | [Attribute] Used to create a navigation bar | 933 | | uk-navbar-sample | Creates a primary navigation bar | 934 | | uk-navbar-multiple | Creates multiple navigations inside the navbar container | 935 | | uk-navbar-click | Creates a primary navigation bar that is toggled with a click | 936 | | uk-navbar-transparent | Creates a transparent navigation bar | 937 | | uk-navbar-subtitle | Creates a subtitle for a navbar item | 938 | | uk-navbar-custom-content | Creates a navbar which can hold custom items (text, icons, buttons, forms) | 939 | | uk-navbar-centered-logo | Creates a navbar with a centered logo | 940 | | uk-navbar-toggle-item | Creates a navbar with an icon as a toggle | 941 | | uk-navbar-dropdown | Creates a navbar with a dropdown component | 942 | | uk-navbar-dropdown-multiple-columns | Creates a navbar dropdown with multiple columns | 943 | | uk-navbar-dropdown-boundary-align | Creates a navbar with dropdowns aligned to the navbar boundary | 944 | | uk-navbar-dropdown-justify | Creates a navbar with dropdowns justified | 945 | | uk-navbar-dropbar | Creates a navbar with dropdowns justified | 946 | | uk-navbar-dropbar-push | Creates a navbar with a dropdown that pushes page content down to fit the space | 947 | 948 |

949 |

950 | 951 | ### Notification 952 | 953 |

Reveal Content

954 |

955 | 956 | | Trigger | Description | 957 | |------------------------------|--------------------------------------------------| 958 | | uk-notification-example | Creates a notification example using javascript | 959 | | uk-notification-html-message | Creates a notification with html content | 960 | | uk-notification-position | Creates a notification with an adjusted position | 961 | | uk-notification-style | Creates a styled notification | 962 | | uk-notification-close-all | Closes all notifications | 963 | 964 |

965 |

966 | 967 | ### Offcanvas 968 | 969 |

Reveal Content

970 |

971 | 972 | | Trigger | Description | 973 | |-----------------------------|-----------------------------------------------------------------------| 974 | | uk-offcanvas | [Attribute] Used to create an off-canvas | 975 | | uk-offcanvas-sample | Creates a basic off-canvas | 976 | | uk-offcanvas-overlay | Creates an off-canvas that adds an overlay to the page | 977 | | uk-offcanvas-flip-modifier | Creates an off-canvas that slides in from the right | 978 | | uk-offcanvas-animation-mode | Creates an off-canvas with a modified animation mode for its entrance | 979 | | uk-offcanvas-nav | Creates an off-canvas containing a nav component | 980 | 981 |

982 |

983 | 984 | ### Overlay 985 | 986 |

Reveal Content

987 |

988 | 989 | | Trigger | Description | 990 | |--------------------------|--------------------------------------------------------| 991 | | uk-overlay | [Class] Used to create a basic image overlay | 992 | | uk-overlay-basic | Creates a basic image overlay at a modifiable position | 993 | | uk-overlay-style-default | Creates an image overlay with a default style | 994 | | uk-overlay-style-primary | Creates an image overlay with a primary style | 995 | | uk-overlay-icon | Creates an image overlay icon | 996 | 997 |

998 |

999 | 1000 | ### Padding 1001 | 1002 |

Reveal Content

1003 |

1004 | 1005 | | Trigger | Description | 1006 | |----------------------------|---------------------------------------------------------------| 1007 | | uk-padding | [Class] Adds default padding to the element | 1008 | | uk-padding-size | [Class] Adds a smaller or larger padding to the element | 1009 | | uk-padding-remove | [Class] Removes all padding from an element | 1010 | | uk-padding-remove-position | [Class] Removes padding from the chosen side(s) of an element | 1011 | 1012 |

1013 |

1014 | 1015 | ### Pagination 1016 | 1017 |

Reveal Content

1018 |

1019 | 1020 | | Trigger | Description | 1021 | |-----------------------------|-------------------------------------------------------------------------| 1022 | | uk-pagination | [Class] Used to create a simple pagination for navigation through pages | 1023 | | uk-pagination-basic | Creates a simple pagination for navigation through pages | 1024 | | uk-pagination-alignment | Creates a simple pagination aligned with flex | 1025 | | uk-pagination-previous-next | Creates a previous and next button inside of a pagination | 1026 | 1027 |

1028 |

1029 | 1030 | ### Parallax 1031 | 1032 |

Reveal Content

1033 |

1034 | 1035 | | Trigger | Description | 1036 | |----------------------------|----------------------------------------------------------------------------------------------------------| 1037 | | uk-parallax | [Attribute] Used to animate CSS properties depending on the scroll position of the document | 1038 | | uk-parallax-properties | [Attribute] Inserts the parallax attribute with a list of animatable properties | 1039 | | uk-parallax-start-end | [Attribute] Sets the start and end values of a property by seperating them with a comma | 1040 | | uk-parallax-multiple-stops | [Attribute] Sets multiple animation stops by seperating them with a comma | 1041 | | uk-parallax-viewport | [Attribute] Defines how far inside the viewport the element is scrolled until the animation is completed | 1042 | | uk-parallax-sample | Creates a sample div with parallax enabled | 1043 | | uk-parallax-nested-sample | Showcases nested parallax elements | 1044 | | uk-parallax-target-sample | Creates a parallax animation based on the viewport visibility of another element | 1045 | | uk-parallax-easing-sample | Creates a parallax element with a modifiable easing value | 1046 | | uk-parallax-color-sample | Creates a parallax element with a color transition | 1047 | | uk-parallax-filter-sample | Creates a parallax element with css filters | 1048 | 1049 |

1050 |

1051 | 1052 | ### Placeholder 1053 | 1054 |

Reveal Content

1055 |

1056 | 1057 | | Trigger | Description | 1058 | |-----------------------|--------------------------------------------| 1059 | | uk-placeholder | [Class] Used to create a placeholder space | 1060 | | uk-placeholder-sample | Creates a placeholder space | 1061 | 1062 |

1063 |

1064 | 1065 | ### Position 1066 | 1067 |

Reveal Content

1068 |

1069 | 1070 | | Trigger | Description | 1071 | |------------------------------|-------------------------------------------------------------------------------------------------------| 1072 | | uk-position | [Class] Positions the element at the chosen location | 1073 | | uk-position-extended | [Class] Positions the element at specific locations without it being spread over its parent container | 1074 | | uk-position-cover | [Class] Positions the element to cover its container | 1075 | | uk-position-small | [Class] Positions the element at specific locations with a small margin | 1076 | | uk-position-medium | [Class] Positions the element at specific locations with a medium margin | 1077 | | uk-position-large | [Class] Positions the element at specific locations with a large margin | 1078 | | uk-position-relative | [Class] Positions the element at a relative position | 1079 | | uk-position-absolute | [Class] Positions the element at an absolute position | 1080 | | uk-position-fixed | [Class] Positions the element at a fixed position | 1081 | | uk-position-z-index | [Class] Positions the element at a z-index position of 1 | 1082 | | uk-position-z-index-negative | [Class] Positions the element at a z-index position of -1 | 1083 | 1084 |

1085 |

1086 | 1087 | ### Progress 1088 | 1089 |

Reveal Content

1090 |

1091 | 1092 | | Trigger | Description | 1093 | |--------------------|---------------------------------------| 1094 | | uk-progress | [Class] Used to create a progress bar | 1095 | | uk-progress-sample | Creates a progress bar | 1096 | 1097 |

1098 |

1099 | 1100 | ### Scroll 1101 | 1102 |

Reveal Content

1103 |

1104 | 1105 | | Trigger | Description | 1106 | |------------------|--------------------------------------------------------------------------------------------------| 1107 | | uk-scroll | [Attribute] Used to create a link that smooth scrolls to the targeted element with a matching id | 1108 | | uk-scroll-anchor | Creates a link that smooth scrolls to the targetted element with matching id | 1109 | 1110 |

1111 |

1112 | 1113 | ### Scrollspy 1114 | 1115 |

Reveal Content

1116 |

1117 | 1118 | | Trigger | Description | 1119 | |---------------------|-------------------------------------------------------------------------| 1120 | | uk-scrollspy | [Attribute] Used to add a scrollspy to an element | 1121 | | uk-scrollspy-sample | Adds the scrollspy attribute to an element and animates it when in view | 1122 | | uk-scrollspy-group | Adds the scrollspy attribute to an element and animates it when in view | 1123 | 1124 |

1125 |

1126 | 1127 | ### Search 1128 | 1129 |

Reveal Content

1130 |

1131 | 1132 | | Trigger | Description | 1133 | |-------------------------|-------------------------------------------------------| 1134 | | uk-search | [Class] Used to create a search bar | 1135 | | uk-search-default | Creates a search bar with default styling | 1136 | | uk-search-icon | Creates a search bar with a search icon to the left | 1137 | | uk-search-icon-flip | Creates a search bar with a search icon to the right | 1138 | | uk-search-icon-button | Creates a search bar with a clickable search icon | 1139 | | uk-search-large | Creates a larger search bar | 1140 | | uk-search-navbar | Creates a search bar that can be used within a navbar | 1141 | | uk-search-toggle | Creates a toggle using a search icon | 1142 | | uk-search-navbar-toggle | Creates a search icon toggle inside of a navbar | 1143 | 1144 |

1145 |

1146 | 1147 | ### Section 1148 | 1149 |

Reveal Content

1150 |

1151 | 1152 | | Trigger | Description | 1153 | |-----------------------------|---------------------------------------------------------------------| 1154 | | uk-section | [Class] Used to create a section with optional styling | 1155 | | uk-section-default | Creates a section with a default style | 1156 | | uk-section-muted | Creates a section with a muted style | 1157 | | uk-section-primary | Creates a section with a primary style | 1158 | | uk-section-secondary | Creates a section with a secondary style | 1159 | | uk-section-preserve-color | Creates a section that preserves the font colours of child elements | 1160 | | uk-section-size-modifier | Creates a section with modified padding applied | 1161 | | uk-section-overlap-modifier | Creates a section that applies a border image and a negative offset | 1162 | 1163 |

1164 |

1165 | 1166 | ### Slidenav 1167 | 1168 |

Reveal Content

1169 |

1170 | 1171 | | Trigger | Description | 1172 | |------------------------------|--------------------------------------------------------------------| 1173 | | uk-slidenav | Creates a previous and next button for flipping through slideshows | 1174 | | uk-slidenav-large | Creates a larger slidenav | 1175 | | uk-slidenav-position-overlay | Creates a slidenav positioned on top of an element | 1176 | | uk-slidenav-container | Displays a cojoint slidenav | 1177 | 1178 |

1179 |

1180 | 1181 | ### Slider 1182 | 1183 |

Reveal Content

1184 |

1185 | 1186 | | Trigger | Description | 1187 | |-------------------------------------|-----------------------------------------------------------------------------| 1188 | | uk-slider | [Attribute] Used to create a responsive carousel | 1189 | | uk-slider-sample | Creates a responsive carousel slider | 1190 | | uk-slider-container | [Class] Creates a responsive carousel slider | 1191 | | uk-slider-gutter | Creates a carousel slider with a gutter between items | 1192 | | uk-slider-center | Creates a carousel slider with centered items | 1193 | | uk-slider-autoplay | Creates a carousel slider with autoplay activated | 1194 | | uk-slider-finite | Creates a carousel slider with infinite scrolling disabled | 1195 | | uk-slider-sets | Creates a carousel slider which loops through a set of slides | 1196 | | uk-slider-navigation | Creates a carousel slider with navigation controls | 1197 | | uk-slider-navigation-outside | Creates a carousel slider with outer navigation controls | 1198 | | uk-slider-viewport-height | Creates a carousel slider which expands to fill the height of its container | 1199 | | uk-slider-content-overlay | Creates a carousel slider with content overlays added | 1200 | | uk-slider-content-parallax | Creates a carousel slider with a parallax effect on the content | 1201 | | uk-slider-content-transitions | Creates a carousel slider with transition effects added | 1202 | | uk-slider-content-transitions-hover | Creates a carousel slider with transition effects on mouse hover | 1203 | 1204 |

1205 |

1206 | 1207 | ### Slideshow 1208 | 1209 |

Reveal Content

1210 |

1211 | 1212 | | Trigger | Description | 1213 | |---------------------------------|-------------------------------------------------------------------------------------| 1214 | | uk-slideshow | [Attribute] Used to create a responsive slideshow with images and videos | 1215 | | uk-slideshow-sample | Creates a responsive slideshow with images and videos | 1216 | | uk-slideshow-animations | Creates a responsive slideshow with a modified transition animation | 1217 | | uk-slideshow-autoplay | Creates a responsive slideshow with autoplay enabled | 1218 | | uk-slideshow-infinite-scrolling | Creates a responsive slideshow with endless scrolling enabled (default) or disabled | 1219 | | uk-slideshow-ratio | Creates a responsive slideshow with a modified ratio | 1220 | | uk-slideshow-min-max-height | Creates a responsive slideshow with a minimum and/or maximum height | 1221 | 1222 |

1223 |

1224 | 1225 | ### Sortable 1226 | 1227 |

Reveal Content

1228 |

1229 | 1230 | | Trigger | Description | 1231 | |--------------------------|-------------------------------------------------------------------------------------| 1232 | | uk-sortable | [Attribute] Used to create a sortable, re-arrangable grid of elements | 1233 | | uk-sortable-sample | Creates a sortable, re-arrangable grid of elements | 1234 | | uk-sortable-handle | Creates a sortable list using a special handle button instead of the entire element | 1235 | | uk-sortable-group | Creates a sortable group that can interchange elements | 1236 | | uk-sortable-custom-class | Creates sortable that can apply multiple classes to items while being dragged | 1237 | 1238 |

1239 |

1240 | 1241 | ### Spinner 1242 | 1243 |

Reveal Content

1244 |

1245 | 1246 | | Trigger | Description | 1247 | |-------------------|--------------------------------------------------------| 1248 | | uk-spinner | [Attribute] Used to create an animated loading spinner | 1249 | | uk-spinner-sample | Creates an animated loading spinner | 1250 | 1251 |

1252 |

1253 | 1254 | ### Sticky 1255 | 1256 |

Reveal Content

1257 |

1258 | 1259 | | Trigger | Description | 1260 | |-------------------------|----------------------------------------------------------------------------------------------------| 1261 | | uk-sticky | [Attribute] Used to create an element that remains at the top of the viewport while scrolling down | 1262 | | uk-sticky-sample | Creates an element that remains at the top of the viewport while scrolling down | 1263 | | uk-sticky-offset | Creates a sticky element with a pixel offset from the top | 1264 | | uk-sticky-top | Creates a sticky element with a delay | 1265 | | uk-sticky-animation | Creates a sticky element with an animation when it reappears | 1266 | | uk-sticky-scroll-up | Creates a sticky element that shows only when scrolling up | 1267 | | uk-sticky-bottom | Creates a sticky element that is bound to a specific element | 1268 | | uk-sticky-responsive | Creates a sticky element that is only enabled on specified device widths and above | 1269 | | uk-sticky-overflow-flip | Creates an element that only flips the sticky position if the element is larger than the viewport. | 1270 | 1271 |

1272 |

1273 | 1274 | ### Subnav 1275 | 1276 |

Reveal Content

1277 |

1278 | 1279 | | Trigger | Description | 1280 | |--------------------|----------------------------------------------------------------------------| 1281 | | uk-subnav | [Class] Used to create a basic sub-navigation | 1282 | | uk-subnav-basic | Creates a basic sub-navigation with items wrapping into the next line | 1283 | | uk-subnav-divider | Creates a sub-navigation seperated with lines | 1284 | | uk-subnav-pill | Creates a sub-navigation that highlights the active item with a background | 1285 | | uk-subnav-dropdown | Creates a sub-navigation that contains a dropdown | 1286 | 1287 |

1288 |

1289 | 1290 | ### SVG 1291 | 1292 |

Reveal Content

1293 |

1294 | 1295 | | Trigger | Description | 1296 | |---------------|----------------------------------------------------| 1297 | | uk-svg | [Attribute] Used to apply svg formatting to images | 1298 | | uk-svg-sample | Adds an inline SVG element | 1299 | 1300 |

1301 |

1302 | 1303 | ### Switcher 1304 | 1305 |

Reveal Content

1306 |

1307 | 1308 | | Trigger | Description | 1309 | |---------------------------------|---------------------------------------------------------------------------------| 1310 | | uk-switcher | [Attribute] Used to create a switcher component | 1311 | | uk-switcher-basic | Creates a switcher that dynamically transitions through different content panes | 1312 | | uk-switcher-navigation | Creates a switcher with navigation controls within the content pane | 1313 | | uk-switcher-connect-containers | Creates a switcher that connects multiple content containers | 1314 | | uk-switcher-animation | Creates a switcher animates its transitions | 1315 | | uk-switcher-multiple-animations | Creates a switcher with multiple animations | 1316 | | uk-switcher-subnav | Creates a switcher combined with a subnav | 1317 | | uk-switcher-tab | Creates a switcher combined with a tab | 1318 | | uk-switcher-tab-vertical | Creates a switcher combined with a vertical tab | 1319 | | uk-switcher-button | Creates a switcher combined with a vertical tab | 1320 | | uk-switcher-nav | Creates a switcher combined with a vertical tab | 1321 | 1322 |

1323 |

1324 | 1325 | ### Tab 1326 | 1327 |

Reveal Content

1328 |

1329 | 1330 | | Trigger | Description | 1331 | |------------------|------------------------------------------------------| 1332 | | uk-tab | [Attribute] Used to create a basic tabbed navigation | 1333 | | uk-tab-basic | Creates a basic tabbed navigation | 1334 | | uk-tab-bottom | Creates a tab with items flipped to the bottom | 1335 | | uk-tab-vertical | Creates a tab with items aligned left or right | 1336 | | uk-tab-alignment | Creates a tab with items aligned left or right | 1337 | | uk-tab-dropdown | Creates a tab with a dropdown | 1338 | 1339 |

1340 |

1341 | 1342 | ### Table 1343 | 1344 |

Reveal Content

1345 |

1346 | 1347 | | Trigger | Description | 1348 | |-----------------------|--------------------------------------------------------------------------------------------| 1349 | | uk-table | [Class] Used to create a table | 1350 | | uk-table-sample | Creates a table without any styling | 1351 | | uk-table-divider | Creates a table with each row seperated by a divider | 1352 | | uk-table-hover | Creates a table with a hover state on table rows | 1353 | | uk-table-sizing | Creates a table of a selected size | 1354 | | uk-table-striped | Creates a table with zebra-striping on table rows | 1355 | | uk-table-justify | Creates a table with the outer padding of the first and last columns removed | 1356 | | uk-table-middle | Creates a table with center aligned elements | 1357 | | uk-table-responsive | Creates a table that provides a horizontal scrollbar on smaller device screens when needed | 1358 | | uk-table-column-width | Modifies the width of a table column | 1359 | 1360 |

1361 |

1362 | 1363 | ### Text 1364 | 1365 |

Reveal Content

1366 |

1367 | 1368 | | Trigger | Description | 1369 | |------------------------------|------------------------------------------------------------------------------| 1370 | | uk-text-default | [Class] Applies a default text style | 1371 | | uk-text-lead | [Class] Highlights text for subheadings and article subtitles | 1372 | | uk-text-meta | [Class] Text class for paragraphs with meta data about an article or similar | 1373 | | uk-text-size | [Class] Modifies the font size of text | 1374 | | uk-text-bold | [Class] Creates bold text | 1375 | | uk-text-transform | [Class] Transforms text characters into the chosen case | 1376 | | uk-text-decoration | [Class] Removes any text decoration from a link | 1377 | | uk-text-color | [Class] Modifies the color of text into the chosen color scheme | 1378 | | uk-text-alignment | [Class] Aligns text to a chosen position | 1379 | | uk-text-alignment-responsive | [Class] Aligns text to a chosen position on specific screen widths | 1380 | | uk-text-vertical-alignment | [Class] Aligns text vertically | 1381 | | uk-text-wrapping | [Class] Wraps text according to your choice | 1382 | 1383 |

1384 |

1385 | 1386 | ### Thumbnav 1387 | 1388 |

Reveal Content

1389 |

1390 | 1391 | | Trigger | Description | 1392 | |----------------------|-------------------------------------------------| 1393 | | uk-thumbnav | [Class] Used to create a thumbnail navigation | 1394 | | uk-thumbnav-sample | Creates a flexible thumbnail navigation | 1395 | | uk-thumbnav-vertical | Creates a vertical thumbnav | 1396 | | uk-thumbnav-overlay | Creates a thumbnav as an overlay for an element | 1397 | 1398 |

1399 |

1400 | 1401 | ### Tile 1402 | 1403 |

Reveal Content

1404 |

1405 | 1406 | | Trigger | Description | 1407 | |-----------------------|-----------------------------------------------------------------| 1408 | | uk-tile | [Class] Used to create a tile with optional styling | 1409 | | uk-tile-size-modifier | [Class] Used to create a tile with modified sizing | 1410 | | uk-tile-default | Creates a tile with a default style | 1411 | | uk-tile-muted | Creates a tile with a muted style | 1412 | | uk-tile-primary | Creates a tile with a primary style | 1413 | | uk-tile-secondary | Creates a tile with a secondary style | 1414 | | uk-tile-padding | Creates a tile with modified padding from the padding component | 1415 | 1416 |

1417 |

1418 | 1419 | ### Toggle 1420 | 1421 |

Reveal Content

1422 |

1423 | 1424 | | Trigger | Description | 1425 | |-------------------------------|--------------------------------------------------------------------| 1426 | | uk-toggle | [Attribute] Used to create a toggle that shows/hides an element | 1427 | | uk-toggle-example | Creates a toggle that shows/hides an element | 1428 | | uk-toggle-multiple | Creates a toggle that shows/hides multiple elements | 1429 | | uk-toggle-custom-class | Creates a toggle that applies a custom class to the target element | 1430 | | uk-toggle-animation | Creates a toggle that animates when toggling between items | 1431 | | uk-toggle-multiple-animations | Creates a toggle with multiple animations | 1432 | | uk-toggle-queued-animation | Creates a toggle with queued animations | 1433 | | uk-toggle-modes | Changes the trigger mode for the toggle | 1434 | | uk-toggle-media | Toggles an element based on the screen width | 1435 | 1436 |

1437 |

1438 | 1439 | ### Tooltip 1440 | 1441 |

Reveal Content

1442 |

1443 | 1444 | | Trigger | Description | 1445 | |----------------------|----------------------------------------------------------| 1446 | | uk-tooltip | [Attribute] Used to create an element with a tooltip | 1447 | | uk-tooltip-sample | Creates an element with a tooltip | 1448 | | uk-tooltip-alignment | Creates a tooltip with a modified alignment | 1449 | | uk-tooltip-delay | Creates a tooltip with a specified delay in milliseconds | 1450 | 1451 |

1452 |

1453 | 1454 | ### Totop 1455 | 1456 |

Reveal Content

1457 |

1458 | 1459 | | Trigger | Description | 1460 | |-----------------|------------------------------------------------------------------------------| 1461 | | uk-totop | [Attribute] Used to create an icon used for scrolling to the top of the page | 1462 | | uk-totop-sample | Creates an icon used for scrolling to the top of the page | 1463 | | uk-totop-smooth | Creates a totop component with smooth scrolling | 1464 | 1465 |

1466 |

1467 | 1468 | ### Transition 1469 | 1470 |

Reveal Content

1471 |

1472 | 1473 | | Trigger | Description | 1474 | |--------------------------|-------------------------------------------------------------------------| 1475 | | uk-transition-fade | Creates a smooth transition between two states when hovering an element | 1476 | | uk-transition-scale | Creates a smooth transition between two states when hovering an element | 1477 | | uk-transition-slide | Creates a smooth transition between two states when hovering an element | 1478 | | uk-transition-slide-size | Creates a smooth transition between two states when hovering an element | 1479 | 1480 |

1481 |

1482 | 1483 | ### Upload 1484 | 1485 |

Reveal Content

1486 |

1487 | 1488 | | Trigger | Description | 1489 | |---------------------|------------------------------------------------------| 1490 | | uk-upload-select | Creates a button which opens a file select window | 1491 | | uk-upload-drop-area | Creates an area for files to be dropped and uploaded | 1492 | | uk-upload-script | Creates the upload script | 1493 | 1494 |

1495 |

1496 | 1497 | ### Utility 1498 | 1499 |

Reveal Content

1500 |

1501 | 1502 | | Trigger 1503 | |-------------------- 1504 | | uk-utility-panel 1505 | | uk-utility-panel-scrollable 1506 | | uk-utility-float 1507 | | uk-utility-clearfix 1508 | | uk-utility-overflow 1509 | | uk-utility-resize 1510 | | uk-utility-display 1511 | | uk-utility-inline 1512 | | uk-utility-responsive 1513 | | uk-utility-preserve-width 1514 | | uk-utility-object 1515 | | uk-utility-object-position 1516 | | uk-utility-border-radius 1517 | | uk-utility-box-shadow 1518 | | uk-utility-box-shadow-bottom 1519 | | uk-utility-box-shadow-hover 1520 | | uk-utility-dropcap 1521 | | uk-utility-leader 1522 | | uk-utility-logo-text 1523 | | uk-utility-logo-image 1524 | | uk-utility-inline-svg 1525 | | uk-utility-video 1526 | | uk-utility-blend 1527 | | uk-utility-transform-center 1528 | | uk-utility-transform-origin 1529 | | uk-utility-disabled 1530 | | uk-utility-drag 1531 | | uk-utility-dragover 1532 | 1533 | | Description | ----------|----------------------------------------------------------------------------------------------------------------| | Creates a panel used to outline a section of content | | Creates a scrollable panel | | [Class] Floats an element left or right | | [Class] Removes floats from this element and its children | | [Class] Modifies an element's overflow behaviour | | [Class] Allows an element to be resized | | [Class] Changes the display properties of an element | | [Class] Applies inline-block behaviour to an element, adds a max-width of 100% and creates a position context. | | [Class] Applies a responsive behaviour to any element | | [Class] Avoids responsive behaviour and preserves original dimensions | | [Class] Defines how the content of an image or video should be resized to fit its element | | [Class] Modifies the alignment of the image or video within its element | | [Class] Modifies the border radius of an element | | [Class] Adds a box shadow to an element | | [Class] Adds a box shadow to the bottom of an element | | [Class] Adds a box shadow to an element on hover | | Applies a drop cap on a paragraph | | Visually connects horizontal items with a line of dots | | Creates a text logo | | Creates an image logo | | Adds an inline SVG | | Adds a video that can automatically play when it comes into view | | [Class] Applies a modified blend mode to a background | | [Class] Centers an element to itself | | [Class] Modifies the origin of an animation | | [Class] Disables the click behaviour of any element | | [Class] Applies a move cursor to an element | | [Class] Creates a box shadow used for upload areas when dragging a file over it |

1534 |

1535 | 1536 | ### Video 1537 | 1538 |

Reveal Content

1539 |

1540 | 1541 | | Trigger | Description | 1542 | |-----------------|------------------------------------------------------| 1543 | | uk-video | [Attribute] Used to add lazy-load to a video element | 1544 | | uk-video-sample | Creates a video element that loads once in view | 1545 | 1546 |

1547 |

1548 | 1549 | ### Visibility 1550 | 1551 |

Reveal Content

1552 |

1553 | 1554 | | Trigger | Description | 1555 | |----------------------|-----------------------------------------------------------------------------------------------------------| 1556 | | uk-hidden | [Attribute] Used for hiding an element | 1557 | | uk-hidden-class | [Class] Legacy class used for hiding an element. Recommended: Use 'hidden' attribute instead. | 1558 | | uk-hidden-responsive | [Class] Hides an element from screens larger than the specified width (640/960/1200/1600 px respectively) | 1559 | | uk-hidden-hover | Hides the content until the parent container is hovered | 1560 | | uk-visible | [Class] Shows an element on screens larger than the specified width (640/960/1200/1600 px respectively) | 1561 | | uk-invisible | [Class] Hides the element without removing it from the document flow. | 1562 | | uk-invisible-hover | Hides the content (without removing it from the document flow) until the parent container is hovered | 1563 | | uk-hidden-touch | Hides the content on touch devices | 1564 | | uk-hidden-notouch | Hides the content on devices without a touch screen | 1565 | 1566 |

1567 |

1568 | 1569 | ### Width 1570 | 1571 |

Reveal Content

1572 |

1573 | 1574 | | Trigger | Description | 1575 | |---------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------| 1576 | | uk-width | [Class] Modifies the width of an element to take up a portion of its parent container, or the entire width. Usually used with 'uk-grid'. | 1577 | | uk-width-responsive | [Class] Modifies the width of an element to take up a portion of its parent container on specified device widths and higher. Columns stack on smaller sizes. | 1578 | | uk-width-auto | [Class] The item expands to the width of its own content. Usually used with 'uk-grid'. | 1579 | | uk-width-expand | [Class] The item expands to fill up the remaining space of the grid container. Usually used with 'uk-grid'. | 1580 | | uk-child-width | [Class] Evenly divides the width of all child elements in a 'uk-grid' | 1581 | | uk-child-width-responsive | [Class] Evenly divides the width of all child elements in a 'uk-grid' on specified device widths and higher. Columns stack on smaller sizes. | 1582 | | uk-fixed-width | [Class] Applies a fixed width to an element of 150/300/450/600/750 px respectively. | 1583 | | uk-intrinsic-width | [Class] Allows you to apply min or max content widths easily | 1584 | 1585 |

1586 |

1587 | 1588 |

1589 |

1590 | 1591 | ## List of Commands (Javascript) 1592 | 1593 |

1594 |

Click to Reveal List of Commands (Javascript)

1595 |

1596 | 1597 | ### Accordion JS 1598 | 1599 |

Reveal Content

1600 |

1601 | 1602 | | Trigger | Description | 1603 | |----------------------|-------------------------------------------------------------------| 1604 | | uk-accordion | Initializes an accordion component with various options | 1605 | | uk-accordion-events | Triggers a function when a specified accordion event is triggered | 1606 | | uk-accordion-methods | Showcases the methods available to the accordion component | 1607 | 1608 |

1609 |

1610 | 1611 | ### Alert JS 1612 | 1613 |

Reveal Content

1614 |

1615 | 1616 | | Trigger | Description | 1617 | |------------------|---------------------------------------------------------------| 1618 | | uk-alert | Initializes an alert component with various options | 1619 | | uk-alert-events | Triggers a function when a specified alert event is triggered | 1620 | | uk-alert-methods | Showcases the methods available to the alert component | 1621 | 1622 |

1623 |

1624 | 1625 | ### Countdown JS 1626 | 1627 |

Reveal Content

1628 |

1629 | 1630 | | Trigger | Description | 1631 | |----------------------|------------------------------------------------------------| 1632 | | uk-countdown | Initializes a countdown component with various options | 1633 | | uk-countdown-methods | Showcases the methods available to the countdown component | 1634 | 1635 |

1636 |

1637 | 1638 | ### Cover JS 1639 | 1640 |

Reveal Content

1641 |

1642 | 1643 | | Trigger | Description | 1644 | |----------|----------------------------------------------------| 1645 | | uk-cover | Initializes a cover component with various options | 1646 | 1647 |

1648 |

1649 | 1650 | ### Drop JS 1651 | 1652 |

Reveal Content

1653 |

1654 | 1655 | | Trigger | Description | 1656 | |-----------------|--------------------------------------------------------------| 1657 | | uk-drop | Initializes a drop component with various options | 1658 | | uk-drop-events | Triggers a function when a specified drop event is triggered | 1659 | | uk-drop-methods | Showcases the methods available to the drop component | 1660 | 1661 |

1662 |

1663 | 1664 | ### Dropdown JS 1665 | 1666 |

Reveal Content

1667 |

1668 | 1669 | | Trigger | Description | 1670 | |---------------------|------------------------------------------------------------------| 1671 | | uk-dropdown | Initializes a dropdown component with various options | 1672 | | uk-dropdown-events | Triggers a function when a specified dropdown event is triggered | 1673 | | uk-dropdown-methods | Showcases the methods available to the dropdown component | 1674 | 1675 |

1676 |

1677 | 1678 | ### Filter JS 1679 | 1680 |

Reveal Content

1681 |

1682 | 1683 | | Trigger | Description | 1684 | |------------------|----------------------------------------------------------------| 1685 | | uk-filter | Initializes a filter component with various options | 1686 | | uk-filter-events | Triggers a function when a specified filter event is triggered | 1687 | 1688 |

1689 |

1690 | 1691 | ### Form JS 1692 | 1693 |

Reveal Content

1694 |

1695 | 1696 | | Trigger | Description | 1697 | |---------|---------------------------------------------------| 1698 | | uk-form | Initializes a form component with various options | 1699 | 1700 |

1701 |

1702 | 1703 | ### Grid JS 1704 | 1705 |

Reveal Content

1706 |

1707 | 1708 | | Trigger | Description | 1709 | |---------|---------------------------------------------------| 1710 | | uk-grid | Initializes a grid component with various options | 1711 | 1712 |

1713 |

1714 | 1715 | ### Height Match JS 1716 | 1717 |

Reveal Content

1718 |

1719 | 1720 | | Trigger | Description | 1721 | |-----------------|-----------------------------------------------------------| 1722 | | uk-height-match | Initializes a height match component with various options | 1723 | 1724 |

1725 |

1726 | 1727 | ### Icon JS 1728 | 1729 |

Reveal Content

1730 |

1731 | 1732 | | Trigger | Description | 1733 | |---------|----------------------------------------------------| 1734 | | uk-icon | Initializes an icon component with various options | 1735 | 1736 |

1737 |

1738 | 1739 | ### Image JS 1740 | 1741 |

Reveal Content

1742 |

1743 | 1744 | | Trigger | Description | 1745 | |---------|-----------------------------------------------------| 1746 | | uk-img | Initializes an image component with various options | 1747 | 1748 |

1749 |

1750 | 1751 | ### Lightbox JS 1752 | 1753 |

Reveal Content

1754 |

1755 | 1756 | | Trigger | Description | 1757 | |---------------------------|------------------------------------------------------------------| 1758 | | uk-lightbox | Initializes a lightbox component with various options | 1759 | | uk-lightbox-events | Triggers a function when a specified lightbox event is triggered | 1760 | | uk-lightbox-methods | Showcases the methods available to the lightbox component | 1761 | | uk-lightbox-panel | Initializes a lightbox panel component with various options | 1762 | | uk-lightbox-panel-methods | Showcases the methods available to the lightbox panel component | 1763 | 1764 |

1765 |

1766 | 1767 | ### Margin JS 1768 | 1769 |

Reveal Content

1770 |

1771 | 1772 | | Trigger | Description | 1773 | |-----------|-----------------------------------------------------| 1774 | | uk-margin | Initializes a margin component with various options | 1775 | 1776 |

1777 |

1778 | 1779 | ### Modal JS 1780 | 1781 |

Reveal Content

1782 |

1783 | 1784 | | Trigger | Description | 1785 | |------------------------|---------------------------------------------------------------| 1786 | | uk-modal | Initializes a modal component with various options | 1787 | | uk-modal-events | Triggers a function when a specified modal event is triggered | 1788 | | uk-modal-methods | Showcases the methods available to the modal component | 1789 | | uk-modal-alert | Creates an alert box with one button | 1790 | | uk-modal-confirm | Creates a confirm dialog with your message and two buttons | 1791 | | uk-modal-prompt | Creates a dialog asking for a text input | 1792 | | uk-modal-dialog | Creates a dialog with any HTML content | 1793 | | uk-modal-dialog-sample | Creates a sample dialog which processes user input | 1794 | 1795 |

1796 |

1797 | 1798 | ### Nav JS 1799 | 1800 |

Reveal Content

1801 |

1802 | 1803 | | Trigger | Description | 1804 | |----------------|------------------------------------------------------| 1805 | | uk-nav | Initializes a nav component with various options | 1806 | | uk-nav-methods | Showcases the methods available to the nav component | 1807 | 1808 |

1809 |

1810 | 1811 | ### Navbar JS 1812 | 1813 |

Reveal Content

1814 |

1815 | 1816 | | Trigger | Description | 1817 | |------------------|----------------------------------------------------------------| 1818 | | uk-navbar | Initializes a navbar component with various options | 1819 | | uk-navbar-events | Triggers a function when a specified navbar event is triggered | 1820 | 1821 |

1822 |

1823 | 1824 | ### Notification JS 1825 | 1826 |

Reveal Content

1827 |

1828 | 1829 | | Trigger | Description | 1830 | |-------------------------|----------------------------------------------------------------------| 1831 | | uk-notification | Creates a notification with various options | 1832 | | uk-notification-events | Triggers a function when a specified notification event is triggered | 1833 | | uk-notification-methods | Showcases the methods available to the notification component | 1834 | 1835 |

1836 |

1837 | 1838 | ### Offcanvas JS 1839 | 1840 |

Reveal Content

1841 |

1842 | 1843 | | Trigger | Description | 1844 | |----------------------|-------------------------------------------------------------------| 1845 | | uk-offcanvas | Initializes a offcanvas component with various options | 1846 | | uk-offcanvas-events | Triggers a function when a specified offcanvas event is triggered | 1847 | | uk-offcanvas-methods | Showcases the methods available to the offcanvas component | 1848 | 1849 |

1850 |

1851 | 1852 | ### Parallax JS 1853 | 1854 |

Reveal Content

1855 |

1856 | 1857 | | Trigger | Description | 1858 | |-------------|-------------------------------------------------------| 1859 | | uk-parallax | Initializes a parallax component with various options | 1860 | 1861 |

1862 |

1863 | 1864 | ### Scroll JS 1865 | 1866 |

Reveal Content

1867 |

1868 | 1869 | | Trigger | Description | 1870 | |-----------|-----------------------------------------------------| 1871 | | uk-scroll | Initializes a scroll component with various options | 1872 | 1873 |

1874 |

1875 | 1876 | ### Scrollspy JS 1877 | 1878 |

Reveal Content

1879 |

1880 | 1881 | | Trigger | Description | 1882 | |-------------------------|-----------------------------------------------------------------------| 1883 | | uk-scrollspy | Initializes a scrollspy component with various options | 1884 | | uk-scrollspy-events | Triggers a function when a specified scrollspy event is triggered | 1885 | | uk-scrollspy-nav | Initializes a scrollspy nav component with various options | 1886 | | uk-scrollspy-nav-events | Triggers a function when a specified scrollspy nav event is triggered | 1887 | 1888 |

1889 |

1890 | 1891 | ### Slider JS 1892 | 1893 |

Reveal Content

1894 |

1895 | 1896 | | Trigger | Description | 1897 | |-------------------|----------------------------------------------------------------| 1898 | | uk-slider | Initializes a slider component with various options | 1899 | | uk-slider-events | Triggers a function when a specified slider event is triggered | 1900 | | uk-slider-methods | Showcases the methods available to the slider component | 1901 | 1902 |

1903 |

1904 | 1905 | ### Slideshow JS 1906 | 1907 |

Reveal Content

1908 |

1909 | 1910 | | Trigger | Description | 1911 | |----------------------|-------------------------------------------------------------------| 1912 | | uk-slideshow | Initializes a slideshow component with various options | 1913 | | uk-slideshow-events | Triggers a function when a specified slideshow event is triggered | 1914 | | uk-slideshow-methods | Showcases the methods available to the slideshow component | 1915 | 1916 |

1917 |

1918 | 1919 | ### Sortable JS 1920 | 1921 |

Reveal Content

1922 |

1923 | 1924 | | Trigger | Description | 1925 | |--------------------|------------------------------------------------------------------| 1926 | | uk-sortable | Initializes a sortable component with various options | 1927 | | uk-sortable-events | Triggers a function when a specified sortable event is triggered | 1928 | 1929 |

1930 |

1931 | 1932 | ### Sticky JS 1933 | 1934 |

Reveal Content

1935 |

1936 | 1937 | | Trigger | Description | 1938 | |------------------|----------------------------------------------------------------| 1939 | | uk-sticky | Initializes a sticky component with various options | 1940 | | uk-sticky-events | Triggers a function when a specified sticky event is triggered | 1941 | 1942 |

1943 |

1944 | 1945 | ### SVG JS 1946 | 1947 |

Reveal Content

1948 |

1949 | 1950 | | Trigger | Description | 1951 | |-------------------|----------------------------------------------------------------| 1952 | | uk-svg | Initializes a svg component with various options | 1953 | | uk-svg-properties | A JavaScript Promise that will resolve with the added SVG Node | 1954 | 1955 |

1956 |

1957 | 1958 | ### Switcher JS 1959 | 1960 |

Reveal Content

1961 |

1962 | 1963 | | Trigger | Description | 1964 | |---------------------|------------------------------------------------------------------| 1965 | | uk-switcher | Initializes a switcher with various options | 1966 | | uk-switcher-events | Triggers a function when a specified switcher event is triggered | 1967 | | uk-switcher-methods | Showcases the methods available to the switcher component | 1968 | 1969 |

1970 |

1971 | 1972 | ### Tab JS 1973 | 1974 |

Reveal Content

1975 |

1976 | 1977 | | Trigger | Description | 1978 | |----------------|-------------------------------------------------------------| 1979 | | uk-tab | Initializes a tab with various options | 1980 | | uk-tab-events | Triggers a function when a specified tab event is triggered | 1981 | | uk-tab-methods | Showcases the methods available to the tab component | 1982 | 1983 |

1984 |

1985 | 1986 | ### Toggle JS 1987 | 1988 |

Reveal Content

1989 |

1990 | 1991 | | Trigger | Description | 1992 | |-------------------|----------------------------------------------------------------| 1993 | | uk-toggle | Initializes a toggle with various options | 1994 | | uk-toggle-events | Triggers a function when a specified toggle event is triggered | 1995 | | uk-toggle-methods | Showcases the methods available to the toggle component | 1996 | 1997 |

1998 |

1999 | 2000 | ### Tooltip JS 2001 | 2002 |

Reveal Content

2003 |

2004 | 2005 | | Trigger | Description | 2006 | |--------------------|-----------------------------------------------------------------| 2007 | | uk-tooltip | Initializes a tooltip component with various options | 2008 | | uk-tooltip-events | Triggers a function when a specified tooltip event is triggered | 2009 | | uk-tooltip-methods | Showcases the methods available to the tooltip component | 2010 | 2011 |

2012 |

2013 | 2014 | ### Upload JS 2015 | 2016 |

Reveal Content

2017 |

2018 | 2019 | | Trigger | Description | 2020 | |------------------|----------------------------------------------------------------| 2021 | | uk-upload | Initializes an upload component with various options | 2022 | | uk-upload-events | Triggers a function when a specified upload event is triggered | 2023 | | uk-upload-sample | Creates a sample upload script based on official docs | 2024 | 2025 |

2026 |

2027 | 2028 | ### Video JS 2029 | 2030 |

Reveal Content

2031 |

2032 | 2033 | | Trigger | Description | 2034 | |----------|----------------------------------------------------| 2035 | | uk-video | Initializes a video component with various options | 2036 | 2037 |

2038 |

2039 | 2040 |

2041 |

2042 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Local Testing Files 2 | *.html 3 | *.php 4 | *.js 5 | 6 | # Etc. 7 | *.log 8 | /.vscode -------------------------------------------------------------------------------- /.vscodeignore: -------------------------------------------------------------------------------- 1 | *.html 2 | *.php 3 | *.js 4 | **/.github -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Version 1.6.0 (April 17, 2025) 2 | 3 | This version re-introduces snippet language association which was removed in v1.4.0. All languages that support HTML-like markup should now support the snippets. This was done to address the concern from many users regarding snippets coming up in all files unless the extension was disabled. Thanks to a bit of AI assistance, I was able to find most of the outliers which makes this more reliable. Thank you for the feedback! 4 | 5 | If there is a language that you want to see snippets supported in, feel free to raise a PR or an [issue](https://github.com/dons20/UIKit-VSCode/issues). 6 | 7 | * 🔧 Fixed an incorrect snippet trigger for `uk-parallax-start-end` 8 | 9 | * 💡 Updated the Github Readme to fix the broken badges, preview images, missing entries, and other small details. 10 | 11 | # Version 1.5.0 (April 5, 2025) 12 | 13 | Thank you for using this extension, here's a little update for you. 14 | 15 | * 🔧 Fixed an issue with selectable options in snippets 16 | * Technical: For selectable snippets with the `$0` index, the list of options would simply be inserted, instead of putting the cursor at the location and displaying the list as expected. 17 | 18 | * 💡 Updated to UIkit 3.22.1 for base snippets 19 | 20 | * 💡 Updated multiple props across various components from 3.5.10 until 3.15.0 21 | * More snippets coming soon 22 | 23 | * ✅ Added Dropbar 24 | 25 | # Version 1.4.4 (November 29, 2020) 26 | 27 | 🎄 Thank you all for 20K+ downloads, Happy Holidays, and stay safe ♥ 28 | 29 | * 💡 Updated to UIkit 3.5.9 30 | 31 | * 💡 Updated some broken/outdated links, and created a better preview GIF 32 | 33 | * ✅ Added `uk-text-default` 34 | 35 | # Version 1.4.3 (June 14, 2020) 36 | 37 | ## Contributions 38 | 39 | * [Yusuf Bıyık @yussufjpg](https://github.com/yussufjpg): 💡 Updated to UIkit 3.5.4 - [PR #21](https://github.com/dons20/UIKit-VSCode/pull/21) 40 | 41 | # Version 1.4.2 (July 29, 2019) 42 | 43 | * 💡 Updated to UIkit 3.1.6 44 | 45 | * ✅ Added `uk-heading` with size selectors from small - 2x large 46 | 47 | * ✅ Added multiple new `uk-animation` snippets 48 | 49 | * ✅ Added `uk-link-toggle` 50 | 51 | * ❗️ Removed `uk-heading-primary` 52 | 53 | 54 | # Version 1.4.1 (March 1, 2019) 55 | 56 | * ⚙️️️ JS Snippet Option comments have been moved from the body into the descriptions 57 | * With [VSCode 1.31](https://code.visualstudio.com/updates/v1_31#_snippets-descriptions), support for multiline descriptions was added, so this is a more appropriate place to add them. 58 | * Minor tweaks and fixes 59 | 60 | ## Contributions 61 | * [Jakob Pless @pless84](https://github.com/pless84): 💡 Updated to UIkit 3.0.3 - [PR #18](https://github.com/dons20/UIKit-VSCode/pull/18) 62 | 63 | # Version 1.4.0 (November 3, 2018) 64 | * ⚙️️️ Modified main snippets to be global by default 65 | * There are many languages and associated files that the snippets wouldn't trigger in, and so this change will now allow `uk-` snippets to work in any file. 66 | * This change does not apply to the javascript-only snippets. Those will retain their original functionality within `javascript` files to avoid clutter. 67 | * To prevent this from occurring, simply disable the extension for that workspace, or until you need to re-activate it. 68 | * If this change comes with any issues or inconveniences, let me know on the [issues](https://github.com/dons20/UIKit-VSCode/issues) page! 69 | * 💡 Updated to UIkit 3.0.0 RC 20 70 | * ✅ Added `uk-divider-vertical` to snippets 71 | * ⚙️️️️️ Small modifications to `uk-text-color` and other snippets 72 | 73 | # Version 1.3.1 (August 10, 2018) 74 | * 🔧 Fixed **README** formatting issues on marketplace 75 | 76 | # Version 1.3.0 (August 10, 2018) 77 | * 💡 Updated to UIkit 3.0.0 RC 11 78 | 79 | * 💡 Updated formatting of the **README** to have collapsible sections by default 80 | * Collapsed sections aren't able to be jumped to by hyperlink until they are revealed in their respective categories. (e.g. Clicking `Container` in the Table of Contents won't jump to that section until you expand `List of Commands (HTML/PHP)` further below) 81 | 82 | * 💡 Updated **CHANGELOG** formatting to be more spaced and have easily identifiable emojis 🌟 83 | 84 | * 💡 Updated descriptions for various snippets 85 | 86 | * ✅ Added missing links to documentation in the **README** 87 | 88 | * ✅ Added snippet choices to clear up redundant ones (e.g. `uk-$-css-import`) 89 | 90 | * ✅ Added image component snippets for both HTML and JS (e.g. `uk-img`) 91 | 92 | * ✅ Added filter component snippets (e.g. `uk-filter`) 93 | 94 | * ✅ Added seperate snippets for Height, Leader, SVG and Video components in both HTML and JS where needed (e.g. `uk-svg`, `uk-video`, etc.) 95 | 96 | * 🔧 Fixed minor errors in a couple snippets 97 | 98 | # Version 1.2.2 (April 20, 2018) 99 | * 💡 Updated to UIkit 3.0.0 beta 42 100 | 101 | * 💡 Updated and cleaned up many snippets 102 | 103 | * ✅ Added slider component snippets (`uk-slider` and more) 104 | 105 | * ✅ Added slideshow component snippets (`uk-slideshow` and more) 106 | 107 | * ✅ Added thumbnav component snippets (`uk-thumbnav` and more) 108 | 109 | * ❗️ Removed a number of snippets based on changes from beta 31 110 | 111 | * ❗️ Removed JQuery import from snippets 112 | 113 | 114 | # Version 1.2.0 (September 5, 2017) 115 | * 💡 Updated a large number of HTML & JS snippets to now use snippet choices in VSCode 1.15+. This allows more variety within a single snippet, and so many redundancies have been ❗️ removed. 116 | * Please note that a few of the snippet choices will be inactive/slightly bugged until the August VSCode update [due to a bug which has been fixed](https://github.com/Microsoft/vscode/issues/31599) for the next build. 117 | * A large number of snippets have recieved changes or minor tweaks. There are too many to list in this changelog, but any snippets which include multiple options will now utilize this new system. 118 | 119 | * ✅ Added new method snippets to JS snippets. (e.g. `uk-modal-methods`, `uk-drop-methods`, etc.) 120 | 121 | * 🔧 Fixed a few broken snippets 122 | 123 | ## Contributions 124 | * [Ramzi Akremi (@rakr)](https://github.com/rakr): ✅ Added support for embedded elixir [PR #9](https://github.com/dons20/UIKit-VSCode/pull/9) 125 | 126 | # Version 1.1.4 (August 21, 2017) 127 | * 🔧 Fixed invalid icon display in marketplace 128 | 129 | # Version 1.1.3 (August 21, 2017) 130 | * 💡 Updated relevant snippets to UIkit 3.0.0 beta 30 131 | 132 | * ✅ Added lightbox component snippets (`uk-lightbox` and more) 133 | 134 | * ✅ Added video component snippets (`uk-utility-video`) 135 | 136 | * ✅ Added support for PUG files 137 | 138 | * ✅ Added `uk-alert-methods` snippet for JS files 139 | 140 | * ⚙️ Modified `uk-modal-center` to use `uk-margin-auto-vertical` class due to deprecated *center* parameter 141 | 142 | * ❗️ Removed `uk-modal-caption` snippet (functionality now in `uk-lightbox` instead) 143 | 144 | * ⚠️ Moved contribution guidelines to a seperate file to remove initial clutter from `README` file. View here: 145 | [How to contribute](./CONTRIBUTION.md) 146 | 147 | # Version 1.1.2 (June 14, 2017) 148 | * 💡 Updated relevant snippets to UIkit 3.0.0 beta 25 149 | 150 | * ✅ Added size modifier snippet to tile component (`uk-tile-size-modifier`) 151 | 152 | * ✅ Added body text modifier snippet to link component (`uk-link-text`) 153 | 154 | # Version 1.1.1 (May 31, 2017) 155 | * 💡 Updated relevant snippets to UIkit 3.0.0 beta 24 156 | 157 | * 💡 Updated `uk-form-sample` to include the `uk-range` element 158 | 159 | * ✅ Added support for `twig` files 160 | 161 | * ✅ Added Parallax component snippets (`uk-parallax` etc.) 162 | 163 | * ✅ Added Grid Parallax component (`uk-grid-parallax`) 164 | 165 | * ✅ Added Marker component (`uk-marker`) 166 | 167 | * ✅ Added `uk-hidden-touch` and `uk-hidden-notouch` 168 | 169 | * ✅ Added `uk-transform-center` 170 | 171 | # Version 1.1.0 (April 28, 2017) 172 | * 💡 Updated relevant snippets to UIkit 3.0.0 beta 22 173 | 174 | * ✅ Added box-shadow bottom (`uk-utility-box-shadow-bottom`) 175 | 176 | * ✅ Added countdown component snippets (`uk-countdown` and more) 177 | 178 | * ✅ Added divider & justify modifier snippet for tables (`uk-table-divider` & `uk-table-justify`) 179 | 180 | * ✅ Added the remaining attribute/class-only snippets. Attribute/Class-only snippets are indicated by [Attribute] & [Class] respectively in their description. 181 | 182 | * ⚙️ Changed `uk-table-center` to `uk-table-middle` 183 | 184 | * 🔧 Fixed a few inconsistensies in html snippets & readme descriptions 185 | 186 | # Version 1.0.13 (April 13, 2017) 187 | * ✅ Added Javascript-only snippets for multiple components (check the readme for a detailed list) 188 | 189 | * ⚙️ Started adding attribute/class-only versions for many snippets (will be finished by 1.1.0) 190 | 191 | # Version 1.0.12 (April 11, 2017) 192 | * 💡 Updated relevant snippets to UIKit 3.0.0 beta 21 193 | 194 | # Version 1.0.11 (April 7, 2017) 195 | * ✅ Added breakpoint snippet for flex horizontal alignment (`uk-flex-horizontal-alignment-responsive`) 196 | 197 | * 💡 Updated relevant snippets to UIKit 3.0.0 beta 20 198 | 199 | # Version 1.0.10 (April 4, 2017) 200 | * ✅ Added Utility Leader snippet (`uk-utility-leader`) 201 | 202 | * ⚙️ Modified off-canvas snippets to match new format (Off-Canvas now requires wrapping the page into an extra div) 203 | 204 | * 💡 Updated relevant snippets to UIKit 3.0.0 beta 19 205 | 206 | * 💡 Updated slidenav snippet's button order 207 | 208 | * 💡 Updated the margin-auto snippet 209 | 210 | * 💡 Updated padding-remove snippet 211 | 212 | # Version 1.0.9 (March 21, 2017) 213 | * 💡 Updated jquery snippets to version 3.2.1 214 | 215 | # Version 1.0.8 (March 19, 2017) 216 | * 💡 Updated the descriptions of class-only snippets to include `[Class]` at the start for clarity 217 | 218 | * 🔧 Fixed a few tab errors/inconsistensies 219 | 220 | # Version 1.0.7 (March 12, 2017) 221 | * ✅ Added "Match only one cell" snippet to grid (`uk-grid-match-cell`) 222 | 223 | * ✅ Added CSS and JS import snippets for ease of updating existing files (`uk-$-css-import`, 224 | `uk-$-css-rtl-import`, `uk-$-js-import`) 225 | * Changed `uk-background` snippet to `uk-background-default` to match [beta 17's change] 226 | (https://getuikit.com/changelog) 227 | * 💡 Updated a few more tab locations to make them more intutive (work in progress) 228 | 229 | * 💡 Updated a few descriptions to specify that they are class-only snippets (WIP for version 1.1.0) 230 | 231 | # Version 1.0.6 (March 10, 2017) 232 | * 💡 Updated relevant snippets to UIKit 3.0.0-beta.18 233 | 234 | * ✅ Added the `tile` component (`uk-tile-`) 235 | 236 | * 🔧 Fixed a few tab positions in some elements 237 | 238 | * ⚙️ Modified changlog style (again) 239 | 240 | # Version 1.0.5 (March 3, 2017) 241 | * ✅ Added RTL snippet (Triggered with `uk-$-rtl`) 242 | 243 | * 💡 Updated basic template snippet (`uk-$`) to include `uikit-icons.min.js` 244 | 245 | * 💡 Updated many existing snippets (such as `uk-container` & `uk-section`) to be better formatted when inserted 246 | 247 | # Version 1.0.4 (March 2, 2017) 248 | * 💡 Updated relevant snippets to UIKit 3.0.0-beta.16 249 | 250 | # Version 1.0.3 (March 1, 2017) 251 | * 💡 Updated relevant snippets to UIKit 3.0.0-beta.13 252 | 253 | # Version 1.0.2 (March 1, 2017) 254 | * ✅ Added support for `php` files (Must be between `` tags for snippets to show up) 255 | 256 | # Version 1.0.1 (March 1, 2017) 257 | * ⚙️ Minor tweaks to readme for consistency 258 | 259 | # Version 1.0.0 (March 1, 2017) 260 | * ✅ Initial support for UIKit beta 3.0 -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Contribution Guidelines 2 | --- 3 | 1. Clone this repo 4 | 2. All the snippets are located inside of the `/snippets/` folder. 5 | 6 | - `javascript.json` for Javascript related snippets 7 | - `snippets.code-snippets` for all other snippets 8 | 9 | 3. How to modify: 10 | 11 | a. For new entries, copy the snippet syntax below (or an existing one for simplicity) 12 | 13 | b. For existing entries, simply search the list `Ctrl+F`, and modify as you like. 14 | 15 | 4. Submit a [pull request](https://github.com/dons20/UIKit-VSCode/pulls) to the repository. 16 | 17 | #### Snippet Template 18 | 19 | ```json 20 | "snippet-uk-PREFIX": { 21 | "prefix": "uk-PREFIX", 22 | "body": [ 23 | "HTML HERE", 24 | "Multiple Lines Seperated with double quotes and a comma", 25 | "\t Lines that start with the tab character, can be visually tabbed for better readability, but its not required", 26 | "Set tab locations with $0 - any number you specify, with $0 automatically being the last tab location", 27 | "Last Line does not have a comma" 28 | ], 29 | "description": "Enter your description here" 30 | }, 31 | ``` 32 | If applicable, please update the list of commands in `README.md` with your changes if you added or renamed a snippet. 33 | 34 | Snippet Modification Tips 35 | --- 36 | 37 | Getting the hang of modifying snippets can be tricky at first, so here are some useful tips to get you started. 38 | 39 | #### Official Documentation 40 | 41 | First, [check out Microsoft's offical documentation on snippets](https://code.visualstudio.com/Docs/customization/userdefinedsnippets) 42 | 43 | #### Keeping snippets well formatted 44 | 45 | HTML code needs to have proper indentation to be human readable, so use the `\t` modifier in front of a string in the `"body"` to tab it in. You can combine multiple `\t` characters to properly indent the code as you like. 46 | 47 | Take the body portion of a snippet example below: 48 | 49 | ```json 50 | { 51 | ... 52 | "body": [ 53 | "", 54 | "\t", 55 | "\t", 56 | "" 57 | ], 58 | } 59 | ``` 60 | 61 | When inserted into a document, it would be displayed as: 62 | 63 | ```html 64 | 65 | 66 | 67 | 68 | ``` 69 | 70 | #### Testing Changes: 71 | 72 | 1. Press `F1` in Visual Studio Code 73 | 2. Click on "Preferences: Configure User Snippets" 74 | 3. Click on HTML 75 | 4. Copy the contents of `html.json` from the existing project, to your user snippets. 76 | 5. Create a local `html` file to test it in... e.g. `test.html` 77 | 6. Start typing in the command you wish to test. 78 | 79 | #### Tab Locations 80 | 81 | When a user enters a snippet, you may want to add some placeholder content for them to modify with ease, simply by pressing tab to cycle through them. The official documentation covers this more, but here are two simple examples. 82 | 83 | You can have a user tab through locations in order from 1 to any number, but `0` is the final stop for the tab. 84 | ```json 85 | "body": [ 86 | "

$1

", 87 | "

", 88 | "

" 89 | ], 90 | ``` 91 | 92 | You can also have placeholder content that is automatically highlighted when the user tabs to it. 93 | 94 | ```json 95 | "body": [ 96 | "

${1:Sample header}

", 97 | "

${2:Paragraph 1}

", 98 | "

${0:Final Stop}

" 99 | ], 100 | ``` 101 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright 2025 Keno Clayton 2 | 3 | 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: 4 | 5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 6 | 7 | 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. 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # UIKit 3.0 Snippets for Visual Studio Code 2 | 3 | [![Version](https://vsmarketplacebadges.dev/version-short/Keno.uikit-3-snippets.svg 4 | )](https://marketplace.visualstudio.com/items?itemName=Keno.uikit-3-snippets) 5 | [![Installs](https://vsmarketplacebadges.dev/installs-short/Keno.uikit-3-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=Keno.uikit-3-snippets) 6 | [![Ratings](https://vsmarketplacebadges.dev/rating-short/Keno.uikit-3-snippets.svg)](https://marketplace.visualstudio.com/items?itemName=Keno.uikit-3-snippets) 7 | 8 | ![](promo/demo.gif) 9 | 10 | [📃 View the Changelog](https://marketplace.visualstudio.com/items/Keno.uikit-3-snippets/changelog) to see what's new! 11 | 12 | --- 13 | 14 | ## Introduction 15 | 16 | This extension adds all the snippets from [UIKit 3.0](https://getuikit.com/docs/introduction) into Visual Studio Code for easy access and usage. 17 | 18 | To show support for the project, you can do any of the following: 19 | 20 | - [Rate the extension on the marketplace](https://marketplace.visualstudio.com/items?itemName=Keno.uikit-3-snippets) 21 | - [Star the repository](https://github.com/dons20/UIKit-VSCode) 22 | 23 | > Please remember to direct your issues, queries and suggestions to the [issues page](https://github.com/dons20/UIKit-VSCode/issues) of the repository. 24 | 25 | _Please note: While effort is made to make the snippets easy to use without documentation, some components are too complex to provide comprehensive descriptions/snippets so be sure to check the [official documentation](https://getuikit.com/docs/)!_ 26 | 27 | Thank You! 28 | 29 | ## Setup 30 | 31 | #### Method 1 32 | 33 | 1. Go to Extensions by pressing Ctrl-Shift-X (Windows/Linux) or Cmd-Shift-X (Mac) 34 | 2. Search for UIKit 3.0 Snippets 35 | 3. Click on Install 36 | 4. Reload your editor and you're good to go! 37 | 38 | #### Method 2 39 | 40 | 1. With Visual Studio Code opened, press `Ctrl+P`. 41 | 2. Type in `ext install uikit-3-snippets` and press `Enter`. 42 | 43 | Due to a difference in text formatting, [the extended **README** file can be found on Github](https://github.com/dons20/UIKit-VSCode) 44 | -------------------------------------------------------------------------------- /images/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dons20/UIKit-VSCode/02249ffc626a0e550b57e615ac6a92ab832a5ceb/images/icon.png -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uikit-3-snippets", 3 | "version": "1.5.0", 4 | "lockfileVersion": 1 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "uikit-3-snippets", 3 | "displayName": "UIkit 3.0 Snippets", 4 | "publisher": "Keno", 5 | "description": "UIkit 3.0 Snippets based on official documentation", 6 | "version": "1.6.0", 7 | "license": "SEE LICENSE IN LICENSE.md", 8 | "icon": "images/icon.png", 9 | "galleryBanner": { 10 | "color": "#1E87F0", 11 | "theme": "dark" 12 | }, 13 | "markdown": "github", 14 | "badges": [ 15 | { 16 | "url": "https://vsmarketplacebadges.dev/version-short/Keno.uikit-3-snippets.svg", 17 | "href": "https://marketplace.visualstudio.com/items?itemName=Keno.uikit-3-snippets", 18 | "description": "Version" 19 | }, 20 | { 21 | "url": "https://vsmarketplacebadges.dev/installs-short/Keno.uikit-3-snippets.svg", 22 | "href": "https://marketplace.visualstudio.com/items?itemName=Keno.uikit-3-snippets", 23 | "description": "Installs" 24 | }, 25 | { 26 | "url": "https://vsmarketplacebadges.dev/rating-short/Keno.uikit-3-snippets.svg", 27 | "href": "https://marketplace.visualstudio.com/items?itemName=Keno.uikit-3-snippets", 28 | "description": "Rating" 29 | } 30 | ], 31 | "repository": { 32 | "type": "git", 33 | "url": "https://github.com/dons20/UIKit-VSCode.git" 34 | }, 35 | "bugs": { 36 | "url": "https://github.com/dons20/UIKit-VSCode/issues" 37 | }, 38 | "engines": { 39 | "vscode": "^1.31.1" 40 | }, 41 | "categories": [ 42 | "Snippets" 43 | ], 44 | "keywords": [ 45 | "uikit", 46 | "html", 47 | "javascript", 48 | "snippets", 49 | "global" 50 | ], 51 | "contributes": { 52 | "snippets": [ 53 | { 54 | "language": "html", 55 | "path": "./snippets/snippets.code-snippets" 56 | }, 57 | { 58 | "language": "php", 59 | "path": "./snippets/snippets.code-snippets" 60 | }, 61 | { 62 | "language": "twig", 63 | "path": "./snippets/snippets.code-snippets" 64 | }, 65 | { 66 | "language": "latte", 67 | "path": "./snippets/snippets.code-snippets" 68 | }, 69 | { 70 | "language": "handlebars", 71 | "path": "./snippets/snippets.code-snippets" 72 | }, 73 | { 74 | "language": "mustache", 75 | "path": "./snippets/snippets.code-snippets" 76 | }, 77 | { 78 | "language": "ejs", 79 | "path": "./snippets/snippets.code-snippets" 80 | }, 81 | { 82 | "language": "pug", 83 | "path": "./snippets/snippets.code-snippets" 84 | }, 85 | { 86 | "language": "jade", 87 | "path": "./snippets/snippets.code-snippets" 88 | }, 89 | { 90 | "language": "nunjucks", 91 | "path": "./snippets/snippets.code-snippets" 92 | }, 93 | { 94 | "language": "liquid", 95 | "path": "./snippets/snippets.code-snippets" 96 | }, 97 | { 98 | "language": "markdown", 99 | "path": "./snippets/snippets.code-snippets" 100 | }, 101 | { 102 | "language": "vue", 103 | "path": "./snippets/snippets.code-snippets" 104 | }, 105 | { 106 | "language": "svelte", 107 | "path": "./snippets/snippets.code-snippets" 108 | }, 109 | { 110 | "language": "astro", 111 | "path": "./snippets/snippets.code-snippets" 112 | }, 113 | { 114 | "language": "erb", 115 | "path": "./snippets/snippets.code-snippets" 116 | }, 117 | { 118 | "language": "razor", 119 | "path": "./snippets/snippets.code-snippets" 120 | }, 121 | { 122 | "language": "blade", 123 | "path": "./snippets/snippets.code-snippets" 124 | }, 125 | { 126 | "language": "edge", 127 | "path": "./snippets/snippets.code-snippets" 128 | }, 129 | { 130 | "language": "javascriptreact", 131 | "path": "./snippets/snippets.code-snippets" 132 | }, 133 | { 134 | "language": "typescriptreact", 135 | "path": "./snippets/snippets.code-snippets" 136 | }, 137 | { 138 | "language": "xml", 139 | "path": "./snippets/snippets.code-snippets" 140 | }, 141 | { 142 | "language": "svg", 143 | "path": "./snippets/snippets.code-snippets" 144 | }, 145 | { 146 | "language": "xaml", 147 | "path": "./snippets/snippets.code-snippets" 148 | }, 149 | { 150 | "language": "haml", 151 | "path": "./snippets/snippets.code-snippets" 152 | }, 153 | { 154 | "language": "volt", 155 | "path": "./snippets/snippets.code-snippets" 156 | }, 157 | { 158 | "language": "javascript", 159 | "path": "./snippets/javascript.json" 160 | } 161 | ] 162 | } 163 | } -------------------------------------------------------------------------------- /promo/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dons20/UIKit-VSCode/02249ffc626a0e550b57e615ac6a92ab832a5ceb/promo/demo.gif -------------------------------------------------------------------------------- /snippets/javascript.json: -------------------------------------------------------------------------------- 1 | { 2 | "snippet-uk-accordion": { 3 | "prefix": "uk-accordion", 4 | "body": ["UIkit.accordion(${1:element}, ${0:options});"], 5 | "description": [ 6 | "Initializes an accordion component with various options", 7 | "---", 8 | "targets: [CSS Selector]", 9 | "active: [Number]", 10 | "collapsible: [Boolean]", 11 | "multiple: [Boolean]", 12 | "transition: [String]", 13 | "animation: [String]", 14 | "duration: [Number]" 15 | ] 16 | }, 17 | "snippet-uk-accordion-events": { 18 | "prefix": "uk-accordion-events", 19 | "body": [ 20 | "$('${1:selector}').on('${2|beforeshow,show,shown,beforehide,hide,hidden|}', function() { $3 });" 21 | ], 22 | "description": "Triggers a function when a specified accordion event is triggered" 23 | }, 24 | "snippet-uk-accordion-methods": { 25 | "prefix": "uk-accordion-methods", 26 | "body": [ 27 | "$LINE_COMMENT Toggles the content pane", 28 | "UIkit.accordion(${1:element}).toggle(${2:index}, ${0:animate});" 29 | ], 30 | "description": "Showcases the methods available to the accordion component" 31 | }, 32 | "snippet-uk-alert": { 33 | "prefix": "uk-alert", 34 | "body": ["UIkit.alert(${1:element}, ${0:options});"], 35 | "description": [ 36 | "Initializes an alert element with various options", 37 | "---", 38 | "animation: [Boolean|String]", 39 | "duration: [Number]", 40 | "selClose: [CSS Selector]" 41 | ] 42 | }, 43 | "snippet-uk-alert-methods": { 44 | "prefix": "uk-alert-methods", 45 | "body": [ 46 | "$LINE_COMMENT Closes and removes the Alert", 47 | "UIkit.alert(${1:element}).close();" 48 | ], 49 | "description": "Showcases the methods available to the alert component" 50 | }, 51 | "snippet-uk-alert-events": { 52 | "prefix": "uk-alert-events", 53 | "body": ["$('${1:selector}').on('${2|beforehide,hide|}', function() { $3 });"], 54 | "description": "Triggers a function when a specified alert event is triggered" 55 | }, 56 | "snippet-uk-countdown": { 57 | "prefix": "uk-countdown", 58 | "body": ["UIkit.countdown(${1:element}, ${0:options});"], 59 | "description": [ 60 | "Initializes a countdown component with various options", 61 | "---", 62 | "date: [String]" 63 | ] 64 | }, 65 | "snippet-uk-countdown-methods": { 66 | "prefix": "uk-countdown-methods", 67 | "body": [ 68 | "$LINE_COMMENT Starts the countdown", 69 | "UIkit.countdown(${1:element}).start();", 70 | "$LINE_COMMENT Stops the countdown", 71 | "UIkit.countdown(${1:element}).stop();" 72 | ], 73 | "description": "Showcases the methods available to the countdown component" 74 | }, 75 | "snippet-uk-cover": { 76 | "prefix": "uk-cover", 77 | "body": ["UIkit.cover(${1:element}, ${0:options});"], 78 | "description": [ 79 | "Initializes a cover component with various options", 80 | "---", 81 | "automute: [Boolean]", 82 | "width: [Number]", 83 | "height: [Number]" 84 | ] 85 | }, 86 | "snippet-uk-drop": { 87 | "prefix": "uk-drop", 88 | "body": ["UIkit.drop(${1:element}, ${0:options});"], 89 | "description": [ 90 | "Initializes a drop component with various options", 91 | "---", 92 | "toggle: [Boolean|String]", 93 | "pos: [String]", 94 | "mode: [String]", 95 | "delay-show: [Number]", 96 | "delay-hide: [Number]", 97 | "boundary: [String]", 98 | "boundary-align: [Boolean]", 99 | "flip: [Boolean|String]", 100 | "offset: [Number]", 101 | "animation: [String]", 102 | "duration: [Number]" 103 | ] 104 | }, 105 | "snippet-uk-drop-events": { 106 | "prefix": "uk-drop-events", 107 | "body": [ 108 | "$('${1:selector}').on('${2|toggle,beforeshow,show,shown,beforehide,hide,hidden,stack|}', function() { $3 });" 109 | ], 110 | "description": "Triggers a function when a specified drop event is triggered" 111 | }, 112 | "snippet-uk-drop-methods": { 113 | "prefix": "uk-drop-methods", 114 | "body": [ 115 | "$LINE_COMMENT Shows the Drop", 116 | "UIkit.drop(${1:element}).show();", 117 | "$LINE_COMMENT Hides the Drop", 118 | "UIkit.drop(${1:element}).hide();" 119 | ], 120 | "description": "Showcases the methods available to the drop component" 121 | }, 122 | "snippet-uk-dropdown": { 123 | "prefix": "uk-dropdown", 124 | "body": ["UIkit.dropdown(${1:element}, ${0:options});"], 125 | "description": [ 126 | "Initializes a dropdown component with various options", 127 | "---", 128 | "toggle: [Boolean|String]", 129 | "pos: [String]", 130 | "mode: [String]", 131 | "delay-show: [Number]", 132 | "delay-hide: [Number]", 133 | "boundary: [String]", 134 | "boundary-align: [Boolean]", 135 | "flip: [Boolean|String]", 136 | "offset: [Number]", 137 | "animation: [String]", 138 | "duration: [Number]" 139 | ] 140 | }, 141 | "snippet-uk-dropdown-events": { 142 | "prefix": "uk-dropdown-events", 143 | "body": [ 144 | "$('${1:selector}').on('${2|toggle,beforeshow,show,shown,beforehide,hide,hidden,stack|}', function() { $3 });" 145 | ], 146 | "description": "Triggers a function when a specified dropdown event is triggered" 147 | }, 148 | "snippet-uk-dropdown-methods": { 149 | "prefix": "uk-dropdown-methods", 150 | "body": [ 151 | "$LINE_COMMENT Shows the Dropdown", 152 | "UIkit.dropdown(${1:element}).show();", 153 | "$LINE_COMMENT Hides the Dropdown", 154 | "UIkit.dropdown(${1:element}).hide();" 155 | ], 156 | "description": "Showcases the methods available to the dropdown component" 157 | }, 158 | "snippet-uk-filter": { 159 | "prefix": "uk-filter", 160 | "body": ["UIkit.filter(${1:element}, ${0:options});"], 161 | "description": [ 162 | "Initializes a filter component with various options", 163 | "---", 164 | "target: [String]", 165 | "selActive: [String|Boolean]", 166 | "animation: [Boolean|String]", 167 | "duration: [Number]" 168 | ] 169 | }, 170 | "snippet-uk-filter-events": { 171 | "prefix": "uk-filter-events", 172 | "body": ["$('${1:selector}').on('${2|beforeFilter,afterFilter|}', function() { $3 });"], 173 | "description": "Triggers a function when a specified filter event is triggered" 174 | }, 175 | "snippet-uk-form": { 176 | "prefix": "uk-form", 177 | "body": ["UIkit.formCustom(${1:element}, ${0:options});"], 178 | "description": [ 179 | "Initializes a form component with various options", 180 | "---", 181 | "target: [CSS Selector|Boolean]" 182 | ] 183 | }, 184 | "snippet-uk-grid": { 185 | "prefix": "uk-grid", 186 | "body": ["UIkit.grid(${1:element}, ${0:options});"], 187 | "description": [ 188 | "Initializes a grid component with various options", 189 | "---", 190 | "margin: [String]", 191 | "first-column: [String]", 192 | "masonry: [Boolean]", 193 | "parallax: [Number]" 194 | ] 195 | }, 196 | "snippet-uk-grid-parallax": { 197 | "prefix": "uk-grid-parallax", 198 | "body": ["UIkit.gridParallax(${1:element}, ${0:options});"], 199 | "description": [ 200 | "Initializes a grid parallax component with various options", 201 | "---", 202 | "target: [String]", 203 | "translate: [Number]" 204 | ] 205 | }, 206 | "snippet-uk-height-match": { 207 | "prefix": "uk-height-match", 208 | "body": ["UIkit.heightMatch(${1:element}, ${0:options});"], 209 | "description": [ 210 | "Initializes a height match component with various options", 211 | "---", 212 | "target: [CSS Selector]", 213 | "row: [Boolean]" 214 | ] 215 | }, 216 | "snippet-uk-icon": { 217 | "prefix": "uk-icon", 218 | "body": ["UIkit.icon(${1:element}, ${0:options});"], 219 | "description": [ 220 | "Initializes an icon component with various options", 221 | "---", 222 | "icon: [String]", 223 | "ratio: [Number]" 224 | ] 225 | }, 226 | "snippet-uk-img": { 227 | "prefix": "uk-img", 228 | "body": ["UIkit.img(${1:element}, ${0:options});"], 229 | "description": [ 230 | "Initializes an image component with various options", 231 | "---", 232 | "dataSrc: [String]", 233 | "sources: [String]", 234 | "loading: [String]", 235 | "margin: [String]", 236 | "target: [String]" 237 | ] 238 | }, 239 | "snippet-uk-leader": { 240 | "prefix": "uk-leader", 241 | "body": ["UIkit.leader(${1:element}, ${0:options});"], 242 | "description": [ 243 | "Initializes a leader component with various options", 244 | "---", 245 | "fill: [String]", 246 | "media: [Integer|String]" 247 | ] 248 | }, 249 | "snippet-uk-lightbox": { 250 | "prefix": "uk-lightbox", 251 | "body": ["UIkit.lightbox(${1:element}, ${0:options});"], 252 | "description": [ 253 | "Initializes a lightbox component with various options", 254 | "---", 255 | "animation: [String]", 256 | "toggle: [CSS Selector]" 257 | ] 258 | }, 259 | "snippet-uk-lightbox-events": { 260 | "prefix": "uk-lightbox-events", 261 | "body": [ 262 | "$('${1:selector}').on('${2|beforeshow,show,shown,beforehide,hide,hidden,itemload,itemshow,itemshown,itemhide,itemhidden|}', function() { $3 });" 263 | ], 264 | "description": "Triggers a function when a specified lightbox event is triggered" 265 | }, 266 | "snippet-uk-lightbox-methods": { 267 | "prefix": "uk-lightbox-methods", 268 | "body": [ 269 | "$LINE_COMMENT Shows the Lightbox's Panel and item", 270 | "UIkit.lightbox(${1:element}).show(${2:index});", 271 | "$LINE_COMMENT Hides the Lightbox's Panel", 272 | "UIkit.lightbox(${0:element}).hide();" 273 | ], 274 | "description": "Showcases the methods available to the lightbox component" 275 | }, 276 | "snippet-uk-lightbox-panel": { 277 | "prefix": "uk-lightbox-panel", 278 | "body": ["UIkit.lightboxPanel(${0:panelOptions});"], 279 | "description": [ 280 | "Initializes a lightbox panel component with various options", 281 | "---", 282 | "autoplay: [Number]", 283 | "animation: [String]", 284 | "duration: [Number]", 285 | "index: [Number]", 286 | "preload: [Number]", 287 | "items: [Array]", 288 | "template: [String]", 289 | "delay-controls: [Number]" 290 | ] 291 | }, 292 | "snippet-uk-lightbox-panel-methods": { 293 | "prefix": "uk-lightbox-panel-methods", 294 | "body": [ 295 | "$LINE_COMMENT Shows the Lightbox Panel's item", 296 | "UIkit.lightboxPanel(${1:element}).show(${2:index});", 297 | "$LINE_COMMENT Hides the Lightbox Panel", 298 | "UIkit.lightboxPanel(${0:element}).hide();" 299 | ], 300 | "description": "Showcases the methods available to the lightbox panel component" 301 | }, 302 | "snippet-uk-margin": { 303 | "prefix": "uk-margin", 304 | "body": ["UIkit.margin(${1:element}, ${0:options});"], 305 | "description": [ 306 | "Initializes a margin component with various options", 307 | "---", 308 | "margin: [String]", 309 | "first-column: [String]" 310 | ] 311 | }, 312 | "snippet-uk-modal": { 313 | "prefix": "uk-modal", 314 | "body": ["UIkit.modal(${1:element}, ${0:options});"], 315 | "description": [ 316 | "Initializes a modal component with various options", 317 | "---", 318 | "center: [Boolean]", 319 | "esc-close: [Boolean]", 320 | "bg-close: [Boolean]", 321 | "stack: [Boolean]", 322 | "container: [String]" 323 | ] 324 | }, 325 | "snippet-uk-modal-events": { 326 | "prefix": "uk-modal-events", 327 | "body": [ 328 | "$('${1:selector}').on('${2|beforeshow,show,shown,beforehide,hide,hidden|}', function() { $3 });" 329 | ], 330 | "description": "Triggers a function when a specified modal event is triggered" 331 | }, 332 | "snippet-uk-modal-methods": { 333 | "prefix": "uk-modal-methods", 334 | "body": [ 335 | "$LINE_COMMENT Shows the Modal", 336 | "UIkit.modal(${1:element}).show(${2:index});", 337 | "$LINE_COMMENT Hides the Modal", 338 | "UIkit.modal(${0:element}).hide();" 339 | ], 340 | "description": "Showcases the methods available to the modal component" 341 | }, 342 | "snippet-uk-modal-alert": { 343 | "prefix": "uk-modal-alert", 344 | "body": ["UIkit.modal.alert('${0:UIkit alert!}');"], 345 | "description": "Creates an alert box with one button" 346 | }, 347 | "snippet-uk-modal-confirm": { 348 | "prefix": "uk-modal-confirm", 349 | "body": ["UIkit.modal.confirm('${0:UIkit confirm!}');"], 350 | "description": "Creates a confirm dialog with your message and two buttons" 351 | }, 352 | "snippet-uk-modal-prompt": { 353 | "prefix": "uk-modal-prompt", 354 | "body": ["UIkit.modal.prompt('${1:Name:}', '${0:Your name}');"], 355 | "description": "Creates a dialog asking for a text input" 356 | }, 357 | "snippet-uk-modal-dialog": { 358 | "prefix": "uk-modal-dialog", 359 | "body": ["UIkit.modal.dialog('${0:

UIkit dialog!

}');"], 360 | "description": "Creates a dialog with any HTML content" 361 | }, 362 | "snippet-uk-modal-dialog-sample": { 363 | "prefix": "uk-modal-dialog-sample", 364 | "body": [ 365 | "UIkit.modal.confirm('UIkit confirm!').then(function() {", 366 | "\tconsole.log('Confirmed.')", 367 | "}, function () {", 368 | "\tconsole.log('Rejected.')", 369 | "});" 370 | ], 371 | "description": "Creates a sample dialog which processes user input" 372 | }, 373 | "snippet-uk-nav": { 374 | "prefix": "uk-nav", 375 | "body": ["UIkit.nav(${1:element}, ${0:options});"], 376 | "description": [ 377 | "Initializes a nav component with various options", 378 | "---", 379 | "targets: [CSS Selector]", 380 | "toggle: [CSS Selector]", 381 | "content: [CSS Selector]", 382 | "collapsible: [Boolean]", 383 | "multiple: [Boolean]", 384 | "transition: [String]", 385 | "animation: [String]", 386 | "duration: [Number]" 387 | ] 388 | }, 389 | "snippet-uk-nav-methods": { 390 | "prefix": "uk-nav-methods", 391 | "body": [ 392 | "$LINE_COMMENT Toggles the content pane", 393 | "UIkit.nav(${1:element}).toggle(${2:index}, ${0:animate});" 394 | ], 395 | "description": "Showcases the methods available to the nav component" 396 | }, 397 | "snippet-uk-navbar": { 398 | "prefix": "uk-navbar", 399 | "body": ["UIkit.navbar(${1:element}, ${0:options});"], 400 | "description": [ 401 | "Initializes a navbar component with various options", 402 | "---", 403 | "align: [String]", 404 | "mode: [String]", 405 | "delay-show: [Number]", 406 | "delay-hide: [Number]", 407 | "boundary: [CSS Selector]", 408 | "boundary-align: [Boolean]", 409 | "offset: [Number]", 410 | "dropbar: [Boolean]", 411 | "dropbar-mode: [String]", 412 | "duration: [Number]" 413 | ] 414 | }, 415 | "snippet-uk-navbar-events": { 416 | "prefix": "uk-navbar-events", 417 | "body": [ 418 | "$('${1:selector}').on('${2|beforeshow,show,shown,beforehide,hide,hidden|}', function() { $3 });" 419 | ], 420 | "description": "Triggers a function when a specified navbar event is triggered" 421 | }, 422 | "snippet-uk-notification": { 423 | "prefix": "uk-notification", 424 | "body": ["UIkit.notification(${0:options});"], 425 | "description": [ 426 | "Creates a notification with various options", 427 | "---", 428 | "message: [String]", 429 | "status: [String]", 430 | "timeout: [Integer]", 431 | "group: [String]", 432 | "pos: [String]" 433 | ] 434 | }, 435 | "snippet-uk-notification-events": { 436 | "prefix": "uk-notification-events", 437 | "body": ["$('${1:selector}').on('${2:close}', function() { $3 });"], 438 | "description": "Triggers a function when a specified notification event is triggered" 439 | }, 440 | "snippet-uk-notification-methods": { 441 | "prefix": "uk-notification-methods", 442 | "body": [ 443 | "$LINE_COMMENT Toggles the content pane", 444 | "UIkit.notification(${1:element}).close(${0:immediate});" 445 | ], 446 | "description": "Showcases the methods available to the notification component" 447 | }, 448 | "snippet-uk-offcanvas": { 449 | "prefix": "uk-offcanvas", 450 | "body": ["UIkit.offcanvas(${1:element}, ${0:options});"], 451 | "description": [ 452 | "Initializes a offcanvas component with various options", 453 | "---", 454 | "mode: [String]", 455 | "flip: [Boolean]", 456 | "overlay: [Boolean]" 457 | ] 458 | }, 459 | "snippet-uk-offcanvas-events": { 460 | "prefix": "uk-offcanvas-events", 461 | "body": [ 462 | "$('${1:selector}').on('${2|beforeshow,show,shown,beforehide,hide,hidden|}', function() { $3 });" 463 | ], 464 | "description": "Triggers a function when a specified offcanvas event is triggered" 465 | }, 466 | "snippet-uk-offcanvas-methods": { 467 | "prefix": "uk-offcanvas-methods", 468 | "body": [ 469 | "$LINE_COMMENT Shows the Offcanvas", 470 | "UIkit.offcanvas(${1:element}).show();", 471 | "$LINE_COMMENT Hides the Offcanvas", 472 | "UIkit.offcanvas(${0:element}).hide();" 473 | ], 474 | "description": "Showcases the methods available to the offcanvas component" 475 | }, 476 | "snippet-uk-parallax": { 477 | "prefix": "uk-parallax", 478 | "body": ["UIkit.parallax(${1:element}, ${0:options});"], 479 | "description": [ 480 | "Initializes a parallax component with various options", 481 | "---", 482 | "easing: [Number]", 483 | "target: [String]", 484 | "start: [Number]", 485 | "end: [Number]", 486 | "media: [Boolean,Number,String]" 487 | ] 488 | }, 489 | "snippet-uk-scroll": { 490 | "prefix": "uk-scroll", 491 | "body": ["UIkit.scroll(${1:element}, ${0:options});"], 492 | "description": [ 493 | "Initializes a scroll component with various options", 494 | "---", 495 | "duration: [Number]", 496 | "transition: [String]", 497 | "offset: [Number]" 498 | ] 499 | }, 500 | "snippet-uk-scrollspy": { 501 | "prefix": "uk-scrollspy", 502 | "body": ["UIkit.scrollspy(${1:element}, ${0:options});"], 503 | "description": [ 504 | "Initializes a scrollspy component with various options", 505 | "---", 506 | "cls: [String]", 507 | "hidden: [Boolean]", 508 | "offset-top: [Number]", 509 | "offset-left: [Number]", 510 | "repeat: [Boolean]", 511 | "delay: [Number]" 512 | ] 513 | }, 514 | "snippet-uk-scrollspy-events": { 515 | "prefix": "uk-scrollspy-events", 516 | "body": ["$('${1:selector}').on('${2|inview,outview|}', function() { $3 });"], 517 | "description": "Triggers a function when a specified scrollspy event is triggered" 518 | }, 519 | "snippet-uk-scrollspy-nav": { 520 | "prefix": "uk-scrollspy-nav", 521 | "body": ["UIkit.scrollspyNav(${1:element}, ${0:options});"], 522 | "description": [ 523 | "Initializes a scrollspy nav with various options", 524 | "---", 525 | "cls: [String]", 526 | "closest: [String]", 527 | "scroll: [Boolean]", 528 | "overflow: [Boolean]", 529 | "offset: [Number]" 530 | ] 531 | }, 532 | "snippet-uk-scrollspy-nav-events": { 533 | "prefix": "uk-scrollspy-nav-events", 534 | "body": ["$('${1:selector}').on('${2:active}', function() { $3 });"], 535 | "description": "Triggers a function when a specified scrollspy nav event is triggered" 536 | }, 537 | "snippet-uk-slider": { 538 | "prefix": "uk-slider", 539 | "body": ["UIkit.slider(${1:element}, ${0:options});"], 540 | "description": [ 541 | "Initializes a slider component with various options", 542 | "---", 543 | "autoplay: [Boolean]", 544 | "autoplay-interval: [Number]", 545 | "center: [Boolean]", 546 | "draggable: [Boolean]", 547 | "finite: [Boolean]", 548 | "index: [Number]", 549 | "pause-on-hover: [Boolean]", 550 | "sets: [Boolean]", 551 | "velocity: [Number]" 552 | ] 553 | }, 554 | "snippet-uk-slider-events": { 555 | "prefix": "uk-slider-events", 556 | "body": [ 557 | "$('${1:selector}').on('${2|beforeitemshow,itemshow,itemshown,beforeitemhide,itemhide,itemhidden|}', function() { $3 });" 558 | ], 559 | "description": "Triggers a function when a specified slider event is triggered" 560 | }, 561 | "snippet-uk-slider-methods": { 562 | "prefix": "uk-slider-methods", 563 | "body": [ 564 | "$LINE_COMMENT Shows the slider item", 565 | "UIkit.slider(${1:element}).show(${2:index});", 566 | "$LINE_COMMENT Starts the slider autoplay", 567 | "UIkit.slider(${3:element}).startAutoplay();", 568 | "$LINE_COMMENT Stops the slider autoplay", 569 | "UIkit.slider(${0:element}).stopAutoplay();" 570 | ], 571 | "description": "Showcases the methods available to the slider component" 572 | }, 573 | "snippet-uk-slideshow": { 574 | "prefix": "uk-slideshow", 575 | "body": ["UIkit.slideshow(${1:element}, ${0:options});"], 576 | "description": [ 577 | "Initializes a slideshow with various options", 578 | "---", 579 | "animation: [String]", 580 | "autoplay: [Boolean]", 581 | "autoplay-interval: [Number]", 582 | "draggable: [Boolean]", 583 | "finite: [Boolean]", 584 | "pause-on-hover: [Boolean]", 585 | "index: [Number]", 586 | "velocity: [Number]", 587 | "ratio: [Boolean/String]", 588 | "min-height: [Boolean/Number]", 589 | "max-height: [Boolean/Number]" 590 | ] 591 | }, 592 | "snippet-uk-slideshow-events": { 593 | "prefix": "uk-slideshow-events", 594 | "body": [ 595 | "$('${1:selector}').on('${2|beforeitemshow,itemshow,itemshown,beforeitemhide,itemhide,itemhidden|}', function() { $3 });" 596 | ], 597 | "description": "Triggers a function when a specified slideshow event is triggered" 598 | }, 599 | "snippet-uk-slideshow-methods": { 600 | "prefix": "uk-slideshow-methods", 601 | "body": [ 602 | "$LINE_COMMENT Shows the slideshow item", 603 | "UIkit.slideshow(${1:element}).show(${2:index});", 604 | "$LINE_COMMENT Starts the slideshow autoplay", 605 | "UIkit.slideshow(${3:element}).startAutoplay();", 606 | "$LINE_COMMENT Stops the slideshow autoplay", 607 | "UIkit.slideshow(${0:element}).stopAutoplay();" 608 | ], 609 | "description": "Showcases the methods available to the slideshow component" 610 | }, 611 | "snippet-uk-sortable": { 612 | "prefix": "uk-sortable", 613 | "body": ["UIkit.sortable(${1:element}, ${0:options});"], 614 | "description": [ 615 | "Initializes a sortable with various options", 616 | "---", 617 | "group: [String]", 618 | "animation: [Number]", 619 | "threshold: [Number]", 620 | "cls-item: [String]", 621 | "cls-placeholder: [String]", 622 | "cls-drag: [String]", 623 | "clsDrag-state: [String]", 624 | "cls-base: [String]", 625 | "clsNo-drag: [String]", 626 | "cls-empty: [String]", 627 | "cls-custom: [String]", 628 | "handle: [String]" 629 | ] 630 | }, 631 | "snippet-uk-sortable-events": { 632 | "prefix": "uk-sortable-events", 633 | "body": [ 634 | "$('${1:selector}').on('${2|start,stop,moved,added,removed|}', function() { $3 });" 635 | ], 636 | "description": "Triggers a function when a specified sortable event is triggered" 637 | }, 638 | "snippet-uk-sticky": { 639 | "prefix": "uk-sticky", 640 | "body": ["UIkit.sticky(${1:element}, ${0:options});"], 641 | "description": [ 642 | "Initializes a sticky component with various options", 643 | "---", 644 | "top: [Number|viewport height|CSS selector]", 645 | "bottom: [Boolean|CSS selector]", 646 | "offset: [Number]", 647 | "animation: [String]", 648 | "cls-active: [String]", 649 | "cls-inactive: [String]", 650 | "cls-below: [String]", 651 | "width-element: [CSS selector]", 652 | "show-on-up: [Boolean]", 653 | "media: [Integer|String]", 654 | "target-offset: [Boolean|Number]" 655 | ] 656 | }, 657 | "snippet-uk-sticky-events": { 658 | "prefix": "uk-sticky-events", 659 | "body": ["$('${1:selector}').on('${2|active,inactive|}', function() { $3 });"], 660 | "description": "Triggers a function when a specified sticky event is triggered" 661 | }, 662 | "snippet-uk-svg": { 663 | "prefix": "uk-svg", 664 | "body": ["UIkit.svg(${1:element}, ${0:options});"], 665 | "description": ["Initializes a svg component with various options", "---", "src: [String]"] 666 | }, 667 | "snippet-uk-svg-properties": { 668 | "prefix": "uk-svg-properties", 669 | "body": [ 670 | "UIkit.svg(element).svg.then(function(svg) { ${1:svg.querySelector('path').style.stroke} = 'red'; })" 671 | ], 672 | "description": "A JavaScript Promise that will resolve with the added SVG Node" 673 | }, 674 | "snippet-uk-switcher": { 675 | "prefix": "uk-switcher", 676 | "body": ["UIkit.switcher(${1:element}, ${0:options});"], 677 | "description": [ 678 | "Initializes a switcher component with various options", 679 | "---", 680 | "connect: [CSS selector]", 681 | "toggle: [CSS selector]", 682 | "itemNav: [CSS selector]", 683 | "active: [Number]", 684 | "animation: [String]", 685 | "duration: [Number]", 686 | "swiping: [Boolean]", 687 | "followFocus: [Boolean]" 688 | ] 689 | }, 690 | "snippet-uk-switcher-events": { 691 | "prefix": "uk-switcher-events", 692 | "body": [ 693 | "$('${1:selector}').on('${2|beforeshow,show,shown,beforehide,hide,hidden|}', function() { $3 });" 694 | ], 695 | "description": "Triggers a function when a specified switcher event is triggered" 696 | }, 697 | "snippet-uk-switcher-methods": { 698 | "prefix": "uk-switcher-methods", 699 | "body": [ 700 | "$LINE_COMMENT Shows the Switcher item with given index", 701 | "UIkit.switcher(${1:element}).show();" 702 | ], 703 | "description": "Showcases the methods available to the switcher component" 704 | }, 705 | "snippet-uk-tab": { 706 | "prefix": "uk-tab", 707 | "body": ["UIkit.tab(${1:element}, ${0:options});"], 708 | "description": [ 709 | "Initializes a tab component with various options", 710 | "---", 711 | "connect: [CSS selector]", 712 | "toggle: [CSS selector]", 713 | "active: [Number]", 714 | "animation: [String]", 715 | "duration: [Number]", 716 | "swiping: [Boolean]", 717 | "media: [Integer|String]" 718 | ] 719 | }, 720 | "snippet-uk-tab-events": { 721 | "prefix": "uk-tab-events", 722 | "body": [ 723 | "$('${1:selector}').on('${2|beforeshow,show,shown,beforehide,hide,hidden|}', function() { $3 });" 724 | ], 725 | "description": "Triggers a function when a specified tab event is triggered" 726 | }, 727 | "snippet-uk-tab-methods": { 728 | "prefix": "uk-tab-methods", 729 | "body": [ 730 | "$LINE_COMMENT Shows the Tab item with given index", 731 | "UIkit.tab(${1:element}).show(${0:index});" 732 | ], 733 | "description": "Showcases the methods available to the tab component" 734 | }, 735 | "snippet-uk-toggle": { 736 | "prefix": "uk-toggle", 737 | "body": ["UIkit.toggle(${1:element}, ${0:options});"], 738 | "description": [ 739 | "Initializes a toggle component with various options", 740 | "---", 741 | "target: [String]", 742 | "mode: [String]", 743 | "cls: [String]", 744 | "animation: [String]", 745 | "duration: [Number]", 746 | "queued: [Boolean]" 747 | ] 748 | }, 749 | "snippet-uk-toggle-events": { 750 | "prefix": "uk-toggle-events", 751 | "body": [ 752 | "$('${1:selector}').on('${2|beforeshow,show,shown,beforehide,hide,hidden|}', function() { $3 });" 753 | ], 754 | "description": "Triggers a function when a specified toggle event is triggered" 755 | }, 756 | "snippet-uk-toggle-methods": { 757 | "prefix": "uk-toggle-methods", 758 | "body": [ 759 | "$LINE_COMMENT Toggles the Toggle's target", 760 | "UIkit.toggle(${0:element}).toggle();" 761 | ], 762 | "description": "Showcases the methods available to the toggle component" 763 | }, 764 | "snippet-uk-tooltip": { 765 | "prefix": "uk-tooltip", 766 | "body": ["UIkit.tooltip(${1:element}, ${0:options});"], 767 | "description": [ 768 | "Initializes a tooltip component with various options", 769 | "---", 770 | "pos: [String]", 771 | "offset: [Number]", 772 | "animation: [String]", 773 | "duration: [Number]", 774 | "delay: [Number]", 775 | "cls: [String]" 776 | ] 777 | }, 778 | "snippet-uk-tooltip-events": { 779 | "prefix": "uk-tooltip-events", 780 | "body": [ 781 | "$('${1:selector}').on('${2|beforeshow,show,shown,beforehide,hide,hidden|}', function() { $3 });" 782 | ], 783 | "description": "Triggers a function when a specified tooltip event is triggered" 784 | }, 785 | "snippet-uk-tooltip-methods": { 786 | "prefix": "uk-tooltip-methods", 787 | "body": [ 788 | "$LINE_COMMENT Shows the Tooltip", 789 | "UIkit.tooltip(${1:element}).show();", 790 | "$LINE_COMMENT Hides the Tooltip", 791 | "UIkit.tooltip(${0:element}).hide();" 792 | ], 793 | "description": "Showcases the methods available to the tooltip component" 794 | }, 795 | "snippet-uk-upload": { 796 | "prefix": "uk-upload", 797 | "body": ["UIkit.upload(${1:element}, ${0:options});"], 798 | "description": [ 799 | "Initializes an upload component with various options", 800 | "---", 801 | "url: [String]", 802 | "multiple: [Boolean]", 803 | "name: [String]", 804 | "type: [String]", 805 | "params: [Object]", 806 | "allow: [String]", 807 | "mime: [String]", 808 | "concurrent: [Number]", 809 | "data-type: [String]", 810 | "msg-invalid-mime: [String]", 811 | "msg-invalid-name: [String]", 812 | "cls-dragover: [String]", 813 | "abort: [Function]", 814 | "before-all: [Function]", 815 | "before-send: [Function]", 816 | "complete: [Function]", 817 | "complete-all: [Function]", 818 | "error: [Function]", 819 | "load: [Function]", 820 | "load-end: [Function]", 821 | "load-start: [Function]", 822 | "progress: [Function]", 823 | "fail: [Function]" 824 | ] 825 | }, 826 | "snippet-uk-upload-events": { 827 | "prefix": "uk-upload-events", 828 | "body": ["$('${1:selector}').on('${2:upload}', function() { $3 });"], 829 | "description": "Triggers a function when a specified upload event is triggered" 830 | }, 831 | "snippet-uk-upload-sample": { 832 | "prefix": "uk-upload-sample", 833 | "body": [ 834 | "(function ($) {", 835 | "\tvar bar = $(\"#progressbar\")[0];", 836 | "\tUIkit.upload('.test-upload', {", 837 | "\r\t\turl: '',", 838 | "\t\tmultiple: true,", 839 | "\r\t\tbeforeSend: function() { console.log('beforeSend', arguments); },", 840 | "\t\tbeforeAll: function() { console.log('beforeAll', arguments); },", 841 | "\t\tload: function() { console.log('load', arguments); },", 842 | "\t\terror: function() { console.log('error', arguments); },", 843 | "\t\tcomplete: function() { console.log('complete', arguments); },", 844 | "\r\t\tloadStart: function (e) {", 845 | "\t\t\tconsole.log('loadStart', arguments);", 846 | "\r\t\t\tbar.removeAttribute('hidden');", 847 | "\t\t\tbar.max = e.total;", 848 | "\t\t\tbar.value = e.loaded;", 849 | "\t\t},", 850 | "\r\t\tprogress: function (e) {", 851 | "\t\t\tconsole.log('progress', arguments);", 852 | "\r\t\t\tbar.max = e.total;", 853 | "\t\t\tbar.value = e.loaded;", 854 | "\t\t},", 855 | "\r\t\tloadEnd: function (e) {", 856 | "\t\t\tconsole.log('loadEnd', arguments);", 857 | "\r\t\t\tbar.max = e.total;", 858 | "\t\t\tbar.value = e.loaded;", 859 | "\t\t},", 860 | "\r\t\tcompleteAll: function () {", 861 | "\t\t\tconsole.log('completeAll', arguments);", 862 | "\r\t\t\tsetTimeout(function () {", 863 | "\t\t\t\tbar.setAttribute('hidden', 'hidden');", 864 | "\t\t\t}, 1000);", 865 | "\r\t\t\talert('Upload Completed');", 866 | "\t\t}", 867 | "\t});", 868 | 869 | "})(jQuery);" 870 | ], 871 | "description": "Creates a sample upload script based on official docs" 872 | }, 873 | "snippet-uk-video": { 874 | "prefix": "uk-video", 875 | "body": ["UIkit.video(${1:element}, ${0:options});"], 876 | "description": [ 877 | "Initializes a video component with various options", 878 | "---", 879 | "autoplay: [Boolean|String]", 880 | "automute: [Boolean]" 881 | ] 882 | } 883 | } 884 | --------------------------------------------------------------------------------