Press "Enter" to skip to content

Simple, Lightweight 12-Column Responsive Grid System | tb-grid

tb-grid is a very simple and lightweight 12-column responsive grid system that uses a CSS grid. tb-grid is a small, modern and responsive 12-column grid system built with CSS Grid Layout. Inspired by the Bootstrap grid system but more flexible and compact.

bootstrap grid examples, bootstrap grid system, bootstrap 4 grid example, bootstrap container width, bootstrap grid template, bootstrap grid generator, bootstrap grid, bootstrap layout examples

🤔 Why tb-grid?

The Bootstrap Network System is great. With very little code, you can add a response to your HTML in an illustrative manner. Using 12 columns makes the grid system very versatile as you can divide it into nice fractions (12/2, 12/3, 12/4, 12/6 – all produce integers!).

However, there are also a few things that bootstrap didn’t get right.

  • Requires a lot of nesting: .container> .row> .col. It’d be nice if we could drop our .container.
  • The ability to change gutters (also known as gutters) on a case-by-case basis is important, but it is a bit cumbersome to boot.
  • The classrooms are not marked or sized. Moreover, .container and .row are not so weird that there will be no accidental collisions.
  • While the 50K mini-network system isn’t huge, it isn’t exactly small either.
  • Tb-Grid deals with all of those booting problems and frankly with all the other network systems we know of (foundation, skeleton, …).

🤯 What is tb-grid?

tb-grid is a reverse engineering 12-column introductory grid built with a CSS grid. Grid CSS allows us to build a solution in around 50 lines of scss, which translates to less than 500 lines of CSS (about 1 kb compressed). It also allows us to drop one level of interference that was required in the boot, as the CSS grid supports gutters outside of the box. Finally, we made sure that everything lives under the tb-grid-prefix, so you should be really unlucky if someone accidentally uses a class declared by this library.

🚀 How do I install tb-grid?

There are two ways in which you can get the tb network, and choose the one that suits you best.

Option 1: SCSS

Copy the code from tb-grid.css to your project.

Option 2: CSS

Copy the code from tb-grid.css to your project.

Option 3: npm

npm install tb-grid and include scss or css file from there. (node_modules / tb-grid / tb-grid.scss or node_modules / tb-grid / tb-grid.css)

Option 4: npm CDN (unpkg)

You can use unkpg to get the file: <link rel = “stylesheet” href = “https://unpkg.com/tb-grid@0.0.2/tb-grid.css”>

🎨 How can I use the TB network?

It’s a lot like bootstrap, except that it’s simpler but with better scope:

  • Add the .tb-grid category to the HTML element.
  • Add classes from the model .tb-grid- <breakpoint> – <cols>, such as .tb-grid-sm-6 or .tb-grid-md-8, to live kids. Breakpoints are the same as in boot (sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px). The column argument can be between 1 and 12.
  • Add .tb-grid-gap- <gap size> to specify the size of the gap. Here, the <gap-size> value can be between (and include) 1 and 50.

✋ What are the limitations of the TB network?

Not support legacy (IE) browsers: https://caniuse.com/? 95% of people are using CSS web-enabled browsers as of April 2021. It is up to you to decide if this is sufficient for your project.

💯 What is the status of the project?

  • The project will be considered experimental and non-combat tested at this stage
  • API (class names) should not be considered stable. Rather, it is a working draft, on which we would like to receive comments. This is also reflected in the npm version below 1.0.0.
  • The prototype works well, see demos/playground above.
  • We plan to replace Bootstrap with tb-grid in our codebase
  • We will be glad to hear your opinions and suggestions on the tb network! Why don’t you just give it a try and let us know what you think? You can just open a problem or send us an email at daniel @ Taskbase. Com

How to make use of it:

1. Install and import the tb-grid into your project.

# NPM
$ npm i tb-grid
import "./tb-grid.scss";

2. Or load the stylesheet tb-grid.css into the doc.

<link rel="stylesheet" href="tb-grid.css" />

3. Create a primary grid system:

<div class="tb-grid tb-grid-gap-20">
  <div class="item tb-grid-sm-6 tb-grid-md-9">
  </div>
  <div class="item tb-grid-sm-6 tb-grid-md-3">
  </div>
  <div class="item tb-grid-sm-4 tb-grid-lg-10 tb-grid-xs-6">
  </div>
  <div class="item tb-grid-sm-8 tb-grid-lg-2 tb-grid-xs-6">
  </div>
    <div class="item tb-grid-sm-5 tb-grid-lg-4 tb-grid-xs-8">
  </div>
  <div class="item tb-grid-sm-7 tb-grid-lg-8 tb-grid-xs-4">
  </div>
</div>

4. Grid in the grid is supported as properly.

<div class="tb-grid tb-grid-gap-10">
  <div class="item tb-grid-sm-6">
    <div class="tb-grid tb-grid-gap-17">
      <div class="inner-item tb-grid-sm-6 tb-grid-xs-8">
      </div>
      <div class="inner-item tb-grid-sm-6 tb-grid-xs-4">
      </div>
    </div>
  </div>
  <div class="item tb-grid-sm-6">
    <div class="tb-grid tb-grid-gap-5">
      <div class="inner-item tb-grid-sm-8 tb-grid-md-3 tb-grid-xs-2">
      </div>
      <div class="inner-item tb-grid-sm-4 tb-grid-md-9 tb-grid-xs-6">
      </div>
      <div class="inner-item tb-grid-sm-4 tb-grid-md-9 tb-grid-xs-4">
      </div>
      <div class="inner-item tb-grid-sm-8 tb-grid-md-3">
      </div>
    </div>
  </div>
  <div class="item tb-grid-sm-4">
    <div class="tb-grid tb-grid-gap-20">
      <div class="inner-item tb-grid-sm-8 tb-grid-md-3 tb-grid-xs-10">
      </div>
      <div class="inner-item tb-grid-sm-4 tb-grid-md-9 tb-grid-xs-8">
      </div>
      <div class="inner-item tb-grid-sm-4 tb-grid-md-9 tb-grid-xs-6">
      </div>
      <div class="inner-item tb-grid-sm-8 tb-grid-md-3 tb-grid-xs-3">
      </div>
    </div>
  </div>
  <div class="item tb-grid-sm-8 tb-grid tb-grid-gap-5">
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
    <div class="inner-item tb-grid-xs-1">
    </div>
  </div>
</div>

Responsive 12-column Grid System Inspired By Bootstrap, tb-grid Plugin/Github


See Demo And Download

Official Website(taskbase): Click Here

This superior jQuery/javascript plugin is developed by taskbase. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *