diff --git a/README.md b/README.md index 989086e..893cbda 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,27 @@ # Breakpoints +**WIP** Helper library for easily using breakpoints in SASS -## Example Usage +## Variables Available + +Below are the default variables, as this package uses @at-rules/breakpoints those variables will also be available + +```scss +$breakpoints: ( + "mobile": 320px, + "phablet": 425px, + "tablet": 768px, + "desktop": 1024px, +) !default; +``` + +## Usage + +You can use all of the above breakpoints mixed with a term (up, down and only) +this will provide you with different min - max breakpoints on compile. + +### Example One ```scss @use "@at-rules/breakpoints/src/index" as *; @@ -14,8 +33,6 @@ Helper library for easily using breakpoints in SASS } ``` -### Output - ```css @media screen and (max-width: 576px) { .body { @@ -23,3 +40,43 @@ Helper library for easily using breakpoints in SASS } } ``` + +### Example two + +```scss +@use "@at-rules/breakpoints/src/index" as *; + +.body { + @include breakpoint(tablet down) { + color: red; + } +} +``` + +```css +@media screen and (max-width: 768px) { + .body { + color: red; + } +} +``` + +### Example three + +```scss +@use "@at-rules/breakpoints/src/index" as *; + +.body { + @include breakpoint(phablet only) { + color: red; + } +} +``` + +```css +@media screen and (min-width: 425px) and (max-width: 768px) { + .body { + color: red; + } +} +``` diff --git a/package.json b/package.json index d46879e..9a89cce 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@at-rules/breakpoints", - "version": "1.0.1", + "version": "1.0.2", "description": "Helper library for easily using breakpoints in SASS", "repository": { "type": "git",