Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/electerious/basicgrid
A Foundation-like grid system based on the flex display property.
https://github.com/electerious/basicgrid
columns css flexbox grid gutter row
Last synced: about 1 month ago
JSON representation
A Foundation-like grid system based on the flex display property.
- Host: GitHub
- URL: https://github.com/electerious/basicgrid
- Owner: electerious
- License: mit
- Created: 2015-11-05T13:11:19.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2022-10-01T13:58:51.000Z (about 2 years ago)
- Last Synced: 2024-11-10T09:34:50.718Z (about 1 month ago)
- Topics: columns, css, flexbox, grid, gutter, row
- Language: SCSS
- Homepage: https://basicgrid.electerious.com
- Size: 68.4 KB
- Stars: 56
- Watchers: 4
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# basicGrid
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=CYKBESW577YWE)
A Foundation-like grid system based on the `flex` display property.
## Contents
- [Demos](#demos)
- [Setup](#setup)
- [Usage](#usage)
- [Basics](#basics)
- [Sizes and Breakpoints](#sizes-and-breakpoints)
- [Horizontal Alignment](#horizontal-alignment)
- [Vertical Alignment](#vertical-alignment)
- [Direction](#direction)
- [Order](#order)
- [Offset](#offset)
- [Push and pull](#push-and-pull)
- [Show and hide](#show-and-hide)
- [Options](#options)
## Demos
| Name | Description | Link |
|:-----------|:------------|:------------|
| Default | Includes all features and most column variations. | [Try it on CodePen](https://codepen.io/electerious/pen/pjOvPZ) |
## Setup
We recommend installing basicGrid using [npm](https://npmjs.com) or [yarn](https://yarnpkg.com).
```sh
npm install basicgrid
```
```sh
yarn add basicgrid
```
Include the CSS files in the `head` tag …
```html
```
… or use basicGrid via [jsDelivr CDN](https://www.jsdelivr.com/package/npm/basicgrid):
```html
```
## Usage
### Basics
- basicGrid is mobile first. Smaller breakpoints will automatically apply on all larger sizes.
- The outermost row has a `max-width`.
- A nested row removes the left gutter of the first column and the right gutter of the last column inside the row.
- Classes are generated from the names and sizes in the `$sizes` map.
- You can fill a row with up to twelve columns. Columns without a specified size will fill an entire row.
- Each column has a gutter on the left and right side.
- Columns have the same height when not specified otherwise.
- Columns wrap when they don't fit into one row.
### Sizes and Breakpoints
Specify the widths of each column with `small-`, `medium-`, and `large-` or use `-auto` to fill the available space. Defaults to `small-12`.
```html
```
### Horizontal Alignment
`left-on-`, `center-on-` and `right-on-` change the horizontal alignment of all columns in a row. `around-on-` and `between-on-` allow you to distribute the columns. Defaults to `left-on-`.
```html
```
```html
```
### Vertical Alignment
`top-on-`, `middle-on-` and `bottom-on-` change the vertical alignment of all columns in a row. Defaults to `stretch-on-`, which gives each column the same height.
```html
```
### Direction
Define the direction columns are placed in a row using `ltr-on-` and `rtl-on-`. Defaults to `ltr-on-`.
```html
```
### Order
Reorder columns with `first-on-`, `last-on-` and `origin-on-`. Defaults to `origin-on-`, which keeps the order as specified in the HTML.
```html
```
### Offset
Use offset classes to move columns to the right.
```html
```
### Push and pull
Shift columns around between breakpoints using `-push-` and `-pull-`. Especially helpful if you want to modify the order of columns based on the size of the screen.
```html
```
### Show and hide
`show-on-` and `hide-on-` allow you to show and hide rows or individual columns.
```html
```
```html
```
## Options
Import `src/styles/main.scss` directly to customize the grid:
```scss
$basicGrid__columns: 12; // Number of columns
$basicGrid__width: 1280px; // Maximum width of a row
$basicGrid__outer: 0; // Gutter of the outermost row
$basicGrid__gutter: 1.8rem; // Gutter size between columns
// Column-Breakpoints
$basicGrid__sizes: (
'small': 0,
'medium': 640px,
'large': 1024px
);
@import 'src/styles/main';
```
Overwrite the SASS options with CSS variables to adjust the grid on the client:
```css
html {
--basicGrid-width: 1200px;
--basicGrid-outer: 0;
--basicGrid-gutter: 1.8rem;
}
```