{"id":28497737,"url":"https://github.com/ahmadjeddi/bootstrap-gridsystem","last_synced_at":"2026-04-20T19:06:21.677Z","repository":{"id":296418885,"uuid":"993326383","full_name":"AhmadJeddi/Bootstrap-GridSystem","owner":"AhmadJeddi","description":"**FloatGrid** is a minimalist, SCSS-powered grid system inspired by Bootstrap. Built with floats — not Flexbox or CSS Grid — it offers responsive columns, offsets, containers, and essential utility classes for clean, RTL-friendly layouts","archived":false,"fork":false,"pushed_at":"2025-06-04T19:51:28.000Z","size":19,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-08T13:06:40.423Z","etag":null,"topics":["bootstrap","bootstrap-alternative","css","float-layouts","frontend","grid-system","responsive-grid","rtl","scss","utility-classes","web-development"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AhmadJeddi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-30T15:42:55.000Z","updated_at":"2025-06-04T19:58:36.000Z","dependencies_parsed_at":"2025-05-30T22:17:13.375Z","dependency_job_id":"5364993a-f860-4cf0-a288-01f1ed890894","html_url":"https://github.com/AhmadJeddi/Bootstrap-GridSystem","commit_stats":null,"previous_names":["ahmadjeddi/bootstrap-gridsystem"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/AhmadJeddi/Bootstrap-GridSystem","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AhmadJeddi%2FBootstrap-GridSystem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AhmadJeddi%2FBootstrap-GridSystem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AhmadJeddi%2FBootstrap-GridSystem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AhmadJeddi%2FBootstrap-GridSystem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AhmadJeddi","download_url":"https://codeload.github.com/AhmadJeddi/Bootstrap-GridSystem/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AhmadJeddi%2FBootstrap-GridSystem/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263335465,"owners_count":23450849,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bootstrap","bootstrap-alternative","css","float-layouts","frontend","grid-system","responsive-grid","rtl","scss","utility-classes","web-development"],"created_at":"2025-06-08T13:06:40.787Z","updated_at":"2026-04-20T19:06:21.621Z","avatar_url":"https://github.com/AhmadJeddi.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bootstrap-GridSystem – FloatGrid: A Lightweight Float-based Grid\n\n**FloatGrid** is a lightweight, responsive 12-column grid system inspired by [Bootstrap](https://getbootstrap.com), but built entirely with `float`, `inline-padding`, and `media queries`. Perfect for projects where Flexbox or CSS Grid is not required — and great for RTL layouts!\n\n---\n\n## 📦 Features\n\n- ✅ 12-column layout with responsive breakpoints\n- ✅ Offset support for spacing between columns\n- ✅ Pure CSS (Sass-powered) – no JavaScript\n- ✅ No dependencies – easy to integrate\n- ✅ RTL-compatible\n\n---\n\n## 🧰 Utilities\n\nThe grid system includes a wide range of utility classes for layout, spacing, positioning, visibility, alignment, and more. These classes are lightweight, reusable, and designed to give you full control over your layout without writing custom CSS.\n\n### 📐 Display \u0026 Flexbox\n\n| Class             | CSS Property             |\n| ----------------- | ------------------------ |\n| `.d-none`         | `display: none`          |\n| `.d-inline`       | `display: inline`        |\n| `.d-inline-block` | `display: inline-block`  |\n| `.d-block`        | `display: block`         |\n| `.d-flex`         | `display: flex`          |\n| `.flex-row`       | `flex-direction: row`    |\n| `.flex-column`    | `flex-direction: column` |\n\n### 🧭 Justify \u0026 Align (Flexbox)\n\n| Class                      | CSS Property                     |\n| -------------------------- | -------------------------------- |\n| `.justify-content-start`   | `justify-content: start`         |\n| `.justify-content-end`     | `justify-content: end`           |\n| `.justify-content-center`  | `justify-content: center`        |\n| `.justify-content-between` | `justify-content: space-between` |\n| `.justify-content-around`  | `justify-content: space-around`  |\n| `.justify-content-evenly`  | `justify-content: space-evenly`  |\n| `.align-items-start`       | `align-items: start`             |\n| `.align-items-end`         | `align-items: end`               |\n| `.align-items-center`      | `align-items: center`            |\n| `.align-items-baseline`    | `align-items: baseline`          |\n| `.align-items-stretch`     | `align-items: stretch`           |\n\n### ✍️ Text Alignment\n\n| Class           | CSS Property          |\n| --------------- | --------------------- |\n| `.text-start`   | `text-align: start`   |\n| `.text-center`  | `text-align: center`  |\n| `.text-end`     | `text-align: end`     |\n| `.text-justify` | `text-align: justify` |\n\n### 🔠 Font Weight\n\n| Class         | CSS Property           |\n| ------------- | ---------------------- |\n| `.fw-bold`    | `font-weight: bold`    |\n| `.fw-lighter` | `font-weight: lighter` |\n\n### 👁️ Visibility\n\n| Class        | CSS Property          |\n| ------------ | --------------------- |\n| `.visible`   | `visibility: visible` |\n| `.invisible` | `visibility: hidden`  |\n\n### 📏 Vertical Alignment\n\n| Class                | CSS Property                  |\n| -------------------- | ----------------------------- |\n| `.align-baseline`    | `vertical-align: baseline`    |\n| `.align-top`         | `vertical-align: top`         |\n| `.align-middle`      | `vertical-align: middle`      |\n| `.align-bottom`      | `vertical-align: bottom`      |\n| `.align-text-top`    | `vertical-align: text-top`    |\n| `.align-text-bottom` | `vertical-align: text-bottom` |\n\n### 📦 Positioning\n\n| Class                | CSS Property         |\n| -------------------- | -------------------- |\n| `.position-static`   | `position: static`   |\n| `.position-relative` | `position: relative` |\n| `.position-absolute` | `position: absolute` |\n| `.position-fixed`    | `position: fixed`    |\n| `.position-sticky`   | `position: sticky`   |\n\n### 🌊 Overflow\n\n| Class                | CSS Property         |\n| -------------------- | -------------------- |\n| `.overflow-auto`     | `overflow: auto`     |\n| `.overflow-x-auto`   | `overflow-x: auto`   |\n| `.overflow-y-auto`   | `overflow-y: auto`   |\n| `.overflow-hidden`   | `overflow: hidden`   |\n| `.overflow-x-hidden` | `overflow-x: hidden` |\n| `.overflow-y-hidden` | `overflow-y: hidden` |\n\n### 📐 Width \u0026 Height\n\n| Class    | CSS Property   |\n| -------- | -------------- |\n| `.w-100` | `width: 100%`  |\n| `.h-100` | `height: 100%` |\n\n### 📐 Margin\n\n| Class     | CSS Property   |\n| --------- | -------------- |\n| `.m-auto` | `margin: auto` |\n\n### 🖼️ Images\n\n| Class        | Description                                                         |\n| ------------ | ------------------------------------------------------------------- |\n| `.img-fluid` | Makes the image scale fluidly with `width: 100%` and `height: auto` |\n\n### 📦 Containers\n\n| Class              | Description                                                       |\n| ------------------ | ----------------------------------------------------------------- |\n| `.container`       | Fixed-width container with horizontal padding and centered layout |\n| `.container-sm`    | Responsive container (small breakpoint)                           |\n| `.container-md`    | Responsive container (medium breakpoint)                          |\n| `.container-lg`    | Responsive container (large breakpoint)                           |\n| `.container-xl`    | Responsive container (extra large breakpoint)                     |\n| `.container-xxl`   | Responsive container (extra extra large breakpoint)               |\n| `.container-fluid` | Full-width container spanning the entire viewport                 |\n\n---\n\n## 🎯 Breakpoints\n\n| Class Prefix | Min-width | Container Max-width |\n| ------------ | --------- | ------------------- |\n| `.col-xs-*`  | 1px       | 100% (fluid)        |\n| `.col-sm-*`  | 576px     | 540px               |\n| `.col-md-*`  | 768px     | 720px               |\n| `.col-lg-*`  | 992px     | 960px               |\n| `.col-xl-*`  | 1200px    | 1140px              |\n| `.col-xxl-*` | 1400px    | 1320px              |\n\n---\n\n## 🛠 Usage\n\n1. Clone or download the repository\n2. Import `grid-system.scss` into your project\n3. Compile it using your Sass compiler\n4. Use the classes like `.col-sm-6`, `.col-lg-offset-3`, etc.\n\n```html\n\u003cdiv class=\"container\"\u003e\n  \u003cdiv class=\"row\"\u003e\n    \u003cdiv class=\"col-sm-4\"\u003eLeft\u003c/div\u003e\n    \u003cdiv class=\"col-sm-4 col-sm-offset-4\"\u003eRight\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadjeddi%2Fbootstrap-gridsystem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fahmadjeddi%2Fbootstrap-gridsystem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fahmadjeddi%2Fbootstrap-gridsystem/lists"}