Only-grid NPM | npm.io

Only-Grid

Version: 2.1.5

This lightweight CSS grid system is designed for both small and large projects, providing a simple and easy-to-use solution. Inspired by Bootstrap, Only-Grid offers a minimalistic grid system with the added convenience of a custom prefix.

Features

Mobile-first grid system
Responsive layout support
Lightweight and easy to learn
Inspired by Bootstrap grid system
Custom prefix 'a-' for grid classes
Work seamlessly with React,NextsJs and other framework

Installation

To use Only-Grid in your project, you can install it via npm:

npm install only-grid

import 'only-grid';

How It Works

Import it on Root Level App.js or Index.js

Columns

The Only-Grid system is built on a flexible 12-column layout. You can create columns by using the .a-col-{number} class, where {number} represents the desired width of the column. For example, .a-col-6 creates a column that spans 50% of the row.

Rows

To structure your content, use the .a-row class. Rows act as containers for your columns, ensuring proper alignment and spacing.

Gaps

Adjusting gaps between columns and rows is made easy with the .gap-{number} class. The {number} represents the desired gap size. For instance, .gap-2 will set a gap of 0.5rem between columns.

Margins and Paddings

The .mx-{size}, .my-{size}, .m-{size}, .px-{size}, .py-{size}, and .p-{size} classes allow you to set margins and paddings easily. Replace {size} with a number from 0 to 5, indicating the desired size.

.mx-2: Sets both horizontal margins to 0.5rem.
.my-3: Sets both vertical margins to 1rem.
.p-4: Sets padding on all sides to 1.5rem.

Adjust the classes as needed to achieve the desired spacing for your layout.

Example

<div class="a-container">
  <div class="a-row gap-3">
    <div class="a-col-6 mx-2">
      <!-- Content for column 1 -->
    </div>
    <div class="a-col-6 mx-2">
      <!-- Content for column 2 -->
    </div>
  </div>
</div>