Fomantic-UI snippets for Visual Studio Code

Introduction

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.

Main purpose

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.

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 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!