npm.devtool.tech
πŸ‘ You can access 12-column-grid package with using 12ColumnGrid variable in browser devtools!
Provides CSS classes for creating 12 column grid layout

code/package/bundle size

0B
publish
0B
install
0B
bundle minified
0B
bundle gzipped

12-column-grid

GitHub file size in bytes npm jsDeliver hits per month GitHub issues GitHub GitHub package.json version Dependencies GitHub last commit

  • Creates 12 column responsive grid layout
  • Customizable
  • Light weight
  • Zero production dependency
  • Class names are same as that of bootstrap
  • SCSS Source code
  • Uses display:grid

Contents

  • Using
    • Adding To Project
      • CDN
      • Installing locally
    • Using Classes
      • col classes
      • d-**-none classes
      • Aligning grid
    • Examples
      • Responsive list of cards
      • Responsive horizontal navigation links
    • Customizing grids
  • Reporting Issues
  • Contributing
    • Getting Started
    • Scripts
    • Tasks

Using

Adding To Project

CDN

<link rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/12-column-grid/dist/grid.min.css">

Another CDN

<link rel="stylesheet"
      type="text/css"
      href="https://unpkg.com/12-column-grid/dist/grid.min.css">

Installing locally

npm i 12-column-grid

or

yarn add 12-column-grid

To use grids from node_modules -

  • If your project is using SCSS, import grid.scss from node_modules/12-column-grid/src/grid.scss.

  • Projects without CSS pre-processors or other CSS pre-processors can use minified grid.min.css file from node_modules/12-column-grid/dist/grid.min.css.

  • For unminified file, use grid.css from node_modules/12-column-grid/dist/grid.css

  • Angular projects can import the library using angular.json file. Find the assets array in angular.json and put the path to node_modules/12-column-grid/src/grid.scss

    {
        "projects": {
            "<Project Name>": {
                "architect": {
                    "build": {
                        "options": {
                            "assets": [
                                "./node_modules/12-column-grid/src/grid.scss"
                            ],
                        },
                    },
                },
            },
        },
    }
    

Using Classes✨

All the class names in this library are same as bootstrap.

The container of the grid items should have a CSS class row or grid.

The width of the grid is divided into 12 columns.

The screen sizes are divided as

Screen typecodescreen width
πŸ“½οΈ extra large screenxlmore than 1200px
πŸ–₯️ large screenlgmore than 992px
πŸ’» medium screenmdmore than 768px
πŸ“± small screensmmore than 576px
πŸ“Ÿ extra small screenxsless than 576px

col classes

Use the following classes for responsive grid layout

  • col-xl-1, col-xl-2, ... col-xl-12

  • col-lg-1, col-lg-2, ... col-lg-12

  • col-md-1, col-md-2, ... col-md-12

  • col-sm-1, col-sm-2, ... col-sm-12

  • col-xs-1, col-xs-2, ... col-xs-12

Mix classes of different screen sizes to get responsive layout

For non-responsive grids use the classes col-1, col-2, col-3, ... col-12.

d-**-none classes

Use the following classes to hide the element for a screen size.

d-xl-none, d-lg-none, d-md-none, d-sm-none, d-xs-none

Aligning grid

Alignment classes can align the grid or the item. When applied to grid item, it aligns the grid item. When applied to the grid, it aligns the grid itself.

For aligning use the classes

  • align-top - align at the top
  • align-bottom - align to the bottom
  • align-right - align to the right
  • align-left - align to the left
  • align-h-center - align the grid horizontally center
  • align-v-center - align the grid vertically center
  • align-h-stretch - stretchs the grid horizontally
  • align-v-center - stretchs the grid vertically

Examples

Responsive list of cards

<div class="row">
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <img src="https://www.imageurl.com/image">
        <h4>image description</h4>
    </div>
</div>

Responsive horizontal navigation links

<head>
    <style>
    nav>ul {
        list-style: none;
    }
    </style>
</head>
<body>
<nav>
    <ul class="row">
        <li class="col-md-3 col-sm-12">
            <a href="#">Link 1</a>
        </li>
        <li class="col-md-3 col-sm-12">
            <a href="#">Link 2</a>
        </li>
        <li class="col-md-3 col-sm-12">
            <a href="#">Link 3</a>
        </li>
        <li class="col-md-3 col-sm-12">
            <a href="#">Link 4</a>
        </li>
    </ul>
</nav>
</body>

Customizing grids πŸ”§

To customise the library, you need to use SCSS in your application. The following things can be customized -

  • Break points

    $breakPoints :(
        xl: 1600px,
        lg: 1200px,
        md: 1080px,
        sm: 480px,
        xs: 0
    );
    

    If the keys of $breakPoints are changed then it will reflect in the class names generated. For example, if the key lg is changed to large then the classes col-lg-1, col-lg-2, ... col-lg-12 will change col-large-1, col-large-2, ... col-large-12.

  • Number of columns in the grid

    $gridColumns: 10;
    
  • Gap between the grid rows

    $gridRowGap: 30px;
    
  • Gap between the grid columns

    $gridColumnGap: 10px;
    
  • Prefix .col before all column clases

    $columnPrefix: '.my-company';
    

Use @import after declaring variables for customizing.

Reporting Issues πŸ†˜

Issues for this library can be reported on Github.

github.com/KumarSidharth/12-column-grid/issues πŸ”—

Contributing πŸ™‹πŸ»β€β™‚οΈ

I am looking out for contributers and maintainers for this project. πŸ––πŸ»

Getting Started πŸ‘©β€πŸ’»

  1. Clone the project in your local machine.

    git clone https://github.com/KumarSidharth/12-column-grid.git

  2. Make sure you have Node.js installed on your machine.

  3. Go inside the project folder.

    cd 12-column-grid

  4. Install dev-dependencies using

    npm install --only=dev

This project is meant to have 0 production dependency.

Scripts πŸ“œ

  1. During the development process you can watch the files using

    npm run watch

    This script will rebuild the CSS files after every save in SCSS files.

  2. Before raising the pull request you should run the script

    npm run build

    This script will build the CSS files for production.

Tasks πŸ“

Task name
⬜️Add Table of contents in readme
⬜️Add Stackblitz link for Usage in Angular
⬜️Add codepen / jsFiddle links
βœ…Add customizable variables
βœ…Add usage docs
⬜️Add images for result of examples
βœ…Add to CDN
βœ…Minify the output file
⬜️Add classes for row-span
βœ…Hide element on a specific device
⬜️Show element on a specific device
βœ…align grid and grid item
⬜️Grid gap based on media queries
πŸ”ŽExplore PackageπŸ”ŽCDN Script

Score

Popularity3/100
Quality51/100
Maintenance94/100

DevDependencies