79 Repositories
JavaScript grid-layout Libraries
Some ideas for grid to slideshow switch animations using GSAP's Flip plugin.
Grid to Slideshow Switch Animations Some ideas for grid to slideshow switch animations using GSAP's Flip plugin. Article on Codrops Demo Installation
This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X and O on a 3x3 grid.
Tic Tac Toe Game This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X a
Opiniated Eleventy starter based on the workflow suggested by Andy Bell's
Eleventy starter Very opiniated Eleventy starter based on the workflow suggested by Andy Bell's https://buildexcellentwebsit.es/. Eleventy starter Pre
tb-grid is a super simple and lightweight 12 column responsive grid system utilizing css grid.
tb-grid Lightweight (1kb gzipped) 12 column grid system, built with css grid. 👉 Demos & Playground Have a look at those examples: Main Demo: https:/
Customizable masonry Flatlist. it just behave like Flatlist but using ScrollView behind the scene
Would you like to support me? react-native-masonry-grid Customizable masonry Flatlist. it just behave like Flatlist but using ScrollView behind the sc
Print seat layout for movie, flight (jQuery plugin)
seatLayout.js (movie-seat-layout) Print seat layout for movie, flight and seat selection (jQuery plugin) Demo : https://sachinkurkute.github.io/movie-
Unopinionated utilities for resizeable split views
Split Unopinionated utilities for resizeable split views. Zero Deps Tiny: Each is between 1-2kb gzipped. Fast: No overhead or attached window event li
✏️ A small jQuery extension to turn a static HTML table into an editable one. For quickly populating a small table with JSON data, letting the user modify it with validation, and then getting JSON data back out.
jquery-editable-table A small jQuery extension to turn an HTML table editable for fast data entry and validation Demo 👉 https://jsfiddle.net/torrobin
jQuery plugin that combines the functionality of a grid with that of an accordion.
Grid Accordion - jQuery plugin A responsive and touch-enabled jQuery grid accordion plugin that combines the functionality of a grid with that of an a
Minimalist dependancy free Masonry layout library
MiniMasonry.js Minimalist dependency free Masonry layout library MiniMasonry is a lightweight dependency free Masonry layout. It will compute elements
Simple, responsive and lightweight Masonry Grid jQuery Plugin.
jquery-masonry-grid Simple, responsive and lightweight Masonry Grid jQuery Plugin. Installation Add the script before closing the body tag (make sur
Style definitions for nice terminal layouts 👄
blipgloss Style definitions for nice terminal layouts. Powered by lipgloss and bun:ffi. Install bun add blipgloss Usage Blipgloss takes an expressive,
Advanced table plugin
Grid.js Advanced table plugin A table library that works everywhere Simple and lightweight implementation No vendor lock-in. Grid.js can be used with
A javascript plugin to filter elements from a "masonry" grid.
Isolde Isolde is a lightweight, flexible, and responsive javascript plugin allow you to filter elements from a "masonry" grid. Quick start Install Thi
2D HTML5 rendering and layout engine for game development
Stage.js is a 2D HTML5 JavaScript library for cross-platform game development, it is lightweight, fast and open-source. Check out examples and demos!
:iphone: A super lightweight HTML, Sass, CSS, and JavaScript framework for building responsive websites
Responsive Boilerplate A powerful, accessible, developer friendly, framework for building responsive websites Responsive Boilerplate is the developers
Freewall is a cross-browser and responsive jQuery plugin to help you create grid, image and masonry layouts for desktop, mobile, and tablet...
Freewall Freewall is a cross-browser and responsive jQuery plugin to help you create many types of grid layouts: flexible layouts, images layouts, nes
Chrome & Firefox extension to return old Twitter layout from 2015.
OldTwitter (2022) Chrome extension to return old Twitter layout from 2015. This extension doesn't add any CSS on top of original Twitter. It's fully o
A simple guide to responsive design.
Grid is a great learning tool but no longer supported. Learn why. Grid A simple guide to responsive design. www.adamkaplan.me/grid Why bother with res
Mason.js for creating a perfect grid with jQuery.
MasonJS Mason.js is a jQuery plugin that allows you to create a perfect grid of elements. This is not Masonry, or Isotope or Gridalicious. Mason fills
Lightweight and independent Pinterest-like cascading grid layout library
Bricklayer is a Lightweight and Independent Pinterest-like Cascading Grid Layout Library 💎 Simpler than any other cascading grid layout tools. ❄️ Lig
A small, lightweight JavaScript plugin for placing items in straight rows (jQuery and vanilla JS version) – Demo:
rowGrid.js rowGrid.js is a small, lightweight (~1000 bytes gzipped) jQuery plugin for placing images (or other items) in straight rows. The grid is si
Drag and drop library for two-dimensional, resizable and responsive lists
DEPRECATED This project is no longer maintained, please consider using react-grid-layout instead. GridList Drag and drop library for a two-dimensional
Use jsx to make scriptable's layout.
scriptable-jsx This project helps you to write Scriptable widgets with JSX syntax. And add some useful tools by the way. you can check demos in demo f
An npm package with Tailwind CSS utility classes for creating responsive grid columns without media queries using auto fit.
Grid Auto Fit for Tailwind CSS A plugin that helps you create a responsive grid layout in Tailwind CSS without using media queries. It uses the auto-f
Backgrid.js is a set of components for building semantic and easily stylable data grid widgets
Backgrid.js is a set of components for building semantic and easily stylable data grid widgets. It offers a simple, intuitive programming interface that makes easy things easy, but hard things possible when dealing with tabular data.
The SheetJS Community Edition offers battle-tested open-source solution
The SheetJS Community Edition offers battle-tested open-source solutions for extracting useful data from almost any complex spreadsheet and generating new spreadsheets that will work with legacy and modern software alike.
high performance、complex interaction table
功能描述 1、高性能、满足复杂交互的编辑表格 2、基于: antd4(https://ant.design/index-cn) ag-grid(https://www.ag-grid.com/) 3、基于原生ag-grid 的API进行封装 一、主要功能 将按下列顺序逐步迭代 1、通用编辑功能 🚧
A Responsive Restaurant Website using Next.JS
Matteo's Pizza 🍕 FRONT-END - A Responsive Restaurant Website using NEXT.js Built with love and burning my 🧠 brain Find me on Linkedin! Technologies
Chrome extension that applies phrase-based line breaking and visible phrase boundaries to the current page.
BudouX Chrome Extension This extension applies the phrase-based line breaking or the Japanese Wakachi-gaki style line breaking to the current page. Pl
Generate colorful and temporarily identifiable SVGs with unique urls.
reptiles.dev Generate colorful and temporarily identifiable SVGs with unique urls.
MSN Redesign made with Next - Inspired by Igor Monteiro's Layout
MSN Redesign 🏳 Made with Next - Inspired by Igor Monteiro's Layout | Behance 🛠️ Stack Next React Yarn (v1.22.17) CSS in JS CSS - Gradient Responsive
Create Angular Dynamic Forms with only JSON configuration. Full grid layout supported.
Angular Dynamic Forms Angular component that allows the creation of dynamic forms. You can use this component in situations where you get the configur
Página da Web que tem uma calculadora simples utilizando CSS Grid, JavaScript e HTML
Calculadora-Oline Calculadora exibida online via HTML e CSS, com foco no CSS Grid. Utilizei quatro (sub)grids dentro de uma principal, a qual engloba
A simple library to draw option menu or other popup inputs and layout on Node.js console.
console-gui-tools A simple library to draw option menu or other popup inputs and layout on Node.js console. console-gui-tools A simple Node.js library
"Math magicians" is a website for all fans of mathematics
Math magicians is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to: - Make simple calculations. - Read a random math-related quote. Built with React and pure CSS
Video conference layout with tailwindcss & vuejs jsx
Video conference layout with tailwindcss & vuejs jsx
Use this app to track and prioritize the topics you need to study during your job search
Interview Skills Grid Use this app to track and prioritize the topics you need to study during your job search. Try it for yourself! -- Interview Ski
micro-library for CSS Flexbox and CSS Grid
SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc
Script para crear un layout tipo masonry.
light-masonry Script para crear un layout tipo masonry. Solo es necesario tener el contenedor junto a sus hijos que se acomodaran en este tipo de layo
Visual layout editor for matplotlib and any plotting library built upon matplotlib like seaborn.
Matplotlib Layout Generator Before you start: You must have experience with using matplotlib. It needs to be use on desktop. Not designed for mobile.
here in this git repo you will get react js basic layout, having in responsive mode.
Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np
Testimonials grid section main
Frontend Mentor - Testimonials grid section Welcome! 👋 Thanks for checking out this front-end coding challenge. Frontend Mentor challenges help you i
An easy to use and simple masonry layout for React Js based on flexbox column.
React Masonry An easy to use and simple masonry layout for React Js based on flexbox column. Live Preview / Demo In Here Basic Usage Masonry Layout M
Plock is a responsive masonry layout implementation for React. Very simple to use and easy to understand.
About Plock 🌈 Plock is a responsive masonry layout implementation for React. Very simple to use and easy to understand. Can I see a demo? 👀 The demo
Create a card layout that let your user flip through it like you see on Google Tips
#Tip Cards by Pete R. Create an animated card layout that let your viewer flip through it like you see on Google Tips Page. Created by Pete R., Founde
Chart.js Graph-like Charts (tree, force directed)
Chart.js Graphs Chart.js module for charting graphs. Adding new chart types: graph, forceDirectedGraph, dendogram, and tree. Works great with https://
Fancytree - JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkboxes, drag'n'drop, and lazy loading
Fancytree Fancytree (sequel of DynaTree 1.x) is a JavaScript tree view / tree grid plugin with support for keyboard, inline editing, filtering, checkb
Grid-tool - Small tool that allows you to integrate a predefined or generated grid into your front-end development environment.
Grid tool Small tool that allows you to integrate a predefined or generated grid into your front-end development environment. Tool installation includ
Minimalistic portfolio/photography site with masonry grid, page transitions and big images.
Gatsby Starter Portfolio: Emilia Minimalistic portfolio/photography site with masonry grid, page transitions and big images. Themeable with Theme UI.
Auth-Form-Design - Beautiful Auth Form Designed using React 🥰.
🙋 Auth Form Design 🥳 Features 1. Check Your Password Strength 2. Can Use Suggested Password 3. Enjoy Responsive Design Getting Started with Create R
:green_book: SheetJS Community Edition -- Spreadsheet Data Toolkit
SheetJS js-xlsx Parser and writer for various spreadsheet formats. Pure-JS cleanroom implementation from official specifications, related documents, a
:green_book: SheetJS Community Edition -- Spreadsheet Data Toolkit
SheetJS js-xlsx Parser and writer for various spreadsheet formats. Pure-JS cleanroom implementation from official specifications, related documents, a
A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.
jQuery GRIDDER 1.4.2 ======= A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. We have all
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
Thumbnail Grid with Expanding Preview A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Googl
A motion hover effect for a background grid of images.
Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install
Lightweight Grid jQuery Plugin
jsGrid Lightweight Grid jQuery Plugin Project site js-grid.com jsGrid is a lightweight client-side data grid control based on jQuery. It supports basi
jQuery grid plugin
jqGrid jQuery grid plugin jqGrid is an Ajax-enabled JavaScript control that provides solutions for representing and manipulating tabular data on the w
Nice, sleek and intuitive. A grid control especially designed for bootstrap.
jQuery Bootgrid Plugin Nice, sleek and intuitive. A grid control especially designed for bootstrap. Getting Started jQuery Bootgrid is a UI component
A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images.
jQuery GRIDDER 1.4.2 ======= A jQuery plugin that displays a thumbnail grid expanding preview similar to the effect seen on Google Images. We have all
Text-based user interface CSS library
TuiCss Text-based user interface CSS library -- Documentation -- About TuiCss is a library focused to create web applications using an interface based
A simple, modern and interactive datatable library for the web
Frappe DataTable A modern datatable library for the web Introduction Frappe DataTable is a simple, modern and interactive datatable library for displa
JavaScript data grid with a spreadsheet look & feel. Works for React, Angular, and Vue. Supported by the Handsontable team ⚡
Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering
Grid based on CSS3 flexbox
Flexbox Grid flexboxgrid.com Grid based on the flex display property. Install npm npm i flexboxgrid --save bower bower install flexboxgrid cdn CDNJS
a responsive equal heights plugin
jquery.matchHeight.js matchHeight makes the height of all selected elements exactly equal brm.io/jquery-match-height Demo - Features - Gallery - Insta
Drag and drop library for two-dimensional, resizable and responsive lists
GridList Drag and drop library for a two-dimensional resizable and responsive list of items Demo: http://hootsuite.github.io/grid/ The GridList librar
A fluid grid of square units.
Fluid-Squares What is it? A fluid grid of square units using HTML and CSS. Fluid Squares preserves a unit's square proportion within a fluid layout. T
JavaScript data grid with a spreadsheet look & feel. Works for React, Angular, and Vue. Supported by the Handsontable team ⚡
Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering
The best JavaScript Data Table for building Enterprise Applications. Supports React / Angular / Vue / Plain JavaScript.
Module SonarCloud Status ag-grid-community ag-grid-enterprise AG Grid AG Grid is a fully-featured and highly customizable JavaScript data grid. It del
:atom_symbol: React primitive UI components built with styled-system.
Rebass React primitive UI components built with Styled System. https://rebassjs.org npm i rebass Getting Started import React from 'react' import { Bo
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list✌️
A set of higher-order components to turn any list into an animated, accessible and touch-friendly sortable list Examples available here: http://claude
A draggable and resizable grid layout with responsive breakpoints, for React.
React-Grid-Layout React-Grid-Layout is a grid layout system much like Packery or Gridster, for React. Unlike those systems, it is responsive and suppo
⚛️ Hooks for building fast and extendable tables and datagrids for React
Hooks for building lightweight, fast and extendable datagrids for React Enjoy this library? Try them all! React Query, React Form, React Charts Visit
JavaScript data grid with a spreadsheet look & feel. Works for React, Angular, and Vue. Supported by the Handsontable team ⚡
Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering
React components for efficiently rendering large lists and tabular data
React components for efficiently rendering large lists and tabular data. Check out the demo for some examples. Sponsors The following wonderful compan
Grid based on CSS3 flexbox
Flexbox Grid flexboxgrid.com Grid based on the flex display property. Install npm npm i flexboxgrid --save bower bower install flexboxgrid cdn CDNJS
Spectre.css - A Lightweight, Responsive and Modern CSS Framework
Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba
Create word clouds in JavaScript.
Word Cloud Layout This is a Wordle-inspired word cloud layout written in JavaScript. It uses HTML5 canvas and sprite masks to achieve near-interactive
JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages.
GoJS, a JavaScript Library for HTML Diagrams GoJS is a JavaScript and TypeScript library for creating and manipulating diagrams, charts, and graphs. S