https://github.com/pldg/beam
Lightweight CSS grid framework based on inline-block
https://github.com/pldg/beam
css css-framework framework html inline-block npm npm-package
Last synced: about 2 months ago
JSON representation
Lightweight CSS grid framework based on inline-block
- Host: GitHub
- URL: https://github.com/pldg/beam
- Owner: pldg
- License: mit
- Created: 2017-09-15T18:20:23.000Z (over 8 years ago)
- Default Branch: main
- Last Pushed: 2022-09-07T17:37:42.000Z (over 3 years ago)
- Last Synced: 2025-11-06T01:11:44.371Z (5 months ago)
- Topics: css, css-framework, framework, html, inline-block, npm, npm-package
- Language: CSS
- Homepage: https://pldg.github.io/beam/
- Size: 31.3 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Beam
A responsive css grid framework based on [inline-block](https://www.w3schools.com/css/css_inline-block.asp), with 12 columns and utility classes, customizable and compatible with Internet Explorer 8 and newer versions.
## Install
### Locally
Download [*beam.min.css*](./beam.min.css) (or [*beam-lite.min.css*](./beam-lite.min.css)) and link it before your main css:
```html
```
### CDN
Link [*beam.min.css*](https://cdn.jsdelivr.net/gh/pldg/beam/beam.min.css) (or [*beam-lite.min.css*](https://cdn.jsdelivr.net/gh/pldg/beam/beam-lite.min.css)) before your main css:
```html
```
### NPM
Install with:
```txt
npm install --save beam-css-grid
```
And [import css](https://github.com/pldg/learn-webpack/tree/master/load-css) in your project using a javascript bundler.
## Quick Start
```html
```
## Documentation
Read [documentation](https://pldg.github.io/beam/) online (served from gh-pages branch).
## Customization
Read comments inside [*beam.css*](./beam.css), add/remove code blocks as needed.
## Notes
In [*beam-lite.css*](beam-lite.css) (only 4kb minified) utility classes are present but they can't be applied to specific breakpoint, with the exception of `.delete` (read online [documentation](https://pldg.github.io/beam/#utility-classes) for more info). Besides that, *beam-lite.css* is identical to *beam.css*. You can easily customize both *beam-lite.css* and *beam.css* (read the comments inside those files) by adding and removing the code blocks you need.
Inspired by [Bootstrap](https://github.com/twbs/bootstrap) and [Toast](https://github.com/daneden/Toast).