@djas420/gridj v2.1.0

Gridj

Description

The ability to display the grid on the site during the development of the interface and not only… As well as the outline of the elements and the background of the elements

Quick start

Install

This package can be installed with:

npm

npm i -D @djas420/gridj

Or:

GitHub

git clone https://github.com/Djas420/gridj.git

Static HTML

Place the script before the closing body tag

<script src="/gridj.js"></script>

The number of breakpoints is not limited and you set them yourself, below is an example.

document.addEventListener('DOMContentLoaded', () => {
 initGridJ({
  insertGrid: 'body', // The element to insert the grid (tag, .class, #id), set the element to position: relative;
  zIndexGrid: 100, // Set z-index for grid
  bgColorColumns: 'rgba(255, 0, 0, 0.2)', // Grid color
  notElements: ['body'], // List of exclusion items for "gridjOutline" and "gridjBackground"
  bgOpacity: 1, // Element background transparency
  media: {
   320: { // Breakpoint
    padding: '0 15px', // Grid indent
    gap: '15px', // Column indent
    columns: 4, // Number of columns
   },
   920: {
    padding: '0',
    gap: 'calc(15px + (30 - 15) * (100vw - 920px) / (1200 - 920))', // Dynamic column padding
    columns: 6,
   },
   1200: {
    padding: '0 15px',
    gap: '15px',
    columns: 12,
    fix: '1000px', // Fixed grid width
   },
  },
 });
}, false);

Configuring Dynamic Column Padding:

calc(15px + (30 - 15) * (100vw - 920px) / (1200 - 920))

'15' — min offset value

'30' — max offset value

'920' — min breakpoint

'1200' — max breakpoint

Control the display

Enable/disable grid display using keyboard shortcut MacOs (Option G) Linux/Windows (Alt G)

Turn on/off the display of layering using the keyboard shortcut MacOs (Option O) Linux/Windows (Alt O)

Turn background display on/off using keyboard shortcut MacOs (Option B) Linux/Windows (Alt B)

From the author

How to calculate the exact width of an element? For example, if there are 12 columns and the element should occupy 4 columns? Here is the solution:

.elem {
 width: calc(((100% - (((30px * 12) / 4) - 30px)) / 12) * 4);
}

Setting the width of the element:

calc(((100% - (((30px 12) / 4) - 30px)) / 12) 4)

'12' — number of columns

'30px' — indent between columns

'4' — how many columns to occupy

Information

Email for feedback and suggestions info@djco.ru