Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexander-schranz/scss-grid
Simple dynamic grid written in scss
https://github.com/alexander-schranz/scss-grid
Last synced: 7 days ago
JSON representation
Simple dynamic grid written in scss
- Host: GitHub
- URL: https://github.com/alexander-schranz/scss-grid
- Owner: alexander-schranz
- License: mit
- Created: 2014-12-28T18:58:18.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2015-01-17T00:17:29.000Z (almost 10 years ago)
- Last Synced: 2024-10-27T05:02:16.063Z (about 2 months ago)
- Language: CSS
- Size: 422 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Dynamic CSS Grid Generator
Simple to modified with scss/sass variables. Used to add dynamic breakpoints to your grid system.
# Features
- Multiple Grid Types: Float, Inline-Block
- Dynamic Grid Steps (12, 18, 24, ...)
- No Breakpoint limits
## How to use
#### Setup
Copy `src/grid-variables.scss`, `src/grid.scss` and `src/grid-ie.scss` into your project and edit the variables for your own use:
``` scss
$grid_defaultPadding: 2%;
$grid_defaultFontSize: $defaultFontSize; // needed for inlineBlock Grid
$grid_size: 12; // 12, 18, 24, ...
$grid_type: 'float'; // float, inlineBlock
$grid_breakPoints: (
(
'prefix': 'tab',
'maxWidth': '1023px',
'padding': $grid_defaultPadding,
'fontSize': $grid_defaultFontSize // needed for inlineBlock Grid
),
(
'prefix': 'pal',
'maxWidth': '679px',
'padding': $grid_defaultPadding,
'fontSize': $grid_defaultFontSize // needed for inlineBlock Grid
),
(
'prefix': 'mob',
'maxWidth': '479px',
'padding': $grid_defaultPadding,
'fontSize': $grid_defaultFontSize // needed for inlineBlock Grid
)
);
```
#### Using
Use the grid in your HTML:
``` html
Element 1
Element 2
Element 3
Element 4
```
# Changelog
## 0.1
- Create dynamic grid system generator