### Import and Use Fomantic UI Collections Tasks with Gulp

Source: https://github.com/fomantic/fomantic-ui/blob/develop/tasks/collections/README.md

Import the 'install' task collection and then start it. Ensure the path to the semantic folder is correctly specified.

```javascript
const gulp = require('gulp');
// modified to point to semantic folder
const install = require('tasks/collections/install');
gulp = install(gulp);

// tasks are now injected and ready to be used
gulp.start('install');
```

--------------------------------

### Install Component with Bower

Source: https://github.com/fomantic/fomantic-ui/blob/develop/tasks/config/admin/templates/README.md

Use this command to install a single Fomantic UI component using Bower.

```bash
bower install fomantic-ui-{component}
```

--------------------------------

### Install Component with NPM

Source: https://github.com/fomantic/fomantic-ui/blob/develop/tasks/config/admin/templates/README.md

Use this command to install a single Fomantic UI component using NPM.

```bash
npm install fomantic-ui-{component}
```

--------------------------------

### Responsive Grid - Stackable Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

Demonstrates a stackable grid where columns adjust to fit the screen width, stacking vertically on smaller devices.

```html
<div class="ui stackable grid">
  <div class="row">
    <div class="column">Content</div>
    <div class="column">Content</div>
    <div class="column">Content</div>
    <div class="column">Content</div>
  </div>
</div>
```

--------------------------------

### Responsive Width Adjustments Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Demonstrates how to specify different column widths for various screen sizes, allowing for fine-tuned responsive layouts.

```html
<div class="ui grid">
  <div class="ten wide computer column">
    10 wide computer
  </div>
  <div class="six wide computer column">
    6 wide computer
  </div>
</div>
```

--------------------------------

### Basic CSS Formatting for Grid Examples

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Provides basic CSS to style the grid examples, including code element formatting, container padding, header margins, image display, and grid/column pseudo-element styling for visualization.

```css
/* Some basic formatting */
code {
  background-color: #e0e0e0;
  padding: 0.25em 0.3em;
  font-family: 'Lato';
  font-weight: bold;
}
.container {
  padding: 5em 0em;
}
.ui.dividing.header, .first {
  margin-top: 5em;
}
.ui.dividing.header:first-child {
  margin-top: 0em;
}
h1, h3 {
  margin-top: 10em;
}
img {
  display: block;
  max-width: 100%;
}
img + img {
  margin-top: 0.5em;
}
/* Shows content box (not negative margins) */
.grid {
  position: relative;
}
.grid:before {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background-color: #f0f0f0;
  content: '';
  width: calc(100% - 2rem);
  height: calc(100% - 2rem);
  box-shadow: 0px 0px 0px 1px #ddd inset;
}
.ui.divided.grid:before, .celled.grid:before {
  display: none;
}
.ui.aligned .column:after {
  display: none !important;
}
.grid .column:not(.row):not(.grid):after {
  background-color: rgba(86, 61, 124, .15);
  box-shadow: 0px 0px 0px 1px rgba(86, 61, 124, 0.2) inset;
  content: "";
  display: block;
  min-height: 50px;
}
@media only screen and (max-width: 768px) {
  .stackable.grid:before {
    width: 100%;
    left: 0em;
  }
}
```

--------------------------------

### Install Fomantic-UI with npm

Source: https://github.com/fomantic/fomantic-ui/blob/develop/README.md

Use this command to install the stable version of Fomantic-UI via npm.

```bash
$ npm install fomantic-ui
```

--------------------------------

### Install Component with Meteor

Source: https://github.com/fomantic/fomantic-ui/blob/develop/tasks/config/admin/templates/README.md

Use this command to install a single Fomantic UI component with Meteor.

```bash
meteor add fomantic:ui-{component}
```

--------------------------------

### Install Fomantic-UI Nightly Build

Source: https://github.com/fomantic/fomantic-ui/blob/develop/README.md

Install the nightly build of Fomantic-UI to test new features and bug fixes early.

```bash
$ npm install fomantic-ui@nightly
```

--------------------------------

### Responsive Grid - Nested Stackable Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

Illustrates a nested stackable grid, where grids within columns also adapt responsively.

```html
<div class="ui stackable grid">
  <div class="row">
    <div class="column">
      <div class="ui stackable grid">
        <div class="row">
          <div class="column">Content</div>
          <div class="column">Content</div>
          <div class="column">Content</div>
          <div class="column">Content</div>
        </div>
      </div>
    </div>
  </div>
</div>
```

--------------------------------

### Responsive Grid - Stackable Container Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

A stackable grid within a container, ensuring responsive behavior while maintaining layout consistency.

```html
<div class="ui stackable grid container">
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
</div>
```

--------------------------------

### Clone Repository and Setup Remotes

Source: https://github.com/fomantic/fomantic-ui/blob/develop/CONTRIBUTING.md

Clone your fork of the Fomantic-UI repository and add the main repository as a remote named 'fui'. Fetch all branches from the 'fui' remote.

```bash
git clone https://github.com/<YOUR_GITHUB_USERNAME>/Fomantic-UI.git
$ cd Fomantic-UI
$ git remote add fui https://github.com/fomantic/Fomantic-UI.git
$ git fetch fui
```

--------------------------------

### Responsive Grid - Doubling Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

Shows a grid that doubles its columns on smaller screens. For example, two columns might become four.

```html
<div class="ui doubling grid">
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
</div>
```

--------------------------------

### Install Fomantic UI Dependencies

Source: https://github.com/fomantic/fomantic-ui/blob/develop/src/README.md

Run this command in the Fomantic directory to install project dependencies using npm. A post-install script will automatically configure Fomantic.

```bash
npm install
```

--------------------------------

### Build Fomantic UI with Gulp

Source: https://github.com/fomantic/fomantic-ui/blob/develop/src/README.md

Use Gulp commands to watch for file changes or build all project CSS files. Ensure Gulp is installed and configured.

```bash
# Watch files
gulp watch

# Build all files
gulp build
```

--------------------------------

### Configure Theme for GitHub Button

Source: https://github.com/fomantic/fomantic-ui/blob/develop/src/README.md

Modify the `theme.config` file to specify a pre-packaged theme for a component. This example sets the button theme to 'github'.

```less
@button: 'github';
```

--------------------------------

### Celled Grid Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Demonstrates a grid with cells, where each column is visually separated. This variation requires row wrappers.

```html
<div class="ui celled grid">
  <div class="row">
    <div class="column">
      <p>Content</p>
    </div>
    <div class="column">
      <p>Content</p>
    </div>
    <div class="column">
      <p>Content</p>
    </div>
  </div>
</div>
```

--------------------------------

### Grid Specifying Column Width Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Illustrates how to specify individual column widths within a grid. This allows for precise control over the layout of elements.

```html
<div class="ui grid">
  <div class="four wide column">
    4
  </div>
  <div class="eight wide column">
    8
  </div>
  <div class="four wide column">
    4
  </div>
</div>
```

--------------------------------

### Responsive Grid - Doubling Container Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

A doubling grid within a container, adapting column count responsively within the defined container width.

```html
<div class="ui doubling grid container">
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
</div>
```

--------------------------------

### Grid Specifying Row Width Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Shows how to divide columns into rows of a predetermined column count. Additional columns will automatically flow to the next row.

```html
<div class="ui grid">
  <div class="four wide column">
    4
  </div>
  <div class="four wide column">
    4
  </div>
  <div class="four wide column">
    4
  </div>
  <div class="four wide column">
    4
  </div>
  <div class="four wide column">
    4
  </div>
</div>
```

--------------------------------

### Responsive Grid - Doubling Stackable Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

Combines doubling and stackable grid behavior. Columns double in number on medium screens and stack on small screens.

```html
<div class="ui doubling stackable grid">
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
</div>
```

--------------------------------

### Divided Grid Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Displays a grid with vertical dividers between columns. This layout requires explicit row wrappers.

```html
<div class="ui divided grid">
  <div class="row">
    <div class="column">
      <p>Content</p>
    </div>
    <div class="column">
      <p>Content</p>
    </div>
    <div class="column">
      <p>Content</p>
    </div>
  </div>
</div>
```

--------------------------------

### Centered Grid Content Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Demonstrates how to center grid content using variations like 'ui centered grid', 'centered row', or 'centered column'. This is useful when a row does not occupy all sixteen grid columns.

```html
<div class="ui centered grid">
  <div class="six wide column">
    <p>Centered Content</p>
  </div>
</div>
```

--------------------------------

### Doubling Columns Responsive Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Demonstrates how columns can automatically double in width at different device sizes. This creates a responsive layout where columns expand as screen size increases.

```html
<div class="ui doubling grid">
  <div class="column">
    1
  </div>
  <div class="column">
    2
  </div>
  <div class="column">
    3
  </div>
  <div class="column">
    4
  </div>
  <div class="column">
    5
  </div>
  <div class="column">
    6
  </div>
</div>
```

--------------------------------

### Grid Column Flow Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Demonstrates how columns automatically flow to the next row when all columns in the current row are filled. No explicit row wrappers are needed for this behavior.

```html
<div class="ui grid">
  <div class="column">
    1
  </div>
  <div class="column">
    2
  </div>
  <div class="column">
    3
  </div>
  <div class="column">
    4
  </div>
  <div class="column">
    5
  </div>
  <div class="column">
    6
  </div>
</div>
```

--------------------------------

### Responsive Item - HTML Structure

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

Example of a responsive item component, likely used for cards or list items. Includes images, text, and buttons.

```html
<div class="ui fluid card">
  <div class="content">
    <img class="right floated mini ui image" src="assets/images/wireframe/image.png">
    <div class="header">
      Content Header
    </div>
    <div class="meta">Date Category</div>
    <div class="description">
      A description which may flow for several lines and give context to the content.
    </div>
  </div>
  <div class="extra content">
    <div class="ui two buttons">
      <a class="ui basic button">Primary</a>
      <a class="ui basic button">Limited</a>
    </div>
  </div>
</div>

<div class="ui fluid card">
  <div class="content">
    <img class="right floated mini ui image" src="assets/images/wireframe/square-image.png">
    <div class="header">
      Username
    </div>
  </div>
</div>

<div class="ui fluid card">
  <div class="content">
    <img class="right floated mini ui image" src="assets/images/wireframe/image.png">
    <div class="header">
      Content Header
    </div>
    <div class="meta">Date Category</div>
    <div class="description">
      A description which may flow for several lines and give context to the content.
    </div>
  </div>
  <div class="extra content">
    <div class="ui two buttons">
      <a class="ui basic button">Primary</a>
      <a class="ui basic button">Limited</a>
    </div>
  </div>
</div>

<div class="ui fluid card">
  <div class="content">
    <img class="right floated mini ui image" src="assets/images/wireframe/image.png">
    <div class="header">
      Content Header
    </div>
    <div class="meta">Date Category</div>
    <div class="description">
      A description which may flow for several lines and give context to the content.
    </div>
  </div>
  <div class="extra content">
    <div class="ui two buttons">
      <a class="ui basic button">Primary</a>
      <a class="ui basic button">Limited</a>
    </div>
  </div>
</div>
```

--------------------------------

### Responsive Grid - Doubling Stackable Container Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

A grid that is both doubling and stackable, contained within a layout. It adjusts column count and stacking based on screen size.

```html
<div class="ui doubling stackable grid container">
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
</div>
```

--------------------------------

### Specifying Device Visibility Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Shows how to make columns or rows visible only on specific devices (e.g., 'computer only', 'mobile only'). This allows for tailored content display across different screen types.

```html
<div class="ui grid">
  <div class="ten wide column computer only">
    Visible on Computer Only
  </div>
  <div class="six wide column computer only">
    Visible on Computer Only
  </div>
  <div class="sixteen wide column mobile only">
    Visible on Mobile Only
  </div>
  <div class="computer only row">
    This row is only visible on computers.
  </div>
  <div class="mobile only column">
    This column is only visible on mobile.
  </div>
</div>
```

--------------------------------

### Import Gulp Watch Task

Source: https://github.com/fomantic/fomantic-ui/blob/develop/src/README.md

Import individual Gulp tasks into your own Gulpfile for custom build processes. This example shows how to import and use the 'watch' task.

```javascript
const watch = require('path/to/semantic/tasks/watch');

gulp.task('watch ui', 'Watch Fomantic-UI', watch);
```

--------------------------------

### Stackable Columns Responsive Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Shows how grid columns can stack vertically on smaller screens (e.g., mobile devices). This ensures content remains readable and usable on all screen sizes.

```html
<div class="ui stackable grid">
  <div class="column">
    1
  </div>
  <div class="column">
    2
  </div>
  <div class="column">
    3
  </div>
  <div class="column">
    4
  </div>
  <div class="column">
    5
  </div>
  <div class="column">
    6
  </div>
</div>
```

--------------------------------

### Checkout Develop Branch for New Feature

Source: https://github.com/fomantic/fomantic-ui/blob/develop/CONTRIBUTING.md

Create a new branch based on the 'fui/develop' branch to start working on your changes. Ensure your branch is based off the develop branch, not master.

```bash
git checkout -b <BRANCH_NAME> fui/develop
```

--------------------------------

### Vertical Alignment in Grid Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Shows how to control the vertical alignment of content within grid cells. Alignment can be applied at the grid, row, or column level.

```html
<div class="ui grid">
  <div class="stretched row">
    <div class="column">
      <p>Top Aligned (default)</p>
    </div>
    <div class="middle aligned column">
      <p>Middle Aligned</p>
    </div>
    <div class="bottom aligned column">
      <p>Bottom Aligned</p>
    </div>
  </div>
</div>
```

--------------------------------

### Internally Celled Grid Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Shows a grid with internal cell borders, providing a table-like appearance. This variation also requires row wrappers.

```html
<div class="ui internally celled grid">
  <div class="row">
    <div class="column">
      <p>Content</p>
    </div>
    <div class="column">
      <p>Content</p>
    </div>
    <div class="column">
      <p>Content</p>
    </div>
  </div>
</div>
```

--------------------------------

### Equal Width Columns Grid Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Illustrates a grid where columns automatically adjust their widths to fit evenly within a single row. This is achieved by using the 'equal width' class on the grid.

```html
<div class="ui equal width grid">
  <div class="column">
    1
  </div>
  <div class="column">
    2
  </div>
  <div class="column">
    3
  </div>
  <div class="column">
    4
  </div>
  <div class="column">
    5
  </div>
  <div class="column">
    6
  </div>
</div>
```

--------------------------------

### Right Floated Grid Column Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Shows how to right-float a grid column. In a flexbox-based grid, ensure floated items are ordered correctly within the markup.

```html
<div class="ui grid">
  <div class="left floated six wide column">
    Left Floated
  </div>
  <div class="right floated ten wide column">
    Right Floated
  </div>
</div>
```

--------------------------------

### Left Floated Grid Column Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Illustrates how to left-float a grid column. For proper flexbox behavior, floated items should appear in the order they are intended to be displayed.

```html
<div class="ui grid">
  <div class="left floated ten wide column">
    Left Floated
  </div>
  <div class="right floated six wide column">
    Right Floated
  </div>
</div>
```

--------------------------------

### Vertically Divided Grid Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Shows a grid with horizontal dividers between rows, in addition to vertical dividers. This layout also requires explicit row wrappers.

```html
<div class="ui vertically divided grid">
  <div class="row">
    <div class="column">
      <p>Content</p>
    </div>
    <div class="column">
      <p>Content</p>
    </div>
    <div class="column">
      <p>Content</p>
    </div>
  </div>
</div>
```

--------------------------------

### Text Alignment in Grid Example

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/grid.html

Demonstrates text alignment within grid elements. Alignment can be applied at the grid, row, or column level using classes like 'right aligned', 'left aligned', or 'center aligned'.

```html
<div class="ui grid">
  <div class="center aligned row">
    <div class="column">
      <p>Center Aligned Row</p>
    </div>
    <div class="column">
      <p>Center Aligned Row</p>
    </div>
  </div>
  <div class="row">
    <div class="center aligned column">
      <p>Center Aligned Column</p>
    </div>
    <div class="right aligned column">
      <p>Right Aligned Column</p>
    </div>
  </div>
</div>
```

--------------------------------

### Import All Fomantic LESS Components

Source: https://github.com/fomantic/fomantic-ui/blob/develop/src/README.md

Import all Fomantic UI components into your LESS files. Ensure you have renamed `theme.config.example` to `theme.config` and `_site/` to `site/`.

```less
/* Import all components */
@import 'src/semantic';
```

--------------------------------

### Initialize Sticky with Context

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/components/sticky-context.html

Initializes the sticky component and sets its context to a specific container. This ensures the sticky element stays within the bounds of the specified context.

```javascript
$(document) .ready(function() {
  // sticky
  $('.ui.sticky').sticky({
    context: $('.page.container'),
  });

```

--------------------------------

### Sticky Menu and Lazy Load Images

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/sticky.html

Initializes a sticky main menu and enables lazy loading for images. The menu becomes fixed to the page when scrolling past a certain point, and images animate into view as they become visible.

```javascript
$(document) .ready(function() { // fix main menu to page on passing $('.main.menu').visibility({ type: 'fixed' }); $('.overlay').visibility({ type: 'fixed', offset: 80 }); // lazy load images $('.image').visibility({ type: 'image', transition: 'vertical flip in', duration: 500 }); // show dropdown on hover $('.main.menu .ui.dropdown').dropdown({ on: 'hover' }); }) ;
```

--------------------------------

### Responsive Menu - HTML Structure

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

HTML for a responsive menu. Includes a logo and navigation links that adapt to different screen sizes.

```html
<div class="ui menu">
  <a class="header item">
    <img class="logo" src="assets/images/logo.png">
  </a>
  <a class="item">Features</a>
  <a class="item">Testimonials</a>
  <a class="right item">Sign-in</a>
</div>
```

--------------------------------

### YUI DataTable Initialization and Formatting

Source: https://github.com/fomantic/fomantic-ui/blob/develop/test/coverage/PhantomJS 1.9.2 (Linux)/index.html

Initializes a YUI DataTable with custom column definitions and data. Includes formatters for percentage values and HTML content, and a default formatter. Use this for dynamic table generation.

```javascript
YUI().use('datatable', function (Y) {
  var formatters = {
    pct: function (o) {
      o.className += o.record.get('classes')[o.column.key];
      try {
        return o.value.toFixed(2) + '%';
      } catch (ex) {
        return o.value + '%';
      }
    },
    html: function (o) {
      o.className += o.record.get('classes')[o.column.key];
      return o.record.get(o.column.key + '_html');
    }
  },
  defaultFormatter = function (o) {
    o.className += o.record.get('classes')[o.column.key];
    return o.value;
  };

  function getColumns(theadNode) {
    var colNodes = theadNode.all('tr th'),
      cols = [],
      col;
    colNodes.each(function (colNode) {
      col = {
        key: colNode.getAttribute('data-col'),
        label: colNode.get('innerHTML') || ' ',
        sortable: !colNode.getAttribute('data-nosort'),
        className: colNode.getAttribute('class'),
        type: colNode.getAttribute('data-type'),
        allowHTML: colNode.getAttribute('data-html') === 'true' || colNode.getAttribute('data-fmt') === 'html'
      };
      col.formatter = formatters[colNode.getAttribute('data-fmt')] || defaultFormatter;
      cols.push(col);
    });
    return cols;
  }

  function getRowData(trNode, cols) {
    var tdNodes = trNode.all('td'),
      i,
      row = { classes: {} },
      node,
      name;
    for (i = 0; i < cols.length; i += 1) {
      name = cols[i].key;
      node = tdNodes.item(i);
      row[name] = node.getAttribute('data-value') || node.get('innerHTML');
      row[name + '_html'] = node.get('innerHTML');
      row.classes[name] = node.getAttribute('class');
      //Y.log('Name: ' + name + '; Value: ' + row[name]);
      if (cols[i].type === 'number') {
        row[name] = row[name] * 1;
      }
    }
    //Y.log(row);
    return row;
  }

  function getData(tbodyNode, cols) {
    var data = [];
    tbodyNode.all('tr').each(function (trNode) {
      data.push(getRowData(trNode, cols));
    });
    return data;
  }

  function replaceTable(node) {
    if (!node) {
      return;
    }
    var cols = getColumns(node.one('thead')),
      data = getData(node.one('tbody'), cols),
      table,
      parent = node.get('parentNode');
    table = new Y.DataTable({
      columns: cols,
      data: data,
      sortBy: 'file'
    });
    parent.set('innerHTML', '');
    table.render(parent);
  }

  Y.on('domready', function () {
    replaceTable(Y.one('div.coverage-summary table'));
    if (typeof prettyPrint === 'function') {
      prettyPrint();
    }
  });
});
```

--------------------------------

### Responsive Steps - HTML Structure

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

HTML for a responsive steps component, used to indicate progress in a workflow. Each step has a title and description.

```html
<div class="ui steps">
  <a class="step">
    <div class="title">Shipping</div>
    <div class="description">Choose your shipping options</div>
  </a>
  <a class="step">
    <div class="title">Billing</div>
    <div class="description">Enter billing information</div>
  </a>
  <a class="step">
    <div class="title">Confirm Order</div>
    <div class="description">Review your order details</div>
  </a>
</div>
```

--------------------------------

### CSS for Sticky Menu and Layout

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/sticky.html

Provides CSS rules for styling the page background, main container, menu, and overlay. It includes styles for the fixed state of the menu and overlay, as well as for floated images.

```css
body { background-color: #fff; } .main.container { margin-top: 2em; } .main.menu { margin-top: 4em; border-radius: 0; border: none; box-shadow: none; transition: box-shadow 0.5s ease, padding 0.5s ease ; } .main.menu .item img.logo { margin-right: 1.5em; } .overlay { float: left; margin: 0em 3em 1em 0em; } .overlay .menu { position: relative; left: 0; transition: left 0.5s ease; } .main.menu.fixed { background-color: #fff; border: 1px solid #ddd; box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.2); } .overlay.fixed .menu { left: 800px; } .text.container .left.floated.image { margin: 2em 2em 2em -4em; } .text.container .right.floated.image { margin: 2em -4em 2em 2em; } .ui.footer.segment { margin: 5em 0em 0em; padding: 5em 0em; }
```

--------------------------------

### Responsive Visibility - Device Adjustment

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

Control element visibility based on device screen size. Use specific classes for different screen resolutions.

```html
<div class="widescreen only">
  Widescreen
</div>

<div class="large screen only">
  Large Screen
</div>

<div class="tablet only">
  Tablet and Mobile
</div>

<div class="mobile only">
  Mobile
</div>

<div class="computer or large screen">
  Computer and Up
</div>

<div class="tablet only">
  Tablet Only Content
</div>
<div class="tablet only">
  Tablet Only Content
</div>
<div class="tablet only">
  Tablet Only Content
</div>
<div class="tablet only">
  Tablet Only Content
</div>
```

--------------------------------

### Responsive Grid - Consecutive Doubling Stackable Grid

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

A grid that doubles its columns consecutively on smaller screens and stacks on the smallest screens. This provides more columns as screen size decreases before stacking.

```html
<div class="ui consecutive doubling stackable grid">
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
  <div class="column">Content</div>
</div>
```

--------------------------------

### Responsive Grid - Celled Stackable Grid

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

A stackable grid where each cell has a border, creating a bordered grid layout that adapts to screen size.

```html
<div class="ui celled stackable grid">
  <div class="row">
    <div class="column">Content</div>
    <div class="column">Content</div>
    <div class="column">Content</div>
    <div class="column">Content</div>
  </div>
</div>
```

--------------------------------

### Initialize Dropdowns with Fomantic UI

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/components/button.html

Initializes all standard dropdowns and dropdowns within buttons that have a 'combo' action. Ensure the DOM is ready before calling.

```javascript
$(document) .ready(function() { $('.ui.dropdown').dropdown(); $('.ui.buttons .dropdown.button').dropdown({ action: 'combo' }); }) ;
```

--------------------------------

### Initialize Fomantic UI Dropdowns

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/bootstrap.html

Use this JavaScript code to initialize standard and hover-activated dropdowns in Fomantic UI. Ensure the DOM is ready before executing.

```javascript
$(document) .ready(function() { $('.ui.selection.dropdown').dropdown(); $('.ui.menu .ui.dropdown').dropdown({ on: 'hover' }); }) ;
```

--------------------------------

### Import and Use Watch Task in Gulpfile

Source: https://github.com/fomantic/fomantic-ui/blob/develop/tasks/README.md

Import the 'watch' task from Fomantic UI's tasks directory and assign it to a Gulp task. This allows you to compile only changed files from source.

```javascript
const watch = require('path/to/fomantic/tasks/watch');
gulp.task('watch ui', watch);
```

--------------------------------

### Dropdown Initialization - JavaScript

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/components/input.html

Initializes a Fomantic UI dropdown component on click. Ensure the DOM is ready before initialization.

```javascript
$(document) .ready(function() {
  $('.ui.dropdown')
    .dropdown({
      on: 'click'
    })
  ;
});
```

--------------------------------

### Import Specific Fomantic LESS Component

Source: https://github.com/fomantic/fomantic-ui/blob/develop/src/README.md

Import individual Fomantic UI components by creating a scope for each import using `& {}`. This allows for modular imports.

```less
/* Import a specific component */
& { @import 'src/definitions/elements/button'; }
```

--------------------------------

### Responsive Grid - Stackable Divided Grid

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

A stackable grid with vertical dividers between columns. The dividers maintain their position as the grid stacks.

```html
<div class="ui stackable divided grid">
  <div class="row">
    <div class="column">Content</div>
    <div class="column">Content</div>
    <div class="column">Content</div>
    <div class="column">Content</div>
  </div>
</div>
```

--------------------------------

### Responsive Table - HTML Structure

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

A basic HTML structure for a responsive table. Content within the table cells will adapt to screen size.

```html
<table class="ui celled striped table">
  <thead>
    <tr>
      <th>Employee</th>
      <th>Correct Guesses</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <img src="assets/images/wireframe/square-image.png" class="ui small circular image">
        Lena
      </td>
      <td>Human Resources</td>
      <td>22</td>
    </tr>
    <tr>
      <td>
        <img src="assets/images/wireframe/square-image.png" class="ui small circular image">
        Matthew
      </td>
      <td>Fabric Design</td>
      <td>15</td>
    </tr>
    <tr>
      <td>
        <img src="assets/images/wireframe/square-image.png" class="ui small circular image">
        Lindsay
      </td>
      <td>Entertainment</td>
      <td>12</td>
    </tr>
    <tr>
      <td>
        <img src="assets/images/wireframe/square-image.png" class="ui small circular image">
        Mark
      </td>
      <td>Executive</td>
      <td>11</td>
    </tr>
  </tbody>
</table>
```

--------------------------------

### Initialize Sticky Menu and Sidebar

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/homepage.html

This JavaScript code initializes the Fomantic UI sticky menu behavior based on scroll position and attaches a sidebar to a toggle button. It uses jQuery's document ready function to ensure the DOM is fully loaded before execution.

```javascript
$(document) .ready(function() {
  // fix menu when passed
  $('.masthead')
    .visibility({
      once: false,
      onBottomPassed: function() {
        $('.fixed.menu').transition('fade in');
      },
      onBottomPassedReverse: function() {
        $('.fixed.menu').transition('fade out');
      }
    })
  ;

  // create sidebar and attach to menu open
  $('.ui.sidebar')
    .sidebar('attach events', '.toc.item')
  ;
})
```

--------------------------------

### Basic Input Styling - CSS

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/components/input.html

Applies basic styling to input elements and adds margin between adjacent inputs.

```css
body {
  padding: 1em;
}
.ui.input + .ui.input {
  margin-left: 1em;
}
```

--------------------------------

### Responsive Grid - Device Column Width

Source: https://github.com/fomantic/fomantic-ui/blob/develop/examples/responsive.html

Sets specific column widths for different device types within a grid. Columns adjust their size based on the screen resolution.

```html
<div class="ui grid">
  <div class="wide column">
    <p>Wide Column</p>
  </div>
  <div class="tablet ten wide column">
    <p>Tablet 10 Wide Column</p>
  </div>
  <div class="mobile three wide column">
    <p>Mobile 3 Wide Column</p>
  </div>
</div>
```