https://github.com/aadityataparia/minimal-grid
Simple and highly customizable grid for building column based responsive websites
https://github.com/aadityataparia/minimal-grid
css-grid grid grid-framework responsive-grid responsive-web-design
Last synced: 3 months ago
JSON representation
Simple and highly customizable grid for building column based responsive websites
- Host: GitHub
- URL: https://github.com/aadityataparia/minimal-grid
- Owner: aadityataparia
- Created: 2018-01-25T04:59:39.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-01-29T03:59:54.000Z (about 7 years ago)
- Last Synced: 2025-02-13T12:54:14.906Z (about 1 year ago)
- Topics: css-grid, grid, grid-framework, responsive-grid, responsive-web-design
- Language: HTML
- Homepage: https://aadityataparia.github.io/Minimal-Grid/
- Size: 75.2 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Minimal-Grid
Simple grid for building column based responsive websites
Includes sass, css and minified css. (0.5KB minified + gzipped)
Examples at https://aadityataparia.github.io/Minimal-Grid/
## How to use css (with default values)
- Simple grid is based on 12 column based design, i.e. \*-1 means 100/12% width, \*-2 means 100*2/12% and so on..
- To use grid, add `grid` class to parent element and s-\*, m-\* or l-\* classes to children elements.
- There are three types of grid classes
- s (used on small devices with device width < 480px)
- m (used on medium devices with device width < 960px and > 480px)
- l (used on large devices with device width > 960px)
- mar-\* are margin classes and applies
- mar-0: 0px margin
- mar-s: small margin (8px)
- mar-m: medium margin (16px)
- mar-l: large margin (24px)
- pad-\* are padding classes and applies
- pad-0: 0px padding
- pad-s: small padding (8px)
- pad-m: medium padding (16px)
- pad-l: large padding (24px)
- b-1s is border class: applies `1px solid black` border
- hide-on-s class applies `display: none` when s classes are applied
- hide-on-m class applies `display: none` when m classes are applied
- hide-on-l class applies `display: none` when l classes are applied
- f-right class applies `float: right` on element
- f-left class applies `float: left` on element
## How to use sass
sass file is highly configurable, most of the things are based on variables
### Variables
| Variable | Description | Default Value |
| ------------- | ------------- | ------------ |
| $small-break | Breakpoint for small classes (s-\*) | 480px |
| $medium-break | Breakpoint for medium classes (m-\*) | 960px |
| $border-color | Border color for b-1s class | black |
| $grid-size | Size of grid | 12 |
| $small-prefix | Prefix for small classes | s |
| $medium-prefix | Prefix for medium classes | m |
| $large-prefix | Prefix for large classes | l |
| $margin-prefix | Prefix for margin classes | mar |
| $padding-prefix | Prefix for padding classes | pad |
| $gaps | Map for margin and padding classes with suffix and values | (0: 0, s: 8px, m: 16px, l: 24px) |