# Fomantic-UI snippets for Visual Studio Code

## Introduction

This extension provides code snippets for [Fomantic-UI](https://fomantic-ui.com/)

[Fomantic-UI](https://fomantic-ui.com/) allows developers to build beautiful websites fast, with concise HTML, intuitive javascript, and simplified debugging, helping make front-end development a delightful experience. Fomantic is responsively designed allowing your website to scale on multiple devices.

## Main purpose
This project helps you to write faster [Fomantic-UI](https://fomantic-ui.com/) components, this means that is not needed to add colors, sizes and different types of *personalization*.
This has a reason, if you add more snippets, will be a mess searching components with lots of different options, it is easier and faster to write yourself that personalization.

![demo](https://github.com/fomantic/Fomantic-UI-vscode-snippets/blob/master/images/demo.gif)

## How to work on this repo
Add or edit files in `src/components`.\
Run `npm start` to compile changes on `snippets` folder.\
Now you can use [VS Code Extension Readme](https://github.com/fomantic/Fomantic-UI-vscode-snippets/blob/master/vsc-extension-quickstart.md) to learn how to try and debug your code.

## Shortcut dictionary

### CSS 
| **Prefix** | **Description** |
|---|---|
| **Accordion** | |
| `ui-accordion` | A standard accordion |
| `ui-accordion-styled` | A styled accordion adds basic formatting |
| `ui-accordion-fluid` | An accordion can take up the width of its container |
| **Ad** | |
| `ui-ad` | A standard ad |
| `ui-ad-button` | An ad can use button ad unit size |
| `ui-ad-skycraper` | An ad can use skyscraper ad unit size |
| `ui-ad-banner` | An ad can use banner ad unit size |
| `ui-ad-laderboard` | An ad can use leaderboard ad unit size |
| `ui-ad-panorama` | An ad can use panorama ad unit size |
| `ui-ad-netboard` | An ad can use netboard ad unit size |
| **Breadcrumb** | |
| `ui-breadcrumb` | A standard breadcrumb |
| **Button** | |
| `ui-button` | Creates a default button |
| `ui-button-animated` | A button can animate to show hidden content |
| `ui-button-labeled` | A button can appear alongside a label |
| `ui-button-labeled-icon` | A button can use an icon as a label |
| `ui-button-icon` | A button can have only an icon |
| `ui-button-basic` | A basic button is less pronounced |
| `ui-button-tertiary` | An none bordered less important button |
| `ui-button-disabled` | A button can show it is currently unable to be interacted with |
| `ui-button-loading` | A button can show a loading indicator |
| `ui-button-social` | A button can be formatted to link to a social website |
| `ui-button-compact` | A button can reduce its padding to fit into tighter spaces |
| `ui-button-fluid` | A button can take the width of its container |
| `ui-button-circular` | A button can be circular |
| **Buttons** | |
| `ui-buttons` | Buttons can exist together as a group |
| `ui-buttons-icon` | Button groups can show groups of icons |
| `ui-buttons-conditionals` | Button groups can contain conditionals |
| **Calendar** | |
| `ui-calendar` | A standard calendar |
| `ui-calendar` | An inline calendar isn't shown in a popup |
| `ui-calendar-disabled` | A disabled calendar does not allow user interaction |
| **Card** | |
| `ui-card` | A single card. |
| `ui-card-image` | A card can contain an image |
| `ui-card-fluid` | A fluid card takes up the width of its container |
| `ui-card-centered` | A card can center itself inside its container |
| `ui-card-horizontal` | A card can display horizontally |
| `ui-card-raised` | A card may be formatted to raise above the page. |
| `ui-card-stackable` | A group of cards can automatically stack rows to a single columns on mobile devices |
| `ui-card-stackable` | A group of cards can double its column width for mobile |
| **Cards** | |
| `ui-cards` | A group of cards. |
| **Checkbox** | |
| `ui-checkbox` | A standard checkbox |
| `ui-checkbox-radio` | A checkbox can be formatted as a radio element. This means it is an exclusive option. |
| `ui-checkbox-slider` | A checkbox can be formatted to emphasize the current selection state |
| `ui-checkbox-toggle` | A checkbox can be formatted to show an on or off choice |
| `ui-checkbox-read-only` | A checkbox can be read-only and unable to change states |
| `ui-checkbox-read-only` | A checkbox can be checked |
| `ui-checkbox-disabled` | A checkbox can be read-only and unable to change states |
| `ui-checkbox-fitted` | A fitted checkbox does not leave padding for a label |
| **Comments** | |
| `ui-comments` | A basic list of comments |
| `ui-comments-threaded` | A comment list can be threaded to showing the relationship between conversations |
| `ui-comments-minimal` | Comments can hide extra information unless a user shows intent to interact with a comment. |
| **Container** | |
| `ui-container` | Creates a container |
| **Dimmer** | |
| `ui-dimmer` | A dimmer can display or hide content |
| `ui-dimmer-page` | A dimmer can be formatted to be fixed to the page |
| `ui-dimmer-active` | An active dimmer will dim its parent container |
| `ui-dimmer-disabled` | A disabled dimmer cannot be activated |
| `ui-dimmer-simple` | A dimmer can be controlled without Javascript |
| **Divider** | |
| `ui-divider` | Creates a divider |
| `ui-divider-vertical` | Creates a vertical divider |
| `ui-divider-fitted` | A divider can be fitted, without any space above or below it. |
| `ui-divider-hidden` | A hidden divider divides content without creating a dividing line |
| `ui-divider-section` | A divider can provide greater margins to divide sections of content |
| `ui-divider-clearing` | A divider can clear the contents above it |
| **Dropdown** | |
| `ui-dropdown` | A dropdown |
| `ui-dropdown-inline` | A dropdown can be formatted to appear inline in other content |
| `ui-dropdown-pointing` | A dropdown can be formatted so that its menu is pointing |
| `ui-dropdown-simple` | A simple dropdown can open without Javascript |
| `ui-dropdown-loading` | A dropdown can show that it is currently loading data |
| `ui-dropdown-active` | An active dropdown has its menu open |
| `ui-dropdown-disabled` | A disabled dropdown menu or item does not allow user interaction |
| `ui-dropdown-scroling` | A dropdown can have its menu scroll |
| `ui-dropdown-compact` | A compact dropdown has no minimum width |
| `ui-dropdown-fluid` | A dropdown can take the full width of its parent |
| `ui-dropdown-selection` | A dropdown can be used to select between choices in a form |
| `ui-dropdown-selection-search` | A selection dropdown can allow a user to search through a large list of choices. |
| `ui-dropdown-selection-clearable` | A clearable selection dropdown can allow a user to cancel to cancel a previous selection |
| `ui-dropdown-selection-loading` | A dropdown can show that it is currently loading data |
| **Embed** | |
| `ui-embed` | An embed can display any web content |
| `ui-embed-simple` | An embed can display any web content with no JavaScript |
| **Flyout** | |
| `ui-flyout` | Flyouts are the result of a marriage between Modal and Sidebar |
| **Emoji** | |
| `ui-emoji` | You can provide the emoji shortname with or without colons |
| **Feed** | |
| `ui-feed` | A feed |
| **Flag** | |
| `ui-flag` | A flag can use the two digit country code, the full name, or a common alias |
| **Form** | |
| `ui-form` | A form |
| `ui-form-success` | If a form is in an success state, it will automatically show any success message blocks. |
| `ui-form-equal-width` | Individual fields may be disabled |
| `ui-form-field` | A field is a form element containing a label and an input |
| `ui-form-fields` | A set of fields can appear grouped together |
| `ui-form-fields` | Fields can show related choices |
| `ui-form-fields` | Fields can automatically divide fields to be equal width |
| `ui-form-fields` | Multiple fields may be inline in a row |
| `ui-form-field-disabled` | Individual fields may be disabled |
| `ui-form-field-inline` | A field can have its label next to instead of above it. |
| `ui-form-field-required` | A field can show that input is mandatory |
| **Grid** | |
| `ui-grid` | A grid is a structure with a long history used to align negative space in designs. Using a grid makes content appear to flow more naturally on your page. |
| `ui-grid-row` | Rows are groups of columns which are aligned horizontally |
| `ui-grid-relaxed` | Grid columns are separated by areas of white space referred to as "gutters". Gutters improve legibility by providing, negative space between page elements. |
| `ui-grid-equal-width` | The equal width variation will automatically divide column width evenly. This is useful with dynamic content where you do not know the column count in advance. |
| `ui-grid-centered` | The equal width variation will automatically divide column width evenly. This is useful with dynamic content where you do not know the column count in advance. |
| `ui-grid-stackable` | A stackable grid will automatically stack rows to a single columns on mobile devices |
| `ui-grid-reverse` | Fomantic includes special reversed variations that allow you to reverse the order of columns or rows by device |
| `ui-grid-divided` | A grid can have dividers between its columns or rows |
| `ui-grid-celled` | A grid can have rows divided into cells |
| **Header** | |
| `ui-header` | Headers may be oriented to give the hierarchy of a section in the context of the page |
| `ui-header-icon` | A header can be formatted to emphasize an icon |
| `ui-header-sub` | Headers may be formatted to label smaller or de-emphasized content. |
| `ui-header-disabled` | A header can show that it is inactive |
| `ui-header-dividing` | A header can be formatted to divide itself from the content below it |
| `ui-header-block` | A header can be formatted to appear inside a content block |
| **Icon** | |
| `ui-icon` | An icon set contains an arbitrary number of glyphs |
| `ui-icon-disabled` | An icon can show that it is disabled |
| `ui-icon-loading` | An icon can be used as a simple loader |
| `ui-icon-fitted` | An icon can be fitted, without any space to the left or right of it. |
| `ui-icon-group` | Several icons can be used together as a group |
| **Image** | |
| `ui-image` | An image |
| `ui-image-disabled` | An image can show that it is disabled and cannot be selected |
| `ui-image-avatar` | An image may be formatted to appear inline with text as an avatar |
| `ui-image-bordered` | An image may include a border to emphasize the edges of white or transparent content |
| `ui-image-fluid` | An image can take up the width of its container |
| `ui-image-rounded` | An image may appear rounded |
| `ui-image-circular` | An image may appear circular |
| **Input** | |
| `ui-input` | A standard input |
| `ui-input-disabled` | An input field can show that it is disabled |
| `ui-input-error` | An input field can show the data contains errors |
| `ui-input-icon` | An input can be formatted with an icon |
| `ui-input-labeled` | An input can be formatted with a label |
| `ui-input-action` | An input can be formatted to alert the user to an action they may perform |
| `ui-input-transparent` | A transparent input has no background |
| `ui-input-fluid` | An input can take the size of its container |
| `ui-input-textarea` | Using the input class you can also use some features on textarea aswell |
| **Items** | |
| `ui-items` | A group of items. |
| **Label** | |
| `ui-label` | A label |
| `ui-label-image` | A label can be formatted to emphasize an image |
| `ui-label-pointing` | A label can point to content next to it |
| `ui-label-corner` | A label can position itself in the corner of an element |
| `ui-label-tag` | A label can appear as a tag |
| `ui-label-ribbon` | A label can appear as a ribbon attaching itself to an element. |
| `ui-label-attached` | A label can attach to a content segment |
| `ui-label-attached` | A horizontal label is formatted to label content along-side it horizontally |
| `ui-label-floating` | A label can float above or below another element. |
| `ui-label-detail` | A label can float above or below another element. |
| `ui-label-detail` | A label can float above or below another element. |
| `ui-label-circular` | A label can be circular |
| `ui-label-basic` | A label can reduce its complexity |
| **List** | |
| `ui-list` | A list groups related content |
| `ui-list-bulleted` | A list can mark items with a bullet |
| `ui-list-ordered` | A list can be ordered numerically |
| `ui-list-link` | A list can be specially formatted for navigation links |
| `ui-list-horizontal` | A list can be formatted to have items appear horizontally |
| `ui-list-selection` | A selection list formats list items as possible choices |
| `ui-list-animated` | A list can animate to set the current item apart from the list |
| `ui-list-relaxed` | A list can relax its padding to provide more negative space |
| `ui-list-divided` | A list can show divisions between content |
| `ui-list-divided` | A list can divide its items into cells |
| **Loader** | |
| `ui-loader` | A loader |
| `ui-loader-active` | A loader can be active or visible |
| `ui-loader-disabled` | A loader can be disabled or hidden |
| `ui-loader-inline` | Loaders can appear inline with content |
| `ui-loader-double` | Loaders can also appear in double animation style. Can be combined with any color or speed. |
| `ui-loader-elastic` | Loaders can also appear in elastic animation style. Can be combined with any color or speed. |
| **Menu** | |
| `ui-menu` | Creates a menu |
| `ui-menu-secondary` | A menu can adjust its appearance to de-emphasize its contents |
| `ui-menu-pointing` | A menu can point to show its relationship to nearby content |
| `ui-menu-tabular` | A menu can be formatted to show tabs of information |
| `ui-menu-text` | A menu can be formatted for text conten |
| `ui-menu-vertical` | A vertical menu displays elements vertically.. |
| `ui-menu-pagination` | A pagination menu is specially formatted to present links to pages of content |
| `ui-menu-fixed` | A menu can be fixed to a side of its context |
| `ui-menu-stackable` | A menu can stack at mobile resolutions |
| `ui-menu-icon` | A menu may have just icons |
| `ui-menu-fluid` | A vertical menu may take the size of its container. (A horizontal menu does this by default) |
| `ui-menu-compact` | A menu can take up only the space necessary to fit its content |
| `ui-menu-borderless` | A menu item or menu can have no borders |
| **Message** | |
| `ui-message` | A basic message |
| `ui-message-icon` | A basic message |
| `ui-message-hidden` | A message can be hidden |
| `ui-message-visible` | A message can be set to visible to force itself to be shown. |
| `ui-message-floating` | A message can float above content that it is related to |
| `ui-message-compact` | A message can only take up the width of its content. |
| `ui-message-attached` | A message can be formatted to attach itself to other content |
| **Modal** | |
| `ui-modal` | A standard modal |
| `ui-modal-basic` | A modal can reduce its complexity |
| `ui-modal-active` | An active modal is visible on the page |
| **Placeholder** | |
| `ui-placeholder` | A placeholder is used to reserve space for content that soon will appear in a layout. |
| `ui-placeholder-fluid` | A fluid placeholder takes up the width of its container |
| **Popup** | |
| `ui-popup` | Creates a popup |
| `ui-popup-fluid` | A fluid popup will take up the entire width of its offset container |
| `ui-popup-flowing` | A popup can have no maximum width and continue to flow to fit its content |
| **Progress** | |
| `ui-progress` | A standard progress bar |
| `ui-progress-indicating` | An indicating progress bar visually indicates the current level of progress of a task |
| `ui-progress-active` | A progress bar can show activity |
| `ui-progress-disabled` | A progress bar can be disabled |
| `ui-progress-indeterminate` | A progress bar can be shown in different indeterminate states. |
| **Rail** | |
| `ui-rail` | A rail can be presented on the left or right side of a container |
| `ui-rail-internal` | A rail can attach itself to the inside of a container |
| `ui-rail-dividing` | A rail can create a division between itself and a container |
| `ui-rail-dividing` | A rail can appear attached to the main viewport |
| `ui-rail-close` | A rail can appear closer to the main viewport |
| **Rating** | |
| `ui-rating` | A basic rating |
| `ui-rating-basic` | A rating can be started done without JavaScript |
| `ui-rating-disabled` | A rating can be started in non-interactive mode by adding a disabled class |
| **Reveal** | |
| `ui-reveal-fade` | An element can disappear to reveal content below |
| `ui-reveal-move` | An element can move in a direction to reveal content |
| `ui-reveal-rotate` | An element can rotate to reveal content below |
| `ui-reveal-instant` | An element can show its content without delay |
| `ui-reveal-disabled` | A disabled reveal will not animate when hovered |
| **Search** | |
| `ui-search` | A search can display a set of results |
| `ui-search-category` | A search can display results from remote content ordered by categories |
| `ui-search-loading` | A search can show a loading indicator |
| `ui-search-disabled` | A search can show it is currently unable to be interacted with |
| `ui-search-scrolling` | A search can have its results scroll. |
| `ui-search-fluid` | A search can have its results take up the width of its container |
| **Segment** | |
| `ui-segment` | A segment of content |
| `ui-segment-placeholder` | A segment of content |
| `ui-segment-raised` | A segment may be formatted to raise above the page. |
| `ui-segment-stacked` | A segment can be formatted to show it contains multiple pages |
| `ui-segment-piled` | A segment can be formatted to look like a pile of pages |
| `ui-segment-vertical` | A vertical segment formats content to be aligned as part of a vertical group |
| `ui-segment-basic` | A basic segment has no special formatting |
| `ui-segment-basic` | A basic segment has no special formatting |
| `ui-segment-disabled` | A segment may show its content is disabled |
| `ui-segment-padded` | A segment may show its content is disabled |
| `ui-segment-fitted` | A segment can remove its padding, vertically or horizontally |
| `ui-segment-compact` | A segment may take up only as much space as is necessary |
| `ui-segment-circular` | A segment can be circular |
| **Segments** | |
| `ui-segments` | A group of segments can be formatted to appear together |
| `ui-segments-horizontal` | A segment group can appear horizontally |
| `ui-segments-compact` | A segment group can appear horizontally |
| **Shape** | |
| `ui-shape` | A shape is a three dimensional object including any flat content as a side. |
| `ui-shape-cube` | A cube shape is formatted so that each side is the face of a cube |
| `ui-shape-text` | A text shape is formatted to allow for sides of text to be displayed |
| **Sidebar** | |
| `ui-sidebar` | Creates a sidebar |
| `ui-sidebar-visible` | A sidebar can be visible on the page |
| `ui-sidebar-dimmed` | A pusher can be dimmed |
| **Slider** | |
| `ui-slider` | Creates a slider |
| `ui-slider-labeled` | A slider that show its labels |
| `ui-slider-labeled-ticked` | A slider that show its labels and ticks |
| `ui-slider-range` | A range slider which allow you to select a range between two values |
| `ui-slider-disabled` | A slider can appear disabled |
| `ui-slider-disabled` | A slider can be reversed |
| `ui-slider-vertical` | A slider can be vertical |
| **Statistic** | |
| `ui-statistic` | A statistic can display a value with a label above or below it. |
| `ui-statistic-horizontal` | A statistic can present its measurement horizontally |
| `ui-statistic-stackable` | A statistic can automatically stack rows to a single columns on mobile devices |
| **Statistics** | |
| `ui-statistics` | A group of statistics |
| **Step** | |
| `ui-step` | A single step |
| `ui-step-completed` | A completed step |
| `ui-step-active` | A active step |
| `ui-step-icon` | A icon step |
| `ui-step-disabled` | A disabled step |
| **Steps** | |
| `ui-steps` | A set of steps |
| `ui-steps-vertical` | A set of vertical steps |
| `ui-steps-stackable` | A step can stack vertically only on smaller screens |
| `ui-steps-unstackable` | A step can prevent itself from stacking on mobile |
| `ui-steps-fluid` | A fluid step takes up the width of its container |
| `ui-steps-attached` | Steps can be attached to other elements |
| **Stiky** | |
| `ui-stiky` | Sticky content stays fixed to the browser viewport while another column of content is visible on the page. |
| **Tabular** | |
| `ui-tabular-active` | A tab can be activated, and visible on the page |
| `ui-tabular-loading` | A tab can display a loading indicator 
| **Table** | |
| `ui-table` | A standard table |
| `ui-table-definition` | A table may be formatted to emphasize a first column that defines a rows content |
| `ui-table-structured` | A table can be formatted to display complex structured data |
| `ui-table-single-line` | A table can specify that its cell contents should remain on a single line, and not wrap. |
| `ui-table-fixed` | A table can use table-layout: fixed a special faster form of table rendering that does not resize table cells based on content. |
| `ui-table-stackable` | A table can specify how it stacks table content responsively |
| `ui-table-unstackable` | A table can specify how it stacks table content responsively |
| `ui-table-striped` | A table can stripe alternate rows of content with a darker color to increase contrast |
| `ui-table-celled` | A table may be divided each row into separate cells |
| `ui-table-basic` | A table can reduce its complexity to increase readability. |
| `ui-table-collapsing` | A table can be collapsing, taking up only as much space as its rows. |
| `ui-table-sortable` | A table may allow a user to sort contents by clicking on a table header. |
| `ui-table-padded` | A table may sometimes need to be more padded for legibility |
| `ui-table-compact` | A table may sometimes need to be more compact to make more rows visible at a time |
| **Text** | |
| `ui-text` | A text is always used inline and uses one color from the FUI color palette |

### JS
| **Prefix** | **Description** |
|---|---|
| **Accordion** | |
| `ui-accordion` | A standard accordion |
| **Api** | |
| `ui-api` | API allows elements to trigger actions on a server 
| **Container** | |
| `ui-container` | API allows elements to trigger actions on a server |
| **Calendar** | |
| `ui-calendar` | A standard calendar |
| **Checkbox** | |
| `ui-checkbox` | A standard checkbox |
| **Dimmer** | |
| `ui-dimmer` | A simple dimmer displays no content |
| **Dropdown** | |
| `ui-dropdown` | Initializes dropdown with jQuery |
| **Embed** | |
| `ui-embed` | Creates a container |
| **Flyout** | |
| `ui-flyout` | Initializes flyout with jQuery |
| **Form** | |
| `ui-form` | A form validation behavior checks data against a set of criteria before passing it along to the server |
| **Modal** | |
| `ui-modal` | A standard modal |
| **Popup** | |
| `ui-popup` | Creates a popup |
| **Progress** | |
| `ui-progress` | A standard progress bar |
| **Rating** | |
| `ui-rating` | A basic rating |
| **Search** | |
| `ui-search` | A search can display a set of results |
| **Shape** | |
| `ui-shape` | A shape is a three dimensional object including any flat content as a side. |
| **Sidebar** | |
| `ui-sidebar` | Creates a sidebar |
| **Slider** | |
| `ui-slider` | Creates a slider |
| **Stiky** | |
| `ui-stiky` | Sticky content stays fixed to the browser viewport while another column of content is visible on the page. |
| **Tabular** | |
| `ui-tabular` | Creates a tabular |
| **Toast** | |
| `ui-toast` |  minimal toast will just display a message. |
| **Transition** | |
| `ui-transition` | A transition is an animation usually used to move content in or out of view |
| **Visibility** | |
| `ui-visibility` | Visibility provides a set of callbacks for when a content appears in the viewport |

**Enjoy!**