UIkit Sublime Plugin
Auto-complete plugin for UIKit classes and data attributes.
UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.
The plugin can be installed through Sublime Text’s Package Control. Just search for UIkit autocomplete.
Alternatively, you can clone this repository to the Packages directory of your Sublime installation. In Mac OS, this looks as follows:
cd ~/Library/Application Support/Sublime Text 3/Packages/ git clone firstname.lastname@example.org:uikit/uikit-sublime.git
Class name autocompletion: When inside double quotes of a class attribute (
class="[HERE]"), suggestions will appear for all
Data attributes autocompletion: When inside a tag, but outside of a quoted attribute string (
<div [HERE] class="uk-container" [OR-HERE]>), suggestions will appear for all
Markup snippets: Anywhere in your document, type uikit to see all available snippets. Scroll through them with your cursor keys and hit
RETURN to insert a snippet or
ESC to cancel. Use
TAB to step through positions in the snippet.
Note: In order for the suggestions to appear, your document needs to have the syntax set to HTML (or any child syntax like
HTML (PHP)). You can set the syntax from the menu
View > Syntax or via the Command Palette.
The following information explains how this plugin is maintained. Users do not need to care about those steps.
To keep this plugin in sync with UIkit, class names, data attributes and markup snippets are extracted from the UIkit code base using a Gulp task provided by UIkit itself.
cd path/to/uikit gulp gulp sublime
This will generate a file
/dist/sublime/uikit_completions.py. Replace the according parts of the plugin’s python file with the generated python snippet.
Snippets are generated in the
/dist/sublime/snippets directory. Copy all files to the plugin’s
To make a new version of the plugin available via package control, a new version tag needs to be created.