https://github.com/pixelscript-io/the-grid
A lightweight 12x12 customizable grid system built with CSS Grid and LESS.
https://github.com/pixelscript-io/the-grid
css css-framework css-grid less lesscss lightweight thegrid
Last synced: 4 months ago
JSON representation
A lightweight 12x12 customizable grid system built with CSS Grid and LESS.
- Host: GitHub
- URL: https://github.com/pixelscript-io/the-grid
- Owner: pixelscript-io
- License: mit
- Created: 2017-07-04T18:38:58.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-07-04T20:36:06.000Z (almost 8 years ago)
- Last Synced: 2025-01-19T16:09:56.432Z (5 months ago)
- Topics: css, css-framework, css-grid, less, lesscss, lightweight, thegrid
- Language: CSS
- Homepage:
- Size: 52.7 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# The Grid
A 12x12 customizable grid built with CSS Grid and LESS.
## Installation
Simply just clone this repo to get started! View [docs/index.html](https://joeberthelot88.github.io/the-grid/) for a variety of different possibilities.
## Usage
1. Initialize the grid:
```html
```
2. Add your sections:
```html
```
3. Position your sections:
```html
```
**Note:** The order of your sections *do not matter*! This markup will appear exactly the same:
```html
```
4. Configure your grid settings in `config.less`. As of now the only configuration options are:
- Set column gap size.
- Set row gap size.
- Set grid width.
## The Classes
This is a 12x12 grid meaning there are 12 columns and 12 rows. There are **over 150 generated classes**. The classes are structured as follows:
```
(col or row)-(starting block)-(ending block)
```
Parameters:
```
[col]-[1-12]-[1-12]
[row]-[1-12]-[1-12]
```
Examples:
```
.col-1-12 (This section will start at column 1 and span all 12 columns)
.col-6-12 (This section will start at column 6 and span 6 additional columns)
.row-4-12 (This section will start at row 4 and span 8 additional rows)
.row-12-12 (This section will start at row 12 and only span 1 row)
```
**Note:** Sections cannot span backwards. For example, the following is not possible:
```
.col-12-6
.row-2-1
```
**Note:** You do not need to specify both .col and .row classes on a section. If two sequential sections span more than 12 blocks, the second section will automatically break onto the next row/column however specifying both is recommended.
## Helper Classes
#### Content Alignment
Aligning content is easy. The following classes will align your content vertically and horizontally, as you wish:
1. .content-center-v (Vertically center content)
2. .content-center-h (Horizontally center content)
3. .content-end-v (Vertically align content to bottom)
4. .content-end-h (Horizontally align content to right)
Example markup:
```html
This text is horizontally centered.
```
#### Nested Grids
Nesting grids is also extremely easy. Just add the `.grid` class to your section!
Example markup:
```html
```
#### Responsiveness
*Coming soon...*
#### Other Helper Classes
1. .fill-height - Sets the min-height of the grid to 100vh. This is an extremely easy way to get a sticky footer.
Example markup:
```html
This header is at the top of the viewport.
I span the remaining height of the leftover space.
I span the remaining height of the leftover space.
This footer as at the bottom of the viewport.
```
2. .fixed-width - Sets a fixed width to the grid.
3. .center-grid - Centers the grid on the page. This must be used with `.fixed-width`.
Example markup:
```html
This header is at the top of the viewport.
I span the remaining height of the leftover space.
I span the remaining height of the leftover space.
This footer as at the bottom of the viewport.
```
## Contributing
1. Fork it!
2. Create your new branch: `git checkout -b my-new-branch`
3. Commit your changes: `git commit -am 'Add some stuff'`
4. Push to the branch: `git push origin my-new-branch`
5. Submit a pull request :D
## Credits
Grid system built by Joe Berthelot.