https://github.com/fredericrous/bootstrap-grid-less
A LESS port of Bootstrap 4.3.1 grid system. No Javascript
https://github.com/fredericrous/bootstrap-grid-less
Last synced: 5 months ago
JSON representation
A LESS port of Bootstrap 4.3.1 grid system. No Javascript
- Host: GitHub
- URL: https://github.com/fredericrous/bootstrap-grid-less
- Owner: fredericrous
- Created: 2019-10-10T10:00:32.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T05:10:31.000Z (over 3 years ago)
- Last Synced: 2025-02-04T16:49:55.569Z (over 1 year ago)
- Language: CSS
- Size: 121 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
A LESS port of Bootstrap 4.3.1 grid system. No Javascript.
# Usage
Compile the grid yourself with
```
npm i
npm run dist
```
It generates two files: `grid.css` and `dist/grid.css`.
The second one should be used for production.
Import the file `dist/grid.css` to your HTML5 page as a simple stylesheet
```
```
use it with the same syntax as bootstrap grid.
# Demo
Here is the content of `demo.html` file:
```
demo
1
2
3
1
2
3
col-sm-8
col-sm-4
col-sm
col-sm
col-sm
```
# You should know
In `grid.less` I changed the values of the grid to match SAP Fiori 3 grid specifications.
This is a 16 columns grid and its breakpoints are different than bootstrap.
-
⚠️ I did port only the essential stuff. There might be some features you might want to implement yourself
# Final thought
This 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.
This might be of use for people who have a large less legacy and won't switch to sass.
Finally, if you have the choice to use sass on your project, you can extend the grid easily, have a look at