# gugus-media-queries

> A simple SCSS Media Query Library based on the Bootstrap sizing widths

Latest version **1.1.2** (published 2019-10-02) · ISC license · 0 weekly downloads

## Install

```sh
npm install gugus-media-queries
pnpm add gugus-media-queries
yarn add gugus-media-queries
bun add gugus-media-queries
```

## 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 | 1.1.2 |
| Published | 2019-10-02 |
| First published | 2018-02-06 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Kaspar Allenbach |
| Maintainers | kspr |
| Keywords | media, query, scss, sizes, css, responsive, webdesign, simple, mobile, bootstrap, simple, library |

## Links

- npm: https://www.npmjs.com/package/gugus-media-queries
- Repository: https://kaspar-allenbach@github.com/kaspar-allenbach/gugus-media-queries
- Homepage: https://github.com/kaspar-allenbach/gugus-media-queries#readme
- Issues: https://github.com/kaspar-allenbach/gugus-media-queries/issues
- npm.io page: https://npm.io/package/gugus-media-queries

## Alternatives

- [@sveltejs/kit](https://npm.io/package/@sveltejs/kit.md) — 2.2M weekly downloads
- [@tangle-network/brand](https://npm.io/package/@tangle-network/brand.md) — 10.0K weekly downloads
- [seneca](https://npm.io/package/seneca.md) — 7.4K weekly downloads
- [@bsb/base](https://npm.io/package/@bsb/base.md) — 7.2K weekly downloads
- [@modern-js/plugin-swc](https://npm.io/package/@modern-js/plugin-swc.md) — 3.4K weekly downloads

## Recent versions

- 1.1.2 (latest) — 2019-10-02
- 1.1.1 — 2018-02-26
- 1.1.0 — 2018-02-21
- 1.0.7 — 2018-02-21
- 1.0.6 — 2018-02-21
- 1.0.5 — 2018-02-21
- 1.0.3 — 2018-02-13
- 1.0.2 — 2018-02-06
- 1.0.1 — 2018-02-06
- 1.0.0 — 2018-02-06

## README

# Gugus Media-Queries
A simple Media Query Library for Sass to go. (Gugus: Swiss German for «peeck a boo»)

These queries are an adaption of [David Walshes Media Query Mixins](https://davidwalsh.name/write-media-queries-sass)

Import ins SCSS with: `@import "../../node_modules/gugus-media-queries/gugus-media-queries";`

There are Size Variables to easily change the mixins. These Sizes are based on [Bootstrap 4](https://getbootstrap.com/docs/4.0/layout/grid/#grid-options)

| Size           | px      | Example Selector      | Example Selector (downwards) |
| -------------- |:-------:| ---------------------:| ----------------------------:|
| Extra small    | ≥320px  | `@include xsUp { … }` | `@include xsDown { … }`      |
| Small          | ≥576px  | `@include smUp { … }` | `@include smDown { … }`      |
| Medium         | ≥768px  | `@include mdUp { … }` | `@include mdDown { … }`      |
| Large          | ≥992px  | `@include lgUp { … }` | `@include lgDown { … }`      |
| Extra large    | ≥1200px | `@include xlUp { … }` | `@include XlDown { … }`      |


# Example of usage

#### foo.scss
```
@include smUp {
  body {
    background: red;
  }
};
```
#### Compiles to
```
@media (min-width: 576px) {
  body {
    background: red;
    }
};
```

# Visibility Classes
There are visibility Extends as well:
```
.hiddenLgDown { @include smDown { display: none; } }
```
This would hide an element on Lg size and below.


## Extend, Mixin, HTML
You can now add Visibility Classes as a `extend`, as a `Mixin` or as a class directly in your `HTML`:

#### As a Extend:

```
.yourThing { @extend %hiddenSmDown; }
```

#### As a Mixin:
```
.yourThing { @include hiddenSmDown; }
```

#### Or directely in HTML:

```
<li class="hiddenSmUp">Gugus Dada</li>
```

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