# baukasten-grid

> Just another Grid System

Latest version **4.0.3** (published 2020-05-06) · 0 weekly downloads

## Install

```sh
npm install baukasten-grid
pnpm add baukasten-grid
yarn add baukasten-grid
bun add baukasten-grid
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.0.3 |
| Published | 2020-05-06 |
| First published | 2018-01-28 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=10.0.0 |
| Dependencies | 1 |
| Unpacked size | 7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Maintainers | davidhellmann |

## Links

- npm: https://www.npmjs.com/package/baukasten-grid
- Repository: https://github.com/davidhellmann/baukasten-grid
- Homepage: https://github.com/davidhellmann/baukasten-grid#readme
- Issues: https://github.com/davidhellmann/baukasten-grid/issues
- npm.io page: https://npm.io/package/baukasten-grid

## Dependencies (1)

- [include-media](https://npm.io/package/include-media.md) ^1.4.9

## Recent versions

- 4.0.3 (latest) — 2020-05-06
- 4.0.1 — 2020-03-25
- 4.0.0 — 2020-03-24
- 3.0.11 — 2019-11-15
- 3.0.10 — 2019-11-15
- 3.0.9 — 2019-11-15
- 3.0.8 — 2019-11-15
- 3.0.7 — 2019-11-15
- 3.0.6 — 2019-11-12
- 3.0.5 — 2019-11-11
- 3.0.4 — 2019-11-11
- 3.0.3 — 2019-11-11
- 3.0.2 — 2019-11-06
- 3.0.1 — 2019-11-06
- 3.0.0 — 2019-11-06
- … 52 more at https://npm.io/package/baukasten-grid/versions

## README

![Logo of the project](./baukasten.png)

```
INFO --------------------------------------------------------------

We removed CSS Grid!

-----------------------------------------------------------INFO END
```

# Baukasten Grid
## Table of content
* [Intro](#intro)
* [Install Baukasten Grid](#install-baukasten-grid)
* [Basic usage](#basic-usage)
* [Advanced usage](#advanced-usage)
* [Include Media Support](#include-media-support)

---

## Intro
**Oh wait, another grid system? Yes!**
And there are a lot classes they are coming with this grid.

**Utility First Grid**

* [Classes](classes.md)
* [Mixins](mixins.md)
* [Demo](https://davidhellmann.github.io/baukasten-grid)

---

## Install Baukasten Grid
```
// Nostalgic
npm i baukasten-grid

// Hipster
yarn add baukasten-grid
```

---

## Basic usage
Open your main CSS file and this
```
// Nostalgic
@import '../../../node_modules/baukasten-grid/scss/baukasten-grid';

// Hipster (Webpack)
@import '~baukasten-grid/scss/baukasten-grid';
```

---

## Advanced usage
Your project is so special? No problem!
You can overwrite the default settings map with your own settings.
Add this to your main CSS file before you import `baukasten-grid`
```
// First: you have to add the Map
$bk-grid-settings-custom: (
  // Units are for Paddings and Margins. All Paddings an Margins are Fluid.
  // That means that on the smallest breakpoint the Padding on each col side
  // is: gutter * gutter-min-factor (8px * 1) and on the biggest breakpoint it
  // is: gutter * gutter-max-factor (8px * 2)
  // For Margins top it is the same with the Vertical factors.
  units: (
    gutter: 8px,
    gutter-min-factor: 1,
    gutter-max-factor: 2,
    gutter-min-vertical-factor: 1,
    gutter-max-vertical-factor: 2
  ),

  // Breakpoints must have at least a "min" and a "max". The other Breakpoints as u like
  // We use all the time "min-width".
  // Cols are how many cols can have a row on that specific breakpoint.
  breakpoints: (
    min: (from: 320px, cols: 6, create-classes: true),
    s: (from: 600px, cols: 12, create-classes: true),
    m: (from: 800px, cols: 12, create-classes: true),
    l: (from: 1200px, cols: 24, create-classes: true),
    max: (from: 1600px, cols: 24, create-classes: true)
  )
);
```

---

## Include Media Support
We love to use the Include Media Mixin and we support it.
How? Simple, we map the breakpoints from our settings to the `$breakpoints` map.
Just do that in your `app.scss`:
```
// Imports
// Important to include "Include Media" at this point
// Cause we set the map our Breakpoints to their map $breakpoints
@import '~include-media/dist/include-media';

// Settings
$bk-grid-settings-custom: (
  …
  your settings
  …
);

// Include the grid
@import '~baukasten-grid/scss/baukasten-grid';
```

---
_Source: https://npm.io/package/baukasten-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._