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.

demo

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!

Fomantic-UI Snippets

Jose Luis Tresserras Merino

Fomantic-UI snippets for Visual Studio Code

Introduction

Main purpose

How to work on this repo

Shortcut dictionary

CSS

JS