# lite-breakpoints

> Lightweight library that simplifies working with media queries to create adaptability on the site.

Latest version **0.0.5** (published 2024-04-15) · ISC license · 0 weekly downloads

## Install

```sh
npm install lite-breakpoints
pnpm add lite-breakpoints
yarn add lite-breakpoints
bun add lite-breakpoints
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.5 |
| Published | 2024-04-15 |
| First published | 2024-04-15 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 2.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | efgor |
| Maintainers | efgor |
| Keywords | scss, variables, mixins, adaptive, breakpoints, adaptability |

## Links

- npm: https://www.npmjs.com/package/lite-breakpoints
- Repository: https://github.com/blackpiest/lite-breakpoints
- Homepage: https://github.com/blackpiest/lite-breakpoints#readme
- Issues: https://github.com/blackpiest/lite-breakpoints/issues
- npm.io page: https://npm.io/package/lite-breakpoints

## Dependencies (1)

- [sass](https://npm.io/package/sass.md) ^1.75.0

## Recent versions

- 0.0.5 (latest) — 2024-04-15

## README

# lite-breakpoints
This is a very small and lightweight library that simplifies working with media queries to create adaptability on the site. 

## Install
* To work with this library, you will need to install **sass** in your project (obviously):
	```sh
	npm install sass -D
	```
* To install the library, run this command:
	```sh
	npm install lite-breakpoints -D
	```

## Usage
**WARNING**: You need to initialize the global variable **$lite-variables** in order to set breakpoints for your project. After that, you need to import the library itself into a scss file.
```scss
$lite-breakpoints:(xs: 0,
  sm: 375px,
  md: 560px,
  lg: 900px,
  xl: 1200px,
  xxl: 1400px);
  
@import "~lite-breakpoints";
```
That's all! Now you can use convenient mixins for adaptivity in your projects. Good luck!
```scss
.text {
  @include breakpoint-up(lg) {
    color: red;
  }
}
.container {
  @include breakpoint-down(xl) {
    width: 200px;
  }
}
```

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