# nathancahill/split

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/nathancahill-split).**

6,278 stars · 446 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/nathancahill/split
- Homepage: https://split.js.org/
- awesome-repositories: https://awesome-repositories.com/repository/nathancahill-split.md

## Topics

`css` `flexbox` `split` `split-layout` `tiny`

## Description

Unopinionated utilities for resizeable split views

## Tags

### User Interface & Experience

- [Resizable Panes](https://awesome-repositories.com/f/user-interface-experience/resizable-panes.md) — Creates draggable dividers between panels so users can resize layout sections by dragging the gutter.
- [Draggable Layout Gutters](https://awesome-repositories.com/f/user-interface-experience/gutter-management/draggable-layout-gutters.md) — Implements draggable gutters between panels that capture mouse and touch events for resize calculations.
- [Resizable Panel Sizing](https://awesome-repositories.com/f/user-interface-experience/layout-management/component-layout-containers/css-driven-layout-containers/resizable-panel-sizing.md) — Provides CSS-driven panel resizing that computes dimensions during drag and applies them via inline styles.
- [Configurable Split Layouts](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/resizable-panel-layout-tutorials/configurable-split-layouts.md) — Divides containers into resizable panels with configurable direction, sizing, and gutter behavior. ([source](https://split.js.org/))
- [CSS-Driven Panel Sizing](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/resizable-panel-layout-tutorials/css-driven-panel-sizing.md) — Computes new panel sizes on drag and applies them through CSS to avoid runtime overhead. ([source](https://cdn.jsdelivr.net/gh/nathancahill/split@master/README.md))
- [CSS Layout Mode Support](https://awesome-repositories.com/f/user-interface-experience/content-dividers/content-sectioning/layout-modes/css-layout-mode-support.md) — Works with float, flex, and grid layouts through separate utilities for broad browser compatibility. ([source](https://cdn.jsdelivr.net/gh/nathancahill/split@master/README.md))
- [Flexbox Layouts](https://awesome-repositories.com/f/user-interface-experience/flexbox-layouts.md) — Leverages CSS flexbox properties for panel sizing and distribution in split view layouts.
- [CSS Layout Mode Support](https://awesome-repositories.com/f/user-interface-experience/python-based-ui-frameworks/terminal-ui-frameworks/multi-panel-layouts/css-layout-mode-support.md) — Supports float, flex, and grid layout modes with separate utilities for broad browser compatibility.
- [Resizable Panel Layout Tutorials](https://awesome-repositories.com/f/user-interface-experience/resizable-panes/resizable-panel-layout-tutorials.md) — Computes new panel sizes on drag and applies them through pure CSS to avoid runtime overhead.

### Part of an Awesome List

- [Inline Style Sizing](https://awesome-repositories.com/f/awesome-lists/devtools/cards/pure-css-renderers/inline-style-sizing.md) — Applies panel dimensions via inline CSS styles during drag, avoiding JavaScript-driven layout recalculations.

### Software Engineering & Architecture

- [Framework-Agnostic Utilities](https://awesome-repositories.com/f/software-engineering-architecture/creational-design-patterns/framework-agnostic-utilities.md) — Provides standalone, framework-agnostic functions for creating resizable split views.

### Graphics & Multimedia

- [CSS Grid Panel Layouts](https://awesome-repositories.com/f/graphics-multimedia/video-scene-layouts/grid-arrangements/css-grid-panel-layouts.md) — Uses CSS grid properties for precise panel placement and resizing in split view layouts.