From 7eea4703407567d48c78fa82f249b7e4ff2e2d46 Mon Sep 17 00:00:00 2001 From: SlimDogs Date: Sun, 3 Dec 2017 13:38:38 +0000 Subject: [PATCH] fix(Updated examples): Updated examples in `README.md` --- README.md | 208 ++++++++++++++++----------- docs/features.md | 194 ++++++++++++++----------- docs/readme.md | 22 ++- package.json | 2 +- src/_animations.scss | 2 +- src/_functions.scss | 2 +- src/_mixins.scss | 2 +- src/animations/_float.scss | 10 +- src/animations/_pulse.scss | 10 +- src/animations/_spin.scss | 10 +- src/functions/_pxToRem.scss | 6 +- src/functions/_z-index.scss | 17 ++- src/mixins/_absolute.scss | 5 +- src/mixins/_blur.scss | 5 +- src/mixins/_border-radius.scss | 5 +- src/mixins/_box-shadow.scss | 5 +- src/mixins/_flex-order.scss | 5 +- src/mixins/_gradient.scss | 15 +- src/mixins/_keyframes.scss | 3 +- src/mixins/_media.scss | 14 +- src/mixins/_opacity.scss | 5 +- src/mixins/_parallax-background.scss | 5 +- src/mixins/_placeholder.scss | 3 +- src/mixins/_prefix.scss | 5 +- src/mixins/_transitions.scss | 6 +- 25 files changed, 331 insertions(+), 235 deletions(-) diff --git a/README.md b/README.md index 1941a42..154b5a1 100644 --- a/README.md +++ b/README.md @@ -18,6 +18,7 @@ - [About](#about) - [Installation](#installation) - [How to use?](#how-to-use) +- [License](#license) - [Features](#features) ## About @@ -29,19 +30,38 @@ Sass boilerplate which is useful when starting a new web project. Includes: vari ## How to use * In one of your sass files (preferably top of the root sass file) import sass-ultimate-boilerplate with a fallowing code: -```@import "~sass-ultimate-boilerplate/src/sass-boilerplate";``` +```scss +@import "~sass-ultimate-boilerplate/src/sass-boilerplate"; +``` + +If you are developing encapsulating components (for example Angular components) you can also import `animations`, `functions` and `mixins` separately like so: +1. Import animations only: +```scss +@import "~sass-ultimate-boilerplate/src/animations"; +``` +2. Import functions only: +```scss +@import "~sass-ultimate-boilerplate/src/functions"; +``` +1. Import mixins only: +```scss +@import "~sass-ultimate-boilerplate/src/mixins"; +``` + +## License +The repository code is open-sourced software licensed under the [MIT license](https://github.com/SlimDogs/sass-ultimate-boilerplate/blob/master/LICENSE?raw=true). ## Features -## Animations +### Animations - [Float](#float) - [Pulse](#pulse) - [Spin](#spin) -## Functions +### Functions - [Pixels to rem](#pixels-to-rem) - [Fixed Z index](#fixed-z-index) -## Mixins +### Mixins - [Absolute](#absolute) - [Blur](#blur) - [Border radius](#border-radius) @@ -58,116 +78,95 @@ Sass boilerplate which is useful when starting a new web project. Includes: vari ### Pixels to rem - `Type:` Function - `Description:` Convert pixels to rems easealy +- `Variables:` You can define base font size by setting variable `$font-base` or by passing second argument to the function e.g. `pxToRem(45px, 14px);` Usage: -```div { -height: pxToRem(45px); -}``` +```scss +div { height: pxToRem(45px); } +``` ### Fixed Z index - `Type:` Function - `Description:` Have and use a ordered and listed z-index values! +- `Variables`: You can set your z-index order array by setting variable `$z-indexes`, for example default value is: +```scss +$z-indexes: ( +"outdated-browser", +"modal", +"site-header", +"page-wrapper", +"site-footer" +); +``` Usage: -```div.header { -z-index: z('site-header'); -}``` - -### Float -- `Type:` Animation -- `Description:` Floating/hovering animation - -Usage: -```div { -@extend %animation-float; -}``` - -### Pulse -- `Type:` Animation -- `Description:` Pulsing shadow/outline animation - -Usage: -```div { -@extend %pulse; -}``` - -### Spin -- `Type:` Animation -- `Description:` 360deg infinite spinning animation - -Usage: -```div { -@extend %spin; -}``` +```scss +div.header { z-index: z('site-header'); } +``` ### Absolute - `Type:` Mixin - `Description:` Shortcut for setting position absolute with all positions containing same value Usage: -```div { -@include absolute(10px); -}``` +```scss +div { @include absolute(10px); } +``` ### Blur - `Type:` Mixin - `Description:` Vendorized blur Usage: -```.blured-text { -@include blur(0.8); -}``` +```scss +.blured-text { @include blur(0.8); } +``` ### Border-radius - `Type:` Mixin - `Description:` Vendorized border-radius shortcut Usage: -```.card { -@include border-radius(0.8); -}``` +```scss +.card { @include border-radius(0.8); } +``` ### Box-shadow - `Type:` Mixin - `Description:` Vendorized box-shadow shortcut Usage: -```.element { -@include box-shadow(5px, 3px, 10px, #000); -}``` +```scss +.element { @include box-shadow(5px, 3px, 10px, #000); } +``` ### Flex-order - `Type:` Mixin - `Description:` Vendorized flex-order shortcut Usage: -```.card { -@include flex-order(-1); -}``` +```scss +.card { @include flex-order(-1); } +``` ### Gradient - `Type:` Mixin - `Description:` Comfortable way of setting css gradients! Usage: -```.test-1 { -@include linear-gradient(#31B7D7, #EDAC7D); -} - -.test-2 { -@include linear-gradient(to right, #E47D7D 0%, #C195D3 50%, #4FB4E8 100%); -} - -.test-3 { -@include linear-gradient(42deg, #B58234 0%, #D2B545 50%, #D7C04D 50.01%, #FFFFFF 100%); -}``` +```scss +.test-1 { @include linear-gradient(#31B7D7, #EDAC7D); } +.test-2 { @include linear-gradient(to right, #E47D7D 0%, #C195D3 50%, #4FB4E8 100%); } +.test-3 { @include linear-gradient(42deg, #B58234 0%, #D2B545 50%, #D7C04D 50.01%, #FFFFFF 100%); } +``` ### Animation and keyframes - `Type:` Mixin - `Description:` Vendorized animation & keyframes shortcut Usage: -```@include keyframes(slide-down) { +```scss +@include keyframes(slide-down) { 0% { opacity: 1; } 90% { opacity: 0; } } @@ -177,14 +176,27 @@ width: 100px; height: 100px; background: black; @include animation('slide-down 5s 3'); -}``` +} +``` ### Media queries - `Type:` Mixin - `Description:` Easy media queries! +- `Variables:` To change media breakpoint values please set `$grid-breakpoints` variable, default value is: +```scss +$grid-breakpoints: ( +xs: 0, +sm: 576px, +md: 768px, +lg: 992px, +xl: 1200px, +xxl: 1330px +); +``` Usage: -```.element { +```scss +.element { width: 100px; height: 100px; background-color: black; @@ -192,54 +204,86 @@ background-color: black; @include media-xs() { background-color: white; }; -}``` +} +``` ### Opacity - `Type:` Mixin - `Description:` Vendorized opacity shortcut Usage: -```.faded-text { -@include opacity(0.8); -}``` +```scss +.faded-text { @include opacity(0.8); } +``` ### Parallax background - `Type:` Mixin - `Description:` Set parallax image backfround easy! Usage: -```div.msm-header { -@include parallax-background('/assets/images/header2_offset.jpg'); -}``` +```scss +.header { @include parallax-background('/assets/images/header2_offset.jpg'); } +``` ### Placeholder - `Type:` Mixin - `Description:` Easy way of setting placeholder stylings Usage: -```input.element { +```scss +input.element { @include placeholder { font-style:italic; color: white; font-weight:100; } -}``` +} +``` ### Prefix or Vendorize - `Type:` Mixin - `Description:` Prefix or vendorize your style attributes Usage: -```span.icon { -@include prefix(transform, rotate(45deg), webkit ms); -}``` +```scss +.icon { @include prefix(transform, rotate(45deg), webkit ms); } +``` ### Transition - `Type:` Mixin - `Description:` Vendorized transitions Usage: -```a { -color: gray; -@include transition(color .3s ease); -}``` +```scss +.animated-div { @include transition(color .3s ease); } +``` + +### Float +- `Type:` Animation +- `Description:` Floating/hovering animation +- `Variables:` To change spin speed please set variable `$flaot-animation-speed` to your prefered speed (default is `4s`) before `importing sass-boilerplate` or `animations` only + +Usage: +```scss +div { @extend %animation-float; } +``` + +### Pulse +- `Type:` Animation +- `Description:` Pulsing shadow/outline animation +- `Variables:` To change spin speed please set variable `$pulse-animation-speed` to your prefered speed (default is `2s`) before `importing sass-boilerplate` or `animations` only + +Usage: +```scss +div { @extend %pulse; } +``` + +### Spin +- `Type:` Animation +- `Description:` 360deg infinite spinning animation +- `Variables:` To change spin speed please set variable `$pulse-animation-speed` to your prefered speed (default is `0.5s`) before `importing sass-boilerplate` or `animations` only + +Usage: +```scss +div { @extend %spin; } +``` diff --git a/docs/features.md b/docs/features.md index e4103f2..2d1fd24 100644 --- a/docs/features.md +++ b/docs/features.md @@ -1,13 +1,13 @@ -## Animations +### Animations - [Float](#float) - [Pulse](#pulse) - [Spin](#spin) -## Functions +### Functions - [Pixels to rem](#pixels-to-rem) - [Fixed Z index](#fixed-z-index) -## Mixins +### Mixins - [Absolute](#absolute) - [Blur](#blur) - [Border radius](#border-radius) @@ -24,116 +24,95 @@ ### Pixels to rem - `Type:` Function - `Description:` Convert pixels to rems easealy +- `Variables:` You can define base font size by setting variable `$font-base` or by passing second argument to the function e.g. `pxToRem(45px, 14px);` Usage: -```div { -height: pxToRem(45px); -}``` +```scss +div { height: pxToRem(45px); } +``` ### Fixed Z index - `Type:` Function - `Description:` Have and use a ordered and listed z-index values! - -Usage: -```div.header { -z-index: z('site-header'); -}``` - -### Float -- `Type:` Animation -- `Description:` Floating/hovering animation - -Usage: -```div { -@extend %animation-float; -}``` - -### Pulse -- `Type:` Animation -- `Description:` Pulsing shadow/outline animation - -Usage: -```div { -@extend %pulse; -}``` - -### Spin -- `Type:` Animation -- `Description:` 360deg infinite spinning animation - -Usage: -```div { -@extend %spin; -}``` +- `Variables`: You can set your z-index order array by setting variable `$z-indexes`, for example default value is: +```scss +$z-indexes: ( +"outdated-browser", +"modal", +"site-header", +"page-wrapper", +"site-footer" +); +``` + +Usage: +```scss +div.header { z-index: z('site-header'); } +``` ### Absolute - `Type:` Mixin - `Description:` Shortcut for setting position absolute with all positions containing same value Usage: -```div { -@include absolute(10px); -}``` +```scss +div { @include absolute(10px); } +``` ### Blur - `Type:` Mixin - `Description:` Vendorized blur Usage: -```.blured-text { -@include blur(0.8); -}``` +```scss +.blured-text { @include blur(0.8); } +``` ### Border-radius - `Type:` Mixin - `Description:` Vendorized border-radius shortcut Usage: -```.card { -@include border-radius(0.8); -}``` +```scss +.card { @include border-radius(0.8); } +``` ### Box-shadow - `Type:` Mixin - `Description:` Vendorized box-shadow shortcut Usage: -```.element { -@include box-shadow(5px, 3px, 10px, #000); -}``` +```scss +.element { @include box-shadow(5px, 3px, 10px, #000); } +``` ### Flex-order - `Type:` Mixin - `Description:` Vendorized flex-order shortcut Usage: -```.card { -@include flex-order(-1); -}``` +```scss +.card { @include flex-order(-1); } +``` ### Gradient - `Type:` Mixin - `Description:` Comfortable way of setting css gradients! Usage: -```.test-1 { -@include linear-gradient(#31B7D7, #EDAC7D); -} - -.test-2 { -@include linear-gradient(to right, #E47D7D 0%, #C195D3 50%, #4FB4E8 100%); -} - -.test-3 { -@include linear-gradient(42deg, #B58234 0%, #D2B545 50%, #D7C04D 50.01%, #FFFFFF 100%); -}``` +```scss +.test-1 { @include linear-gradient(#31B7D7, #EDAC7D); } +.test-2 { @include linear-gradient(to right, #E47D7D 0%, #C195D3 50%, #4FB4E8 100%); } +.test-3 { @include linear-gradient(42deg, #B58234 0%, #D2B545 50%, #D7C04D 50.01%, #FFFFFF 100%); } +``` ### Animation and keyframes - `Type:` Mixin - `Description:` Vendorized animation & keyframes shortcut Usage: -```@include keyframes(slide-down) { +```scss +@include keyframes(slide-down) { 0% { opacity: 1; } 90% { opacity: 0; } } @@ -143,14 +122,27 @@ width: 100px; height: 100px; background: black; @include animation('slide-down 5s 3'); -}``` +} +``` ### Media queries - `Type:` Mixin - `Description:` Easy media queries! - -Usage: -```.element { +- `Variables:` To change media breakpoint values please set `$grid-breakpoints` variable, default value is: +```scss +$grid-breakpoints: ( +xs: 0, +sm: 576px, +md: 768px, +lg: 992px, +xl: 1200px, +xxl: 1330px +); +``` + +Usage: +```scss +.element { width: 100px; height: 100px; background-color: black; @@ -158,54 +150,86 @@ background-color: black; @include media-xs() { background-color: white; }; -}``` +} +``` ### Opacity - `Type:` Mixin - `Description:` Vendorized opacity shortcut Usage: -```.faded-text { -@include opacity(0.8); -}``` +```scss +.faded-text { @include opacity(0.8); } +``` ### Parallax background - `Type:` Mixin - `Description:` Set parallax image backfround easy! Usage: -```div.msm-header { -@include parallax-background('/assets/images/header2_offset.jpg'); -}``` +```scss +.header { @include parallax-background('/assets/images/header2_offset.jpg'); } +``` ### Placeholder - `Type:` Mixin - `Description:` Easy way of setting placeholder stylings Usage: -```input.element { +```scss +input.element { @include placeholder { font-style:italic; color: white; font-weight:100; } -}``` +} +``` ### Prefix or Vendorize - `Type:` Mixin - `Description:` Prefix or vendorize your style attributes Usage: -```span.icon { -@include prefix(transform, rotate(45deg), webkit ms); -}``` +```scss +.icon { @include prefix(transform, rotate(45deg), webkit ms); } +``` ### Transition - `Type:` Mixin - `Description:` Vendorized transitions Usage: -```a { -color: gray; -@include transition(color .3s ease); -}``` +```scss +.animated-div { @include transition(color .3s ease); } +``` + +### Float +- `Type:` Animation +- `Description:` Floating/hovering animation +- `Variables:` To change spin speed please set variable `$flaot-animation-speed` to your prefered speed (default is `4s`) before `importing sass-boilerplate` or `animations` only + +Usage: +```scss +div { @extend %animation-float; } +``` + +### Pulse +- `Type:` Animation +- `Description:` Pulsing shadow/outline animation +- `Variables:` To change spin speed please set variable `$pulse-animation-speed` to your prefered speed (default is `2s`) before `importing sass-boilerplate` or `animations` only + +Usage: +```scss +div { @extend %pulse; } +``` + +### Spin +- `Type:` Animation +- `Description:` 360deg infinite spinning animation +- `Variables:` To change spin speed please set variable `$pulse-animation-speed` to your prefered speed (default is `0.5s`) before `importing sass-boilerplate` or `animations` only + +Usage: +```scss +div { @extend %spin; } +``` diff --git a/docs/readme.md b/docs/readme.md index 4398c6c..52574e2 100644 --- a/docs/readme.md +++ b/docs/readme.md @@ -18,6 +18,7 @@ - [About](#about) - [Installation](#installation) - [How to use?](#how-to-use) +- [License](#license) - [Features](#features) ## About @@ -29,6 +30,25 @@ Sass boilerplate which is useful when starting a new web project. Includes: vari ## How to use * In one of your sass files (preferably top of the root sass file) import sass-ultimate-boilerplate with a fallowing code: -```@import "~sass-ultimate-boilerplate/src/sass-boilerplate";``` +```scss +@import "~sass-ultimate-boilerplate/src/sass-boilerplate"; +``` + +If you are developing encapsulating components (for example Angular components) you can also import `animations`, `functions` and `mixins` separately like so: +1. Import animations only: +```scss +@import "~sass-ultimate-boilerplate/src/animations"; +``` +2. Import functions only: +```scss +@import "~sass-ultimate-boilerplate/src/functions"; +``` +1. Import mixins only: +```scss +@import "~sass-ultimate-boilerplate/src/mixins"; +``` + +## License +The repository code is open-sourced software licensed under the [MIT license](https://github.com/SlimDogs/sass-ultimate-boilerplate/blob/master/LICENSE?raw=true). ## Features \ No newline at end of file diff --git a/package.json b/package.json index 987e421..6708978 100644 --- a/package.json +++ b/package.json @@ -14,7 +14,7 @@ "devDependencies": { "cz-conventional-changelog": "2.1.0", "gulp": "3.9.1", - "gulp-comments-to-md": "1.0.0", + "gulp-comments-to-md": "1.0.2", "gulp-concat": "2.6.1", "gulp-sass": "3.1.0", "gulp-sass-lint": "1.3.4", diff --git a/src/_animations.scss b/src/_animations.scss index 0ecda0c..84d5905 100644 --- a/src/_animations.scss +++ b/src/_animations.scss @@ -1,5 +1,5 @@ /** - * ## Animations + * ### Animations * - [Float](#float) * - [Pulse](#pulse) * - [Spin](#spin) diff --git a/src/_functions.scss b/src/_functions.scss index 43731bd..6c39020 100644 --- a/src/_functions.scss +++ b/src/_functions.scss @@ -1,5 +1,5 @@ /** - * ## Functions + * ### Functions * - [Pixels to rem](#pixels-to-rem) * - [Fixed Z index](#fixed-z-index) */ diff --git a/src/_mixins.scss b/src/_mixins.scss index a2cab03..0b95596 100644 --- a/src/_mixins.scss +++ b/src/_mixins.scss @@ -1,5 +1,5 @@ /** - * ## Mixins + * ### Mixins * - [Absolute](#absolute) * - [Blur](#blur) * - [Border radius](#border-radius) diff --git a/src/animations/_float.scss b/src/animations/_float.scss index 6d0f0b3..85dd61a 100644 --- a/src/animations/_float.scss +++ b/src/animations/_float.scss @@ -2,16 +2,14 @@ * ### Float * - `Type:` Animation * - `Description:` Floating/hovering animation + * - `Variables:` To change spin speed please set variable `$flaot-animation-speed` to your prefered speed (default is `4s`) before `importing sass-boilerplate` or `animations` only * * Usage: * ```scss - * div { - * @extend %animation-float; - * }``` + * div { @extend %animation-float; } + * ``` */ -$flaot-animation-speed: 4s; - @keyframes float { 0% { box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3); @@ -28,6 +26,8 @@ $flaot-animation-speed: 4s; } %animation-float { + $flaot-animation-speed: 4s !default; + -webkit-animation: float $flaot-animation-speed ease-in-out infinite; -moz-animation: float $flaot-animation-speed ease-in-out infinite; -ms-animation: float $flaot-animation-speed ease-in-out infinite; diff --git a/src/animations/_pulse.scss b/src/animations/_pulse.scss index 685c2a4..08c76e4 100644 --- a/src/animations/_pulse.scss +++ b/src/animations/_pulse.scss @@ -2,16 +2,18 @@ * ### Pulse * - `Type:` Animation * - `Description:` Pulsing shadow/outline animation + * - `Variables:` To change spin speed please set variable `$pulse-animation-speed` to your prefered speed (default is `2s`) before `importing sass-boilerplate` or `animations` only * * Usage: * ```scss - * div { - * @extend %pulse; - * }``` + * div { @extend %pulse; } + * ``` */ %pulse { - animation: pulse 2s infinite; + $pulse-animation-speed: 2s !default; + + animation: pulse $pulse-animation-speed infinite; &:hover { animation: none; diff --git a/src/animations/_spin.scss b/src/animations/_spin.scss index ecb13a2..cdb3116 100644 --- a/src/animations/_spin.scss +++ b/src/animations/_spin.scss @@ -2,16 +2,14 @@ * ### Spin * - `Type:` Animation * - `Description:` 360deg infinite spinning animation + * - `Variables:` To change spin speed please set variable `$pulse-animation-speed` to your prefered speed (default is `0.5s`) before `importing sass-boilerplate` or `animations` only * * Usage: * ```scss - * div { - * @extend %spin; - * }``` + * div { @extend %spin; } + * ``` */ -$spin-animation-speed: 0.5s; - @-webkit-keyframes rotating { from { -webkit-transform: rotate(0deg); @@ -42,6 +40,8 @@ $spin-animation-speed: 0.5s; } %spin { + $spin-animation-speed: 0.5s !default; + display: inline-block; -webkit-animation: rotating $spin-animation-speed linear infinite; -moz-animation: rotating $spin-animation-speed linear infinite; diff --git a/src/functions/_pxToRem.scss b/src/functions/_pxToRem.scss index a839157..6ad6d69 100644 --- a/src/functions/_pxToRem.scss +++ b/src/functions/_pxToRem.scss @@ -2,12 +2,12 @@ * ### Pixels to rem * - `Type:` Function * - `Description:` Convert pixels to rems easealy + * - `Variables:` You can define base font size by setting variable `$font-base` or by passing second argument to the function e.g. `pxToRem(45px, 14px);` * * Usage: * ```scss - * div { - * height: pxToRem(45px); - * }``` + * div { height: pxToRem(45px); } + * ``` */ @function pxToRem($size, $fn-font-base: null) { diff --git a/src/functions/_z-index.scss b/src/functions/_z-index.scss index 20335c2..882da55 100644 --- a/src/functions/_z-index.scss +++ b/src/functions/_z-index.scss @@ -2,12 +2,21 @@ * ### Fixed Z index * - `Type:` Function * - `Description:` Have and use a ordered and listed z-index values! + * - `Variables`: You can set your z-index order array by setting variable `$z-indexes`, for example default value is: + * ```scss + * $z-indexes: ( + * "outdated-browser", + * "modal", + * "site-header", + * "page-wrapper", + * "site-footer" + * ); + * ``` * * Usage: * ```scss - * div.header { - * z-index: z('site-header'); - * }``` + * div.header { z-index: z('site-header'); } + * ``` */ $z-indexes: ( @@ -16,7 +25,7 @@ $z-indexes: ( "site-header", "page-wrapper", "site-footer" -); +) !default; @function z($name) { @if index($z-indexes, $name) { diff --git a/src/mixins/_absolute.scss b/src/mixins/_absolute.scss index 1a214ee..3085de0 100644 --- a/src/mixins/_absolute.scss +++ b/src/mixins/_absolute.scss @@ -5,9 +5,8 @@ * * Usage: * ```scss - * div { - * @include absolute(10px); - * }``` + * div { @include absolute(10px); } + * ``` */ @mixin absolute($gap: 0) { diff --git a/src/mixins/_blur.scss b/src/mixins/_blur.scss index e6085f9..2b78088 100644 --- a/src/mixins/_blur.scss +++ b/src/mixins/_blur.scss @@ -5,9 +5,8 @@ * * Usage: * ```scss - * .blured-text { - * @include blur(0.8); - * }``` + * .blured-text { @include blur(0.8); } + * ``` */ @mixin blur($blur) { diff --git a/src/mixins/_border-radius.scss b/src/mixins/_border-radius.scss index 3f397ab..d15f317 100644 --- a/src/mixins/_border-radius.scss +++ b/src/mixins/_border-radius.scss @@ -5,9 +5,8 @@ * * Usage: * ```scss - * .card { - * @include border-radius(0.8); - * }``` + * .card { @include border-radius(0.8); } + * ``` */ @mixin border-radius($radius) { diff --git a/src/mixins/_box-shadow.scss b/src/mixins/_box-shadow.scss index 6be4a6b..ebb3271 100644 --- a/src/mixins/_box-shadow.scss +++ b/src/mixins/_box-shadow.scss @@ -5,9 +5,8 @@ * * Usage: * ```scss - * .element { - * @include box-shadow(5px, 3px, 10px, #000); - * }``` + * .element { @include box-shadow(5px, 3px, 10px, #000); } + * ``` */ @mixin box-shadow($top, $left, $blur, $color, $inset: false) { diff --git a/src/mixins/_flex-order.scss b/src/mixins/_flex-order.scss index 1dd48ae..3c0b13a 100644 --- a/src/mixins/_flex-order.scss +++ b/src/mixins/_flex-order.scss @@ -5,9 +5,8 @@ * * Usage: * ```scss - * .card { - * @include flex-order(-1); - * }``` + * .card { @include flex-order(-1); } + * ``` */ @mixin flex-order($position) { diff --git a/src/mixins/_gradient.scss b/src/mixins/_gradient.scss index 959dbb7..bfba0a7 100644 --- a/src/mixins/_gradient.scss +++ b/src/mixins/_gradient.scss @@ -5,17 +5,10 @@ * * Usage: * ```scss - * .test-1 { - * @include linear-gradient(#31B7D7, #EDAC7D); - * } - * - * .test-2 { - * @include linear-gradient(to right, #E47D7D 0%, #C195D3 50%, #4FB4E8 100%); - * } - * - * .test-3 { - * @include linear-gradient(42deg, #B58234 0%, #D2B545 50%, #D7C04D 50.01%, #FFFFFF 100%); - * }``` + * .test-1 { @include linear-gradient(#31B7D7, #EDAC7D); } + * .test-2 { @include linear-gradient(to right, #E47D7D 0%, #C195D3 50%, #4FB4E8 100%); } + * .test-3 { @include linear-gradient(42deg, #B58234 0%, #D2B545 50%, #D7C04D 50.01%, #FFFFFF 100%); } + * ``` */ @function convert-angle($value, $unit) { diff --git a/src/mixins/_keyframes.scss b/src/mixins/_keyframes.scss index 737f964..2ca0e77 100644 --- a/src/mixins/_keyframes.scss +++ b/src/mixins/_keyframes.scss @@ -15,7 +15,8 @@ * height: 100px; * background: black; * @include animation('slide-down 5s 3'); - * }``` + * } + * ``` */ @mixin keyframes($animation-name) { diff --git a/src/mixins/_media.scss b/src/mixins/_media.scss index 5f11f6d..a218ce3 100644 --- a/src/mixins/_media.scss +++ b/src/mixins/_media.scss @@ -2,6 +2,17 @@ * ### Media queries * - `Type:` Mixin * - `Description:` Easy media queries! + * - `Variables:` To change media breakpoint values please set `$grid-breakpoints` variable, default value is: + * ```scss + * $grid-breakpoints: ( + * xs: 0, + * sm: 576px, + * md: 768px, + * lg: 992px, + * xl: 1200px, + * xxl: 1330px + * ); + * ``` * * Usage: * ```scss @@ -13,7 +24,8 @@ * @include media-xs() { * background-color: white; * }; - * }``` + * } + * ``` */ $grid-breakpoints: ( diff --git a/src/mixins/_opacity.scss b/src/mixins/_opacity.scss index 8300c1f..42530ee 100644 --- a/src/mixins/_opacity.scss +++ b/src/mixins/_opacity.scss @@ -5,9 +5,8 @@ * * Usage: * ```scss - * .faded-text { - * @include opacity(0.8); - * }``` + * .faded-text { @include opacity(0.8); } + * ``` */ @mixin opacity($opacity) { diff --git a/src/mixins/_parallax-background.scss b/src/mixins/_parallax-background.scss index 103ec40..0c62c27 100644 --- a/src/mixins/_parallax-background.scss +++ b/src/mixins/_parallax-background.scss @@ -5,9 +5,8 @@ * * Usage: * ```scss - * div.msm-header { - * @include parallax-background('/assets/images/header2_offset.jpg'); - * }``` + * .header { @include parallax-background('/assets/images/header2_offset.jpg'); } + * ``` */ @mixin parallax-background($url) { diff --git a/src/mixins/_placeholder.scss b/src/mixins/_placeholder.scss index 0f04818..6b2a5ee 100644 --- a/src/mixins/_placeholder.scss +++ b/src/mixins/_placeholder.scss @@ -11,7 +11,8 @@ * color: white; * font-weight:100; * } - * }``` + * } + * ``` */ @mixin placeholder { diff --git a/src/mixins/_prefix.scss b/src/mixins/_prefix.scss index 6fc05e4..21f8e72 100644 --- a/src/mixins/_prefix.scss +++ b/src/mixins/_prefix.scss @@ -5,9 +5,8 @@ * * Usage: * ```scss - * span.icon { - * @include prefix(transform, rotate(45deg), webkit ms); - * }``` + * .icon { @include prefix(transform, rotate(45deg), webkit ms); } + * ``` */ @mixin prefix($property, $value, $prefixes: (webkit ms)) { diff --git a/src/mixins/_transitions.scss b/src/mixins/_transitions.scss index 888c440..7f73b11 100644 --- a/src/mixins/_transitions.scss +++ b/src/mixins/_transitions.scss @@ -5,10 +5,8 @@ * * Usage: * ```scss - * a { - * color: gray; - * @include transition(color .3s ease); - * }``` + * .animated-div { @include transition(color .3s ease); } + * ``` */ @mixin transition($args...) {