{"id":21033450,"url":"https://github.com/electerious/basicgrid","last_synced_at":"2025-07-27T11:36:04.648Z","repository":{"id":58239580,"uuid":"45611996","full_name":"electerious/basicGrid","owner":"electerious","description":"A Foundation-like grid system based on the flex display property.","archived":false,"fork":false,"pushed_at":"2022-10-01T13:58:51.000Z","size":70,"stargazers_count":57,"open_issues_count":2,"forks_count":7,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-18T03:48:15.387Z","etag":null,"topics":["columns","css","flexbox","grid","gutter","row"],"latest_commit_sha":null,"homepage":"https://basicgrid.electerious.com","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/electerious.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"electerious","custom":["https://paypal.me/electerious","https://www.buymeacoffee.com/electerious"]}},"created_at":"2015-11-05T13:11:19.000Z","updated_at":"2025-04-07T01:41:05.000Z","dependencies_parsed_at":"2022-08-31T03:01:54.810Z","dependency_job_id":null,"html_url":"https://github.com/electerious/basicGrid","commit_stats":null,"previous_names":[],"tags_count":24,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electerious%2FbasicGrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electerious%2FbasicGrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electerious%2FbasicGrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/electerious%2FbasicGrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/electerious","download_url":"https://codeload.github.com/electerious/basicGrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254349457,"owners_count":22056351,"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":["columns","css","flexbox","grid","gutter","row"],"created_at":"2024-11-19T12:57:13.008Z","updated_at":"2025-05-15T13:32:03.348Z","avatar_url":"https://github.com/electerious.png","language":"SCSS","funding_links":["https://github.com/sponsors/electerious","https://paypal.me/electerious","https://www.buymeacoffee.com/electerious","https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=CYKBESW577YWE"],"categories":[],"sub_categories":[],"readme":"# basicGrid\n\n[![Donate via PayPal](https://img.shields.io/badge/paypal-donate-009cde.svg)](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick\u0026hosted_button_id=CYKBESW577YWE)\n\nA Foundation-like grid system based on the `flex` display property.\n\n## Contents\n\n- [Demos](#demos)\n- [Setup](#setup)\n- [Usage](#usage)\n\t- [Basics](#basics)\n\t- [Sizes and Breakpoints](#sizes-and-breakpoints)\n\t- [Horizontal Alignment](#horizontal-alignment)\n\t- [Vertical Alignment](#vertical-alignment)\n\t- [Direction](#direction)\n\t- [Order](#order)\n\t- [Offset](#offset)\n\t- [Push and pull](#push-and-pull)\n\t- [Show and hide](#show-and-hide)\n- [Options](#options)\n\n## Demos\n\n| Name | Description | Link |\n|:-----------|:------------|:------------|\n| Default | Includes all features and most column variations. | [Try it on CodePen](https://codepen.io/electerious/pen/pjOvPZ) |\n\n## Setup\n\nWe recommend installing basicGrid using [npm](https://npmjs.com) or [yarn](https://yarnpkg.com).\n\n```sh\nnpm install basicgrid\n```\n\n```sh\nyarn add basicgrid\n```\n\nInclude the CSS files in the `head` tag …\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/basicGrid.min.css\"\u003e\n```\n\n… or use basicGrid via [jsDelivr CDN](https://www.jsdelivr.com/package/npm/basicgrid):\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/basicgrid@3/dist/basicGrid.min.css\"\u003e\n```\n\n## Usage\n\n### Basics\n\n- basicGrid is mobile first. Smaller breakpoints will automatically apply on all larger sizes.\n- The outermost row has a `max-width`.\n- A nested row removes the left gutter of the first column and the right gutter of the last column inside the row.\n- Classes are generated from the names and sizes in the `$sizes` map.\n- You can fill a row with up to twelve columns. Columns without a specified size will fill an entire row.\n- Each column has a gutter on the left and right side.\n- Columns have the same height when not specified otherwise.\n- Columns wrap when they don't fit into one row.\n\n### Sizes and Breakpoints\n\nSpecify the widths of each column with `small-`, `medium-`, and `large-` or use `-auto` to fill the available space. Defaults to `small-12`.\n\n```html\n\u003cdiv class=\"row\"\u003e\n\t\u003cdiv class=\"column small-6 medium-6 large-4\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"column small-3 medium-auto large-4\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"column small-3 medium-auto large-4\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Horizontal Alignment\n\n`left-on-`, `center-on-` and `right-on-` change the horizontal alignment of all columns in a row. `around-on-` and `between-on-` allow you to distribute the columns. Defaults to `left-on-`.\n\n```html\n\u003cdiv class=\"row left-on-small center-on-medium right-on-large\"\u003e\n\t\u003cdiv class=\"column small-6\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```html\n\u003cdiv class=\"row around-on-small between-on-large\"\u003e\n\t\u003cdiv class=\"column small-4\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"column small-4\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Vertical Alignment\n\n`top-on-`, `middle-on-` and `bottom-on-` change the vertical alignment of all columns in a row. Defaults to `stretch-on-`, which gives each column the same height.\n\n```html\n\u003cdiv class=\"row top-on-small middle-on-medium bottom-on-large\"\u003e\n\t\u003cdiv class=\"column small-6\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"column small-6\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Direction\n\nDefine the direction columns are placed in a row using `ltr-on-` and `rtl-on-`. Defaults to `ltr-on-`.\n\n```html\n\u003cdiv class=\"row ltr-on-small rtl-on-medium\"\u003e\n\t\u003cdiv class=\"column small-6\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"column small-6\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Order\n\nReorder columns with `first-on-`, `last-on-` and `origin-on-`. Defaults to `origin-on-`, which keeps the order as specified in the HTML.\n\n```html\n\u003cdiv class=\"row\"\u003e\n\t\u003cdiv class=\"column small-4 last-on-small\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"column small-4\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"column small-4 first-on-small origin-on-medium\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Offset\n\nUse offset classes to move columns to the right.\n\n```html\n\u003cdiv class=\"row\"\u003e\n\t\u003cdiv class=\"column small-2 small-offset-2\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"column small-2 small-offset-4\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"column small-2\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Push and pull\n\nShift columns around between breakpoints using `-push-` and `-pull-`. Especially helpful if you want to modify the order of columns based on the size of the screen.\n\n```html\n\u003cdiv class=\"row\"\u003e\n\t\u003cdiv class=\"column small-10 small-push-2\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"column small-2 small-pull-10\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n### Show and hide\n\n`show-on-` and `hide-on-` allow you to show and hide rows or individual columns.\n\n```html\n\u003cdiv class=\"row hide-on-small show-on-large\"\u003e\n\t\u003cdiv class=\"column\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```html\n\u003cdiv class=\"row\"\u003e\n\t\u003cdiv class=\"column hide-on-medium show-on-large\"\u003e\u003c/div\u003e\n\t\u003cdiv class=\"column show-on-medium hide-on-large\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Options\n\nImport `src/styles/main.scss` directly to customize the grid:\n\n```scss\n$basicGrid__columns: 12; // Number of columns\n$basicGrid__width: 1280px; // Maximum width of a row\n$basicGrid__outer: 0; // Gutter of the outermost row\n$basicGrid__gutter: 1.8rem; // Gutter size between columns\n\n// Column-Breakpoints\n$basicGrid__sizes: (\n\t'small': 0,\n\t'medium': 640px,\n\t'large': 1024px\n);\n\n@import 'src/styles/main';\n```\n\nOverwrite the SASS options with CSS variables to adjust the grid on the client:\n\n```css\nhtml {\n\n\t--basicGrid-width: 1200px;\n\t--basicGrid-outer: 0;\n\t--basicGrid-gutter: 1.8rem;\n\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felecterious%2Fbasicgrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Felecterious%2Fbasicgrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Felecterious%2Fbasicgrid/lists"}