@littlemissrobot/sass-mixins - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
   "name": "@littlemissrobot/sass-mixins",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "Little Miss Robot sass mixins library that helps execute reusable and complex tasks",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # Little Miss Robot - Sass mixins
 
-Package not yet ready... Consider this a test package
+> This repository contains SASS mixins that we, at Little Miss Robot, like to
+> use to make our wonderful lives in the world of SASS easier and more
+> managable.
 
-README.md is coming!
+## Info
+
+This package contains no styling but simply provides a couple of mixins that
+execute a simple task and provide functionality based on certain variables.
+
+## Install
+```sh
+$ npm install --save-dev @littlemissrobot/sass-mixins
+```
+
+## Usage
+
+1. Import the library from the node_modules folder.
+
+```scss
+@import "~@littlemissrobot/sass-mixins/lib/mixins";
+```
+
+2. That's it! The mixins that are present within this file are now available
+to you!
+
+## Mixins - Breakpoints
+
+### respond-at($min-width)
+
+> Apply styling to every element above the given minimum width. This mixin can
+> wrap CSS selectors with their respective properties or wrap properties within
+> selectors.
+
+Parameters:
+* **$min-width**: minimum width till the media query is applied to
+
+```scss
+div {
+	margin: 1rem;
+
+	@include respond-at(720px) {
+		margin: 3rem;
+	}
+}
+
+@include respond-at(720px) {
+
+	div {
+		margin: 3rem;
+	}
+}
+```
+
+### respond-to($min-width)
+
+> Apply styling to every element below the given maximum width. This mixin can
+> wrap CSS selectors with their respective properties or wrap properties within
+> selectors.
+
+Parameters:
+* **$max-width**: maximum width till the media query is applied to
+
+```scss
+div {
+	margin: 1rem;
+
+	@include respond-to(720px) {
+		margin: 3rem;
+	}
+}
+
+@include respond-to(720px) {
+
+	div {
+		margin: 3rem;
+	}
+}
+```
+
+### respond-between($min-width)
+
+> Apply styling to every element between a minimum and maximum width. This mixin
+> can wrap CSS selectors with their respective properties or wrap properties
+> within selectors.
+
+Parameters:
+* **$min-width**: minimum width till the media query is applied to
+* **$max-width**: maximum width till the media query is applied to
+
+```scss
+div {
+	margin: 1rem;
+
+	@include respond-between(720px, 960px) {
+		margin: 3rem;
+	}
+}
+
+@include respond-between(720px, 960px) {
+
+	div {
+		margin: 3rem;
+	}
+}
+```
+
+## Mixins - Fonts
+
+### get-font($name, $url, $weight: normal, $style: normal)
+
+> Load a font file. Every version of the font should have the same name.
+
+Parameters:
+* **$name**: a name given to the font
+* **$url**: location of the font file
+* **$weight**: the weight (100, 300, 400, ...) the font file is based on
+* **$style**: the style (italic, normal, ...) the font file is based on
+
+```scss
+@include get-font("Roboto", "/fonts/roboto/roboto", 300, normal);
+```
+
+## Mixins - Typography
+
+### set-typo($group-name: "paragraph", $style-name: "regular")
+
+> This mixin assume you have defined $font-styles and $breakpoints map. Apply a
+> font style defined within the $font-styles map. This also makes use of
+> the $breakpoints variable to change the style based off viewport.
+
+Parameters:
+* **$group-name**: name of the group the style is defined within
+* **$style-name**: name of the style defined within the group
+
+```scss
+$breakpoints: (
+	viewport-9: (
+		width: 960px
+	),
+	viewport-12: (
+		width: 1200px
+	)
+);
+
+$font-styles: (
+	paragraph: (
+		base: (
+			font-family: "Roboto",
+			font-size: 1.6rem,
+			viewport-9: (
+				font-size: 2rem
+			)
+		),
+		small: (
+			font-family: "Roboto",
+			font-size: 1.2rem,
+			viewport-12: (
+				font-size: 1.4rem
+			)
+		)
+	),
+);
+
+p {
+	@include set-typo("paragraph", "base");
+}
+
+small {
+	@include set-typo("paragraph", "small");
+}
+```
+
+## Mixins - Responsive
+
+### responsive-prop($props, $responsive, $min, $max: false, $fallback: false)
+
+> Create CSS properties that are responsive by defining a minimum and maximum
+> value. For example: responsive font-sizes.
+
+* **$props**: the properties to make responsive, each property is separated by a
+space
+* **$responsive**: the value that should scale with the viewport width, expressed
+in vw units
+* **$min**: the minimum value, the $responsive does not go lower than this
+* **$max**: the maximum value, the $responsive does not go higher than this
+* **$fallback**: A fallback when the vw unit is not supported by the browser
+
+```scss
+p {
+	@include responsive-prop("font-size", 2vw, 2rem, 4rem);
+}
+
+p {
+	@include responsive-prop("font-size" "line-height", 2vw, 2rem, 4rem);
+}
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13211

increased by46.17%

Number of lines in readme file

199

increased by3216.67%

Worsened metrics

Number of package files

11

decreased by-8.33%

No dependency changes