This extension provides code snippets for Fomantic-UI
Fomantic-UI 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.
This project helps you to write faster Fomantic-UI 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.
Add or edit files in src/components.
Run npm start to compile changes on snippets folder.
Now you can use VS Code Extension Readme to learn how to try and debug your code.
| 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 |
| 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!