# scss-mediaq

> A tiny package with some media queries mixins writen in scss for you to use easier and faster.

Latest version **1.0.19** (published 2020-07-23) · CC-BY-ND-1.0 license · 0 weekly downloads

## Install

```sh
npm install scss-mediaq
pnpm add scss-mediaq
yarn add scss-mediaq
bun add scss-mediaq
```

## 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.0.19 |
| Published | 2020-07-23 |
| First published | 2020-07-19 |
| Weekly downloads | 0 |
| License | CC-BY-ND-1.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 6.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Desiré M Carmona, @helleworld_ |
| Maintainers | helleworld_ |
| Keywords | scss, sass, responsive, mixins, ui, layout, mixin, design, front |

## Links

- npm: https://www.npmjs.com/package/scss-mediaq
- npm.io page: https://npm.io/package/scss-mediaq

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 1.0.19 (latest) — 2020-07-23
- 1.0.18 — 2020-07-23
- 1.0.17 — 2020-07-21
- 1.0.16 — 2020-07-20
- 1.0.15 — 2020-07-20
- 1.0.14 — 2020-07-20
- 1.0.13 — 2020-07-20
- 1.0.12 — 2020-07-20
- 1.0.11 — 2020-07-20
- 1.0.10 — 2020-07-20
- 1.0.9 — 2020-07-20
- 1.0.8 — 2020-07-20
- 1.0.6 — 2020-07-20
- 1.0.5 — 2020-07-19
- 1.0.4 — 2020-07-19
- … 3 more at https://npm.io/package/scss-mediaq/versions

## README

## Hello, internet! 👋

Thank you for downloading and/or being interested in scss-mediaq.

# This readme contains the following info:

### [What is this](#what-is-this) 💡
### [Installation](#installation) 🌱(with or without a js framework)
### [Usage and examples](#usage-and-examples) 📖
### [Sizes](#sizes) 💻
### [Set custom breakpoints](#set-custom-breakpoints) 🎨
### [Contact](#contact) 📩
### [License](#license) ©

___

# 📌What is this?

This is a **really tiny npm package** developed by [@helleworld_](https://twitter.com/helleworld_).

The point of this package was to avoid copying/pasting the same **responsive mediaqueries** I usually use in SCSS.

I created this npm package so I can just **import my responsive mediaqueries mixins in SCSS** into my projects easier and faster. These mixins cover the usual types of screens (mobile, tablet, laptop and PC).

💡 This package can be used **with the default breakpoints** or **your own breakpoints**.

# 📌Installation

### Without any js framework

This method is **only for those who aren't using any js framework such as Vue, Angular or React**.

I'm assuming you installed npm and Node in your machine.

1. **Install SASS/SCSS** in your computer/project. Globally if possible. Use `npm install -g sass`.

2. **Install this package** using `npm install scss-mediaq` in your command line, inside the root folder of your project.

3. In the **root folder of your project** or a specific folder for css, create a `main.scss` and `main.css` files.

4. In your `main.scss` file, **import the scss-mediaq mixins** with the following line: `@import "node_modules/scss-mediaq/index.scss";`.

5. Don't forget to add the following: `<link rel="stylesheet" href="main.css">` to your `index.html` file.

6. Finally, to **start translating your scss to css while you're working in your project**, open your console in your root folder or css folder, wherever the `main.css` and `main.scss` are located, and type `sass --watch main.scss main.css`.

7. Ready to go. Once you've finished your project or styles, you're free to delete the package. This was only meant to help you create your responsive layout easier and faster.

___

### With a js framework

This method is **only for those using a js framework such as Vue, Angular or React**.I'm assuming you installed npm and Node in your machine.

1. **Install SASS/SCSS** in your computer/project. Globally if possible. Use `npm install -g sass`.

2. **Install this package** using `npm install scss-mediaq` in your command line, inside the root folder of your project.

3. In js frameworks such as Vue, **you can choose to use a pre-processor when creating a new App**. If this is not the case for you, you must install the sass loader **inside your project folder** with the following command: `npm install node-sass -S`.

4. Import scss-mediaq mixins **into the scss file where you're creating your responsive structure**, with the following: `@import "node_modules/scss-mediaq/index.scss";`. Make sure the path is **correct** in your project.

5. If you're using the media queries mixins **in multiple files** you must import this package as `@import "node_modules/scss-mediaq/index.scss";` in every file to make it available.

6. Ready to go.

# 📌Usage and examples

The mixins are named as follow: **xs-screen** (mobile), **s-screen** (ipad-tablet), **m-screen** (large tablets, laptops), **l-screen** (computers). You must use them inside your styling with the **@include theMixinName { yourResponsiveStyles }** directive.

Usage example:

``` css
.example_css_class {
    background: red;
    @include xs-screen {
        background: blue;
    }
}
```

The above example uses the mixin 'xs-screen' to make the background of the .example_css_class element turn blue in mobile screens. That would result **in the following CSS when compiled**:

```css
.example_css_class {
  background: red;
}
@media only screen and (max-width: 480px) {
  .example_css_class {
    background: blue;
  }
}
```

# 📌Sizes

The mixins **default breakpoint** sizes:

```
xs-screen: 480px;
s-screen: 768px;
m-screen: 992px;
l-screen: 1200px;
```

These can be overrided by your custom breakpoints if needed.

# 📌Set custom breakpoints

You can set your custom breakpoints. 

**Individually**:

``` css
.example_css_class {
    background: red;
    @include xs-screen (222px) {
        background: blue;
    }
}
```

This will result **in the next CSS when compiled**:

```css
.example_css_class {
  background: red;
}
@media only screen and (max-width: 222px) {
  .example_css_class {
    background: blue;
  }
}
```

Or **globally**, creating a sass/scss variable for each resolution:

``` css
$my-breakpoint: 222px;

.example_css_class {
    background: red;
    @include xs-screen ($my-breakpoint) {
        background: blue;
    }
}
```

This will result **in the next CSS when compiled**:

```css
.example_css_class {
  background: red;
}
@media only screen and (max-width: 222px) {
  .example_css_class {
    background: blue;
  }
}
```

This example sets a mobile screen of 222px.

**Customize your own breakpoints if needed**, to get a better experiencie out of this package.

# 📌Contact

If you have any trouble or doubt, don't hesitate and contact me via [Twitter](https://twitter.com/helleworld_) or email to work@desiremcarmona.com .

Thank you 🙌

# 📌License

This project is under license CC-BY-ND-1.0:

This license **lets others reuse my work for any purpose, including commercially**; however it is **not permited to share** with others in adapted form **and credit must be given to me**.

TL;DR: Commercially friendly, mandatory credit, you can't modify or remix it.

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