Grid-tool - Small tool that allows you to integrate a predefined or generated grid into your front-end development environment.

Related tags

React grid-tool
Overview

Grid tool

Small tool that allows you to integrate a predefined or generated grid into your front-end development environment.

Tool installation

  • include grid.js
<script src="js/grid.js"></script>

  • init plugin : check example in demo index
<script>
    const predefined_grid = [];
	const options = {
		"unit" : '%', // % px
		"width" : "100%",
		"columns" : 12,
		"gutter" : 1, // based on unit
		"random" : false,
		"divider" : 1, // if random = true : random division by multiple
		"predefined" : predefined_grid,
	}
	grid.init(options);
</script>

Tool features

  • Generate uniform grid
  • Generate non uniforms grid based on divider (ex : multiple of 3, 5, golden ratio etc)
  • Generate grid from custom data
  • Ability to show / hide grid by pressing "g" key
  • Ability to show / hide css generated code by pressing "c" key

Plugin parameters

[unit] : string 
Set unit value. Ex : '%' or 'px' 
[width] : string 
Set container width. Ex : '100%' or '1920px'
[columns] : number
Total columns length. Ex : 12  
[gutter] : number
Gutter width. Ex : 1
[random] : boolean
If enabled, grid will be generated randomly by specified divider.  Ex : 'false' 
[divider] : number
Value use when generated random grid. Each grid position will be a multiple of this value. Ex : 5 
[predefined] : array
Used to generate a grid based on predefined values : [ [leftPosition, width], [leftPosition, width], ...]
Ex : [ [2%, 10%], [13%, 20%], ...] 

NB : When you generate a new random or classic grid :
Check the console and copy grid data. 
Then just pass the new array to predefined array.

Codepen demo

You might also like...

Fiz uma validação de senhas no Front-End usando RegEx!

Fiz uma validação de senhas no Front-End usando RegEx!

Seja bem vindo a um dos meus #JokeCodes Nesse código vou te mostrar como fazer uma validação de senha no Front-End, com feedback na tela de login!, us

Oct 5, 2022

An eCommerce website that allows you to sign in and create an account and buy products and pay using PayPal and includes a dashboard that allows you to (add, update, and remove) a product...

An eCommerce website that allows you to sign in and create an account and buy products and pay using PayPal and includes a dashboard that allows you to (add, update, and remove) a product...

An eCommerce website that allows you to sign in and create an account and buy products and pay using PayPal and includes a dashboard that allows you to (add, update, and remove) a product...

Oct 1, 2022

A small tool to help you check package duplicates in `yarn.lock`

A small tool to help you check package duplicates in `yarn.lock`

Yarn Duplicate A small tool to help you check duplicate package and package size in yarn.lock. Usage Change to your project root folder, which have a

Aug 11, 2021

PWA for making ad hoc room reservations easy in Google Workspace environment.

PWA for making ad hoc room reservations easy in Google Workspace environment.

Get A Room! More images in directory documentation/ui-and-architecture-images! Project structure The project is divided into frontend and backend fold

Sep 14, 2022

A small CLI tool to create a semantic release and git-cliff powered Changelog

A small CLI tool to create a semantic release and git-cliff powered Changelog

cliff-jumper A small CLI tool to create a semantic release and git-cliff powered Changelog Description When managing a collection of projects you ofte

Sep 22, 2022

JavaScript data grid with a spreadsheet look & feel. Works for React, Angular, and Vue. Supported by the Handsontable team ⚡

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

Jan 1, 2023

A draggable and resizable grid layout with responsive breakpoints, for React.

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

Jan 4, 2023

Testimonials grid section main

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

Feb 25, 2022
Owner
hmongouachon
hmongouachon
Would You Rather App (Front End Developer Udacity Nanodegree)

Would You Rather App Table of Contents Overview Built with Install (How it works) Overview Would You Rather is the Second project with React Redux in

Ahmed Bayoumi 1 Apr 28, 2022
This is full stack todo Application which has front end and backend side on my own. So you can try this out. Build using

Full Stack Todo Application Hello Everyone... Here I am sharing some information about the TODO APP which I build using React, Redux, Material UI, Exp

Nayan Ingale 5 Nov 8, 2022
Bookstore CMS React Front-End to display a list of books, categorize it, add and remove books and update your reading progress

Bookstore REACT app to manage your books Build an app to display a list of books, categorize it, add and remove books and update your reading progress

Eapen Zacharias 3 Aug 19, 2022
A personal project, made with React, React Native, Typescript and some of the most used front-end libraries.

A personal project, made with React, React Native, Typescript and some of the most used front-end libraries.

Alvaro Junior 1 Jul 23, 2022
Getir.com-react-tailwind - Getir.com anasayfa react + tailwind front-end

Getir.com React + Tailwind Front-end Bir gece uğraşı olarak getir.com'un anasayf

Tayfun Erbilen 102 Dec 17, 2022
A boilerplate for kickstarting my projects with Django backend and React front-end

Django-React-Boilerplate This is a boilerplate for kickstarting my projects with Django backend and React front-end. (AND, PostgreSQL) as the database

Mehedi Shafi 5 Apr 14, 2022
Next JS micro front-end project

a project to create micro frontend nextjs app in seconds!

Amirreza 4 Sep 1, 2022
Front-end code for teia

Teia UI This repository is the frontend code of the open, community owned Tezos NFT Platform teia.art. Teia is a fork of the Tezos NFT platform Hic et

Teia Community 21 Dec 2, 2022
OpenMaze landing page front-end

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

OpenMaze 6 Dec 15, 2022
🔍 Remake of Reguleque's front-end, a search engine for government employees. Maintained by the América Transparente foundation.

regulf-react Frontend for Reguleque, a search engine for chilean public workers records' as obtained through transparency databases. Get started To ru

América Transparente 3 Dec 15, 2022