{"id":15621963,"url":"https://github.com/fredericrous/bootstrap-grid-less","last_synced_at":"2026-01-07T20:37:20.254Z","repository":{"id":44062672,"uuid":"214148244","full_name":"fredericrous/bootstrap-grid-less","owner":"fredericrous","description":"A LESS port of Bootstrap 4.3.1 grid system. No Javascript","archived":false,"fork":false,"pushed_at":"2022-12-10T05:10:31.000Z","size":124,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-04T16:49:55.569Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/fredericrous.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-10-10T10:00:32.000Z","updated_at":"2019-10-10T12:31:50.000Z","dependencies_parsed_at":"2023-01-25T20:55:22.905Z","dependency_job_id":null,"html_url":"https://github.com/fredericrous/bootstrap-grid-less","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/fredericrous%2Fbootstrap-grid-less","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredericrous%2Fbootstrap-grid-less/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredericrous%2Fbootstrap-grid-less/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fredericrous%2Fbootstrap-grid-less/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fredericrous","download_url":"https://codeload.github.com/fredericrous/bootstrap-grid-less/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246207491,"owners_count":20740723,"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":[],"created_at":"2024-10-03T09:52:24.432Z","updated_at":"2026-01-07T20:37:20.226Z","avatar_url":"https://github.com/fredericrous.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"A LESS port of Bootstrap 4.3.1 grid system. No Javascript.\n\n# Usage\n\nCompile the grid yourself with\n\n```\nnpm i\nnpm run dist\n```\n\nIt generates two files: `grid.css` and `dist/grid.css`.\nThe second one should be used for production.\n\nImport the file `dist/grid.css` to your HTML5 page as a simple stylesheet\n\n```\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"dist/grid.css\"\u003e\n```\n\nuse it with the same syntax as bootstrap grid.\n\n# Demo\n\nHere is the content of `demo.html` file:\n\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n    \u003chead\u003e\n        \u003ctitle\u003edemo\u003c/title\u003e\n        \u003clink rel=\"stylesheet\" type=\"text/css\" href=\"grid.css\"\u003e\n    \u003c/head\u003e\n    \u003cbody\u003e\n        \u003cdiv class=\"container\"\u003e\n            \u003cdiv class=\"row\"\u003e\n                \u003cdiv class=\"col\" style=\"background: aqua;\"\u003e1\u003c/div\u003e\n                \u003cdiv class=\"col\" style=\"background: coral;\"\u003e2\u003c/div\u003e\n                \u003cdiv class=\"col\" style=\"background: aqua;\"\u003e3\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"row\"\u003e\n                \u003cdiv class=\"col\" style=\"background: coral;\"\u003e1\u003c/div\u003e\n                \u003cdiv class=\"col-6\" style=\"background: aqua;\"\u003e2\u003c/div\u003e\n                \u003cdiv class=\"col\" style=\"background: coral;\"\u003e3\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n        \u003cdiv class=\"container\"\u003e\n            \u003cdiv class=\"row\"\u003e\n                \u003cdiv class=\"col-sm-8\"\u003ecol-sm-8\u003c/div\u003e\n                \u003cdiv class=\"col-sm-4\"\u003ecol-sm-4\u003c/div\u003e\n            \u003c/div\u003e\n            \u003cdiv class=\"row\"\u003e\n                \u003cdiv class=\"col-sm\"\u003ecol-sm\u003c/div\u003e\n                \u003cdiv class=\"col-sm\"\u003ecol-sm\u003c/div\u003e\n                \u003cdiv class=\"col-sm\"\u003ecol-sm\u003c/div\u003e\n            \u003c/div\u003e\n        \u003c/div\u003e\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\n# You should know\n\nIn `grid.less` I changed the values of the grid to match SAP Fiori 3 grid specifications.\nThis is a 16 columns grid and its breakpoints are different than bootstrap.\n\n- \u003chttps://getbootstrap.com/docs/4.1/layout/grid/#customizing-the-grid\u003e\n\n⚠️ I did port only the essential stuff. There might be some features you might want to implement yourself\n\n# Final thought\n\nThis was a challenge I gave to myself, I did this over a weekend and for external reasons never merged it on the project I work on. This was fun to implement though.\n\nThis might be of use for people who have a large less legacy and won't switch to sass.\n\nFinally, if you have the choice to use sass on your project, you can extend the grid easily, have a look at \u003chttps://getbootstrap.com/docs/4.1/getting-started/theming/\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffredericrous%2Fbootstrap-grid-less","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffredericrous%2Fbootstrap-grid-less","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffredericrous%2Fbootstrap-grid-less/lists"}