### Installing Gridster.js via NPM with Save

Source: https://github.com/dsmorse/gridster.js/blob/master/README.md

This command installs the 'dsmorse-gridster' package from NPM and saves it as a dependency in the 'package.json' file. This is recommended for tracking project dependencies.

```bash
npm install dsmorse-gridster --save
```

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

### Installing Gridster.js via NPM

Source: https://github.com/dsmorse/gridster.js/blob/master/README.md

This command installs the 'dsmorse-gridster' package from NPM without saving it to the 'package.json' dependencies. It fetches the latest version of the Gridster.js fork.

```bash
npm install dsmorse-gridster
```

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

### Initializing Gridster with Resize Callbacks - JavaScript

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/using-resize-callbacks.html

This JavaScript snippet initializes a gridster instance on a `<ul>` element, setting base widget dimensions and margins. It enables widget resizing and defines `start`, `resize`, and `stop` callback functions to log the widget's position and pointer differences to a 'log' element throughout the resizing process.

```JavaScript
var gridster; $(function () { var log = document.getElementById('log'); gridster = $(".gridster ul").gridster({ widget_base_dimensions: [100, 55], widget_margins: [5, 5], resize: { enabled: true, start: function (e, ui, $widget) { log.innerHTML = 'START position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML; }, resize: function (e, ui, $widget) { log.innerHTML = 'RESIZE offset: ' + ui.pointer.diff_top + ' ' + ui.pointer.diff_left + "<br >" + log.innerHTML; }, stop: function (e, ui, $widget) { log.innerHTML = 'STOP position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML; } } }).data('gridster'); });
```

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

### Initializing Gridster with Drag Callbacks - JavaScript

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/using-drag-callbacks.html

This snippet initializes the Gridster library on a '<ul>' element, configuring base widget dimensions and margins. It also defines 'start', 'drag', and 'stop' callback functions for draggable widgets, which log their position or offset to a 'div' with the ID 'log' during the drag lifecycle.

```JavaScript
var gridster; $(function () { var log = document.getElementById('log'); gridster = $(".gridster ul").gridster({ widget_base_dimensions: [100, 55], widget_margins: [5, 5], draggable: { start: function (e, ui, $widget) { log.innerHTML = 'START position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML; }, drag: function (e, ui, $widget) { log.innerHTML = 'DRAG offset: ' + ui.pointer.diff_top + ' ' + ui.pointer.diff_left + "<br >" + log.innerHTML; }, stop: function (e, ui, $widget) { log.innerHTML = 'STOP position: ' + ui.position.top + ' ' + ui.position.left + "<br >" + log.innerHTML; } } }).data('gridster'); });
```

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

### Including Gridster.js in Ruby on Rails Gemfile

Source: https://github.com/dsmorse/gridster.js/blob/master/README.md

This line adds the 'gridster.js-rails' gem to your Ruby on Rails 'Gemfile'. After adding, run 'bundle install' to fetch and install the gem, making Gridster.js assets available to your application.

```ruby
gem 'gridster.js-rails'
```

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

### Updating Local Master Branch from Upstream (Git)

Source: https://github.com/dsmorse/gridster.js/blob/master/CONTRIBUTING.md

This command sequence ensures your local master branch is up-to-date with the latest changes from the original 'upstream' repository before starting new work. It involves checking out the master branch and pulling changes from the upstream remote.

```bash
git checkout master
git pull upstream master
```

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

### Utility Function for Random Integer Generation - JavaScript

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/expandable-widgets.html

This helper function generates a random integer within a specified range (inclusive). While not directly used in the gridster resizing logic shown, it's a common utility that might be used for dynamic widget setup or testing.

```JavaScript
function getRandomInt (min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
```

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

### Initializing Gridster for Responsive Layout in JavaScript

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/responsive.html

This snippet initializes the Gridster library on a `<ul>` element within a `.gridster` container. It configures the grid to be responsive with automatic widget base dimensions, a minimum of 1 and maximum of 6 columns, and enables widget resizing. It also sets widget margins and removes default padding.

```JavaScript
var gridster = null; $(document).ready(function () { gridster = $(".gridster ul").gridster({ widget_base_dimensions: ['auto', 140], autogenerate_stylesheet: true, min_cols: 1, max_cols: 6, widget_margins: [5, 5], resize: { enabled: true } }).data('gridster'); $('.gridster ul').css({'padding': '0'}); });
```

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

### Setting Up Local Repository for gridster.js Contribution (Bash)

Source: https://github.com/dsmorse/gridster.js/blob/master/CONTRIBUTING.md

This snippet demonstrates how to fork, clone, and configure the upstream remote for the gridster.js repository. It's the initial step for contributors to set up their local development environment, allowing them to pull changes from the original project and push to their personal fork.

```bash
# Clone your fork of the repo into the current directory
git clone https://github.com/<your-username>/gridster.js
# Navigate to the newly cloned directory
cd gridster.js
# Assign the original repo to a remote called "upstream"
git remote add upstream https://github.com/ducksboard/gridster.js
```

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

### Initializing gridster.js with Resize Limits (JavaScript)

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/resize-limits.html

This snippet initializes a `gridster.js` instance, configuring it to enable widget resizing with global maximum and minimum size constraints. It sets a base dimension for widgets, defines margins, and uses a clone helper for resizing. The `max_size` is globally set to 4x4 and `min_size` to 1x1, which can be overridden per widget.

```JavaScript
var gridster; $(function () { gridster = $(".gridster ul").gridster({ widget_base_dimensions: [100, 100], widget_margins: [5, 5], helper: 'clone', resize: { enabled: true, max_size: [4, 4], min_size: [1, 1] } }).data('gridster'); });
```

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

### Initializing Gridster and Adding Dynamic Widgets (JavaScript)

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/chaosWidget.html

This code initializes the Gridster layout manager on a `<ul>` element, configuring base widget dimensions, margins, and enabling resize functionality. It also sets up click event listeners for two buttons: one to add widgets with random dimensions and positions, and another to add widgets with fixed dimensions (1x1) but random positions, using the `gridster.add_widget` method. This demonstrates dynamic widget insertion and overlap avoidance. Requires jQuery and the Gridster library.

```JavaScript
var gridster;
var nextSimian = 10;
$(function () {
  gridster = $(".gridster ul").gridster({
    widget_base_dimensions: [100, 100],
    avoid_overlapped_widgets: true,
    widget_margins: [5, 5],
    helper: 'clone',
    resize: {
      enabled: true
    }
  }).data('gridster');

  $('.js-random-random').on('click', function () {
    gridster.add_widget('<li>' + nextSimian + '</li>', getRandomInt(1, 5), getRandomInt(1, 5), getRandomInt(1, 15), getRandomInt(1, 15));
    nextSimian++;
  });

  $('.js-fixed-random').on('click', function () {
    gridster.add_widget('<li>' + nextSimian + '</li>', 1 , 1, getRandomInt(1, 15), getRandomInt(1, 15));
    nextSimian++;
  });
});
```

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

### Initializing Gridster and Implementing Expandable Widgets - JavaScript

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/expandable-widgets.html

This snippet initializes a gridster instance on a `<ul>` element, configuring base dimensions, margins, and a clone helper. It then attaches `mouseenter` and `mouseleave` event handlers to `<li>` elements within the gridster container to dynamically resize widgets using `gridster.resize_widget` for expansion and contraction.

```JavaScript
var gridster;
gridster = $(".gridster ul").gridster({
  widget_base_dimensions: [100, 100],
  widget_margins: [5, 5],
  helper: 'clone'
}).data('gridster');

gridster.$el.ready(function () {
  // resize widgets on hover
  gridster.$el
    .on('mouseenter', 'li', function () {
      gridster.resize_widget($(this), 3, 3);
    })
    .on('mouseleave', 'li', function () {
      gridster.resize_widget($(this), 1, 1);
    });
});
```

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

### Initializing Multiple Gridster Instances with Namespaces - JavaScript

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/multiple-grids.html

This snippet initializes two separate gridster instances, `gridster[0]` and `gridster[1]`, targeting `ul` elements within `#demo-1` and `#demo-2` respectively. It demonstrates the use of the `namespace` option to scope generated CSS, preventing conflicts between instances, and configures different `widget_base_dimensions` and `widget_margins` for each.

```JavaScript
var gridster = [];
$(function () {
    gridster[0] = $("#demo-1 ul").gridster({
        namespace: '#demo-1',
        widget_base_dimensions: [100, 55],
        widget_margins: [5, 5]
    }).data('gridster');
    gridster[1] = $("#demo-2 ul").gridster({
        namespace: '#demo-2',
        widget_base_dimensions: [200, 110],
        widget_margins: [10, 10]
    }).data('gridster');
});
```

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

### Initializing Gridster and Random Widget Resizing in JavaScript

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/resize.html

This JavaScript snippet initializes the Gridster library on a `<ul>` element with specified base dimensions and margins, enabling widget resizing. It includes a utility function `getRandomInt` and sets up a click event listener on an element with class `js-resize-random` to randomly resize one of the first 10 Gridster widgets to a random size between 1x1 and 4x4 units.

```JavaScript
function getRandomInt (min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; }
var gridster;
$(function () {
    gridster = $(".gridster ul").gridster({
        widget_base_dimensions: [100, 100],
        widget_margins: [5, 5],
        helper: 'clone',
        resize: { enabled: true }
    }).data('gridster');
    $('.js-resize-random').on('click', function () {
        gridster.resize_widget(gridster.$widgets.eq(getRandomInt(0, 9)), getRandomInt(1, 4), getRandomInt(1, 4))
    });
});
```

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

### Initializing Gridster.js for Dynamic Column Growth

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/dynamic-grid-width.html

This JavaScript snippet initializes the Gridster.js plugin on a `<ul>` element. It sets `widget_base_dimensions` and `widget_margins`, critically enabling `autogrow_cols` to allow the grid to expand its column count automatically. It also enables widget resizing, allowing users to interactively change widget sizes and trigger grid adjustments.

```JavaScript
var gridster; $(function () { var log = document.getElementById('log'); gridster = $(".gridster ul").gridster({ widget_base_dimensions: [100, 55], widget_margins: [5, 5], autogrow_cols: true, resize: { enabled: true } }).data('gridster'); });
```

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

### Initializing Gridster for Widget Swapping (JavaScript)

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/SwapDrop.html

This JavaScript snippet initializes the Gridster plugin on a `<ul>` element within a `.gridster` container. It configures widget margins, base dimensions, and sets `shift_larger_widgets_down` to `false` to enable the specific widget swapping behavior where larger widgets can swap with smaller ones without being shifted down. This requires jQuery.

```JavaScript
var gridster = ""; $(document).ready(function () { $(".gridster ul").gridster({ widget_margins: [10, 10], widget_base_dimensions: [140, 140], shift_larger_widgets_down: false }); });
```

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

### Rebuilding Gridster Layout from Serialized Data in JavaScript

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/grid-from-serialize.html

This snippet demonstrates how to initialize a Gridster instance and then dynamically add widgets based on a predefined serialized layout. It first sorts the serialization data using Gridster's utility function and then, upon a button click, clears existing widgets and reconstructs the grid using the stored positions and dimensions.

```javascript
var gridster; // same object than generated with gridster.serialize() method
var serialization = [
    { col: 1, row: 1, size_x: 2, size_y: 2 },
    { col: 3, row: 1, size_x: 1, size_y: 2 },
    { col: 4, row: 1, size_x: 1, size_y: 1 },
    { col: 2, row: 3, size_x: 3, size_y: 1 },
    { col: 1, row: 4, size_x: 1, size_y: 1 },
    { col: 1, row: 3, size_x: 1, size_y: 1 },
    { col: 2, row: 4, size_x: 1, size_y: 1 },
    { col: 2, row: 5, size_x: 1, size_y: 1 }
];
// sort serialization
serialization = Gridster.sort_by_row_and_col_asc(serialization);
$(function () {
    gridster = $(".gridster ul").gridster({
        widget_base_dimensions: [100, 55],
        widget_margins: [5, 5]
    }).data('gridster');
    $('.js-seralize').on('click', function () {
        gridster.remove_all_widgets();
        $.each(serialization, function () {
            gridster.add_widget('<li />', this.size_x, this.size_y, this.col, this.row);
        });
    });
});
```

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

### Initializing Gridster.js with Sticky Position Configuration

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/sticky-postion.html

This snippet initializes the Gridster.js library on a `<ul>` element within a `.gridster` container. It configures widgets to maintain their exact position, preventing automatic shifting or collapsing. Key options include `shift_widgets_up: false`, `shift_larger_widgets_down: false`, and `collision: { wait_for_mouseup: true }` to control widget behavior during collisions and movement.

```JavaScript
var gridster; gridster = $(".gridster ul").gridster({ widget_base_dimensions: [100, 100], widget_margins: [5, 5], shift_widgets_up: false, shift_larger_widgets_down: false, collision: { wait_for_mouseup: true } }).data('gridster');
```

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

### Initializing Gridster.js with Drag and Collision Callbacks (JavaScript)

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/jquery.gridster.demo2.html

This snippet initializes the Gridster.js library on a `<ul>` element with the class `gridster`. It configures draggable and collision callbacks to manage UI state during drag operations, specifically adding/removing a 'sorting' class and handling overlap events. The `api` variable stores the Gridster instance for further manipulation.

```javascript
var api; $(function () { api = $(".gridster ul").gridster({ draggable: { stop: function (event, ui, self) { // $('.overlapped-area').hide(); this.$wrapper.addClass('sorting'); }, start: function (event, ui, self) { this.$wrapper.removeClass('sorting'); // $('.overlapped-area').show(); } }, collision: { on_overlap_start: function (collider) { // $(collider).data('graph').show(); //$(this).data('collision', collider); }, on_overlap_stop: function (collider) { //$(this).data('collision', null); }, on_overlap: function (c) { //$(this).data('collision', c); } } }).data('gridster'); });
```

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

### Initializing Gridster and Serializing Widget Positions in JavaScript

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/serialize.html

This JavaScript code initializes the gridster.js library on a `<ul>` element within a `.gridster` container, setting base dimensions and margins for widgets. It then attaches a click event listener to an element with the class `js-seralize` which, when triggered, serializes the current gridster layout and displays the resulting JSON string in a textarea with the ID `log`.

```JavaScript
var gridster;
$(function () {
  gridster = $(".gridster ul").gridster({
    widget_base_dimensions: [100, 55],
    widget_margins: [5, 5]
  }).data('gridster');

  $('.js-seralize').on('click', function () {
    var s = gridster.serialize();
    $('#log').val(JSON.stringify(s));
  });
});
```

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

### Generating Random Integers for Gridster Widget Placement (JavaScript)

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/chaosWidget.html

This snippet defines a utility function `getRandomInt` to generate random integers within a specified range, used for determining widget sizes and positions. It also includes `Math.seedrandom()` for predictable random number generation, which is a prerequisite for the function's intended behavior.

```JavaScript
Math.seedrandom();
function getRandomInt (min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
```

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

### Pushing Topic Branch to Forked Repository (Git)

Source: https://github.com/dsmorse/gridster.js/blob/master/CONTRIBUTING.md

This command pushes your local topic branch, including all committed changes, to your personal fork on GitHub. This makes your changes available online and is a prerequisite for creating a pull request to the main project.

```bash
git push origin <topic-branch-name>
```

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

### Initializing Gridster with Custom Drag Handle (JavaScript)

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/custom-drag-handle.html

This JavaScript snippet initializes the Gridster plugin on a `<ul>` element within a `.gridster` container. It configures the base dimensions and margins for widgets, and crucially, specifies 'header' as the custom drag handle, ensuring only clicks on the header element will initiate dragging.

```javascript
var gridster; $(function () { gridster = $(".gridster ul").gridster({ widget_base_dimensions: [100, 120], widget_margins: [5, 5], draggable: { handle: 'header' } }).data('gridster'); });
```

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

### Styling Log Display with CSS Transitions

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/serialize.html

This CSS snippet defines styles for an element with the ID `log`, setting its basic layout and applying smooth height transitions. When the `log` element gains focus, its height expands to 100px, providing more space for content.

```CSS
#log { display: block; width: 100%; height: 20px; margin-bottom: 20px; -webkit-transition: height 0.3s ease; -moz-transition: height 0.3s ease; -ms-transition: height 0.3s ease; -o-transition: height 0.3s ease; transition: height 0.3s ease; } #log:focus { height: 100px; }
```

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

### Adding Widgets Dynamically to Gridster in JavaScript

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/adding-widgets-dynamically.html

This snippet initializes a Gridster instance with specified widget margins and base dimensions. It then iterates through a predefined array of widget data, dynamically adding each widget to the grid using the `add_widget` method, demonstrating programmatic grid population.

```JavaScript
var gridster; $(function () { gridster = $(".gridster > ul").gridster({ widget_margins: [5, 5], widget_base_dimensions: [100, 55] }).data('gridster'); var widgets = [ ['<li>0</li>', 1, 2], ['<li>1</li>', 3, 2], ['<li>2</li>', 3, 2], ['<li>3</li>', 2, 1], ['<li>4</li>', 4, 1], ['<li>5</li>', 1, 2], ['<li>6</li>', 2, 1], ['<li>7</li>', 3, 2], ['<li>8</li>', 1, 1], ['<li>9</li>', 2, 2], ['<li>10</li>', 1, 3] ]; $.each(widgets, function (i, widget) { gridster.add_widget.apply(gridster, widget) }); });
```

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

### Conventional Commit Message Format (Text)

Source: https://github.com/dsmorse/gridster.js/blob/master/CONTRIBUTING.md

This snippet illustrates the required structure for commit messages, adhering to conventional changelog guidelines. It includes a header with type, scope, and subject, followed by an optional body and footer, ensuring consistency and enabling automatic changelog generation.

```text
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
```

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

### Centering Gridster Container (CSS)

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/SwapDrop.html

This CSS snippet defines styles for the `.gridster` and `.content` elements. It sets a fixed width of 940 pixels and uses `margin: 0 auto;` to horizontally center these elements within their parent container, providing a clean and organized layout for the grid.

```CSS
.gridster, .content { width: 940px; margin: 0 auto; }
```

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

### Configuring Gridster.js Styles in Rails Asset Pipeline

Source: https://github.com/dsmorse/gridster.js/blob/master/README.md

This line, added to 'app/assets/stylesheets/application.css', includes the minified Gridster.js stylesheet into the Rails asset pipeline. It ensures that the necessary CSS for Gridster layouts is loaded in your application.

```css
 *= require jquery.dsmorse-gridster.min
```

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

### Creating a New Topic Branch for Features or Fixes (Git)

Source: https://github.com/dsmorse/gridster.js/blob/master/CONTRIBUTING.md

This command creates a new local branch, named `<topic-branch-name>`, based on the current branch. It's essential for isolating new features, changes, or fixes from the main development branch, ensuring a clean and organized contribution workflow.

```bash
git checkout -b <topic-branch-name>
```

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

### Configuring Gridster.js JavaScript in Rails Asset Pipeline

Source: https://github.com/dsmorse/gridster.js/blob/master/README.md

This line, added to 'app/assets/javascripts/application.js', includes the minified Gridster.js JavaScript file into the Rails asset pipeline. It makes the Gridster.js jQuery plugin available for use in your application.

```javascript
//= require jquery.dsmorse-gridster.min
```

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

### Styling Log Display Area - CSS

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/using-resize-callbacks.html

This CSS snippet defines styles for an HTML element with the ID 'log'. It configures the element's top margin, maximum height, overflow behavior for scrolling, maximum width, and a border, making it suitable for displaying dynamic content like event logs.

```CSS
#log { margin-top: 20px; max-height: 400px; overflow: auto; max-width: 250px; border: 1px solid #DDD; }
```

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

### Merging Upstream Changes into Topic Branch (Git)

Source: https://github.com/dsmorse/gridster.js/blob/master/CONTRIBUTING.md

This command integrates the latest changes from the upstream master branch into your current topic branch using a rebase strategy. This helps keep your branch current with the main project's development and simplifies the eventual merge process by creating a linear history.

```bash
git pull --rebase upstream master
```

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

### Styling Gridster Widget Header (CSS)

Source: https://github.com/dsmorse/gridster.js/blob/master/demos/custom-drag-handle.html

This CSS snippet styles the header element within gridster list items. It sets the background color, display properties, font size, line height, padding, margin, and changes the cursor to 'move' to visually indicate it's a draggable area.

```css
.gridster li header { background: #999; display: block; font-size: 20px; line-height: normal; padding: 4px 0 6px; margin-bottom: 20px; cursor: move; }
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.