{"id":18678021,"url":"https://github.com/kaushikshivam/bootgrid","last_synced_at":"2026-05-16T18:36:06.288Z","repository":{"id":44074846,"uuid":"207087314","full_name":"KaushikShivam/bootgrid","owner":"KaushikShivam","description":"Boot grid is a lightweight 12 col grid which is packed with a lot of custom design components and features","archived":false,"fork":false,"pushed_at":"2022-12-10T01:28:42.000Z","size":1004,"stargazers_count":0,"open_issues_count":9,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-27T21:14:13.374Z","etag":null,"topics":["bootstrap","component-library","components","css","css3","custom-grid","flexbox","grid","layout"],"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/KaushikShivam.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}},"created_at":"2019-09-08T09:05:14.000Z","updated_at":"2020-03-16T09:56:52.000Z","dependencies_parsed_at":"2023-01-25T20:16:41.474Z","dependency_job_id":null,"html_url":"https://github.com/KaushikShivam/bootgrid","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaushikShivam%2Fbootgrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaushikShivam%2Fbootgrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaushikShivam%2Fbootgrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaushikShivam%2Fbootgrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KaushikShivam","download_url":"https://codeload.github.com/KaushikShivam/bootgrid/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239525473,"owners_count":19653332,"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","component-library","components","css","css3","custom-grid","flexbox","grid","layout"],"created_at":"2024-11-07T09:35:46.142Z","updated_at":"2026-05-16T18:36:01.250Z","avatar_url":"https://github.com/KaushikShivam.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BootGrid - A lightweight framework with a custom 12 colum grid that takes inspiration from bootstrap. \r\nIt adds a lot of other functionalities.\r\nAll of the layout is built using flexbox.\r\n\r\nCheck the [Features](#features) to know more.\r\n\r\n![BootGrid Screenshot](screenshot.jpg)\r\n\r\n## Table of content\r\n- [Description](#description)\r\n- [Usage](#usage)\r\n- [Features](#features)\r\n- [Installation](#installation)\r\n- [Scripts](#scripts)\r\n- [ToDos](#todos)\r\n- [Contact](#contact)\r\n\r\n\r\n## Description\r\n\r\nThis template uses the following:\r\n\r\n- ### Modern CSS\r\n- ### BEM Methodology\r\n- ### Custom 4 column grid\r\n- ### SASS\r\n  - `variables`\r\n  - `nesting`\r\n  - `parials and imports`\r\n  - `mixins`\r\n  - `functions`\r\n  - `extends`\r\n- ### 7-1 project structure for SASS Files -\r\n\r\n  - `base/`\r\n  - `components/`\r\n  - `layout/`\r\n  - `pages/`\r\n  - `themes/`\r\n  - `abstracts/`\r\n  - `vendors/`\r\n\r\nA [build script](#scripts) is created to accomodate older browser compatibility\r\n\r\n## Usage\r\nThe framework is easy to use. Just add the ```css/style.css``` file to your project directory and You're good to go.\r\n1. Define ```.container``` class to you parent element for\r\n2. Define ```.row``` class to your grid container\r\n3. Define ```.col-*``` for different column sizes. Checkout [feature](#features) for different available options.\r\n\r\nTo tweak the framework, please checkout [installation](#installation)\r\n\r\n# Features\r\n\r\n## Base Layout\r\n### Basic CSS Reset\r\n- removes padding,margin etc. \r\n- set the default width to 62.5% to build a rem based layout\r\n- container width - 144rem (1440px)\r\n\r\n### Responsive 12-column grid\r\n- You can mix and match the 12 provided columns to achieve the desired layout\r\n```col-1``` , ```col-2``` ........ ```col-12```\r\n- 5 different sizes are available to accommodate different display sizes\r\n  - x-small -\u003e Usage: ```col-xs-1``` ... ```col-xs-12```\r\n  - small -\u003e Usage: ```col-sm-1``` ... ```col-sm-12```\r\n  - medium -\u003e Usage: ```col-md-1``` ... ```col-md-12```\r\n  - large -\u003e Usage: ```col-lg-1``` ... ```col-lg-12```\r\n  - x-large -\u003e Usage: ```col-xl-1``` ... ```col-xl-12```\r\n\r\n### Colors\r\nDefault colors - ```default```, ```primary```, ```secondary```, ```success```, ```info```,```warning```, ```danger```, ```muted```, ```white```, ```black```\r\n1. Text colors - Just append the ***default color*** to the text class to get the desired color. Ex: ```text-primary```\r\n- Light, dark, lighter and darker versions are also available. Ex: ```text-default-light```, ```text-default-lighter```, ```text-default-dark```, ```text-default-darker```\r\n2. Background colors - Just append the ***default color*** to the bg class to get the desired color. Ex: ```bg-primary```\r\n\r\n### Typography\r\n1. Add base styles to headers. ```h1``` ... ```h6```, ```p```, ```subtitle```, ```lead```, ```small```\r\n2. Font weights: ```font-weight-thin``` , ```font-weight-light```, ```font-weight-regular```, ```font-weight-bold```, ```font-weight-black```\r\n\r\n## Components\r\n\r\n### Buttons\r\nNeed to add ```btn``` class first.\r\n1. Primary button - ```btn--primary```\r\n2. Secondary button - ```btn--secondary```\r\n3. Underlined button - ```btn--underlined```\r\n\r\n### Card - ```card```\r\n\r\n### hr\r\n```hr--light``` , ```hr--blue```, ```hr--primary```\r\n\r\n## Utility Classes\r\n\r\n### Display classes - Defines all the classes for display, positioning etc\r\n```d-flex``` , ```flex-column```, ```flex-row```, ```justify-content-start``` etc.\r\nPlease look at ```utls/_display.scss``` to know more\r\n\r\n### Margins\r\n- There are 12 margin sizes available for each side. Each size equals ```rem``\r\n- Usage\r\n  - For margin left - ```ml-1``` ... ```ml-12```\r\n  - For margin right - ```mr-1``` ... ```mr-12```\r\n  - For margin top - ```mt-1``` ... ```mt-12```\r\n  - For margin bottom - ```mb-1``` ... ```mb-12```\r\n  - For margin top and bottom, there is a helper: ```my-1```...```my-12```\r\n  - For margin left and right, there is a helper: ```mx-1```...```mx-12```\r\n\r\n### Padding\r\n- There are 12 padding sizes available for each side. Each size equals ```rem``\r\n- Usage\r\n  - For padding left - ```pl-1``` ... ```pl-12```\r\n  - For padding right - ```pr-1``` ... ```pr-12```\r\n  - For padding top - ```pt-1``` ... ```pt-12```\r\n  - For padding bottom - ```pb-1``` ... ```pb-12```\r\n  - For padding top and bottom, there is a helper: ```py-1```...```py-12```\r\n  - For padding left and right, there is a helper: ```px-1```...```px-12``` \r\n\r\n## Installation\r\n\r\n1. Clone the project to your local directory\r\n```\r\ngit clone https://github.com/KaushikShivam/bootgrid.git\r\n```\r\n\r\n2. The project uses NPM for managing dependencies. Run npm install to install all the required dependencies\r\n```\r\nnpm install\r\n```\r\n3. Run the watch script to view live changes to your CSS\r\n```\r\nnpm run watch:sass\r\n```\r\n4. Open the index.html file in your browser to view the website in all its glory (Live-server is recommended to view live changes automatically)\r\n\r\n\r\n## Scripts\r\nThe project uses [AutoPrefixer](https://github.com/postcss/autoprefixer), [Node-sass](https://github.com/sass/node-sass), [npm-run-all](https://www.npmjs.com/package/npm-run-all) etc to build the following scripts:\r\n\r\n### Watch live changes in development\r\n1. Watch live changes to the sass\r\n```\r\n\"watch:sass\": \"node-sass sass/main.scss css/style.css -w\"\r\n```\r\nRun ```npm run watch:sass``` to run the script\r\n\r\n### Build script for production\r\n\r\n1. Compile sass files\r\n```\r\n\"compile:sass\": \"node-sass sass/main.scss css/style.comp.css\"\r\n```\r\n\r\n2. Add prefixes automatically to the modern CSS rules (supports last 10 years - Can be configured)\r\n```\r\n\"prefix:css\": \"postcss --use autoprefixer -b 'last 10 versions' css/style.comp.css -o css/style.prefix.css\"\r\n```\r\n\r\n3. Adds compression\r\n```\r\n\"compress:css\": \"node-sass css/style.prefix.css css/style.css --output-style compressed\"\r\n```\r\n4. Final Build process\r\n```\r\n\"build:css\": \"npm-run-all compile:sass prefix:css compress:css\"\r\n```\r\n\r\nRun ```npm run build:css``` to run the build script\r\n\r\n## ToDos\r\n- [ ] Inputs\r\n- [x] Button\r\n- [x] Margin utils\r\n- [x] padding utils\r\n- [ ] navbar\r\n- [ ] pagination\r\n\r\n## Contact\r\n\r\nYou can contact me at:\r\n\r\n- [Portfolio](https://www.shivamkaushik.com)\r\n- [Email](mailto:shivamkaushikofficial@gmail.com)\r\n- [Linkedin](https://www.linkedin.com/in/kshivamdev/)\r\n- [Twitter](https://twitter.com/kShivamDev)\r\n- [Medium](https://medium.com/@shivamkaushikofficial)\r\n- [Angellist](https://angel.co/kshivamdev)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaushikshivam%2Fbootgrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkaushikshivam%2Fbootgrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkaushikshivam%2Fbootgrid/lists"}