diff --git a/.travis.yml b/.travis.yml
index a405ca1..8765549 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -10,15 +10,8 @@ cache:
- ~/.npm
before_install:
- yarn global add gulp
-cache:
- directories:
- - "node_modules"
script:
- yarn run build
- yarn run generate-features-docs
-deploy:
- provider: script
- script: npm run semantic-release
- skip_cleanup: true
- on:
- branch: master
\ No newline at end of file
+after_success:
+ - test $TRAVIS_PULL_REQUEST == "false" && test $TRAVIS_BRANCH == "master" && npm run semantic-release
\ No newline at end of file
diff --git a/README.md b/README.md
index 154b5a1..e354bc6 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,11 @@
- 
-
-
+
- 
+
- 
+
@@ -22,31 +20,33 @@
- [Features](#features)
## About
-Sass boilerplate which is useful when starting a new web project. Includes: variables, functions, mixins, animations and other useful bits!
+*Ultimate Sass boilerplate* is useful when starting a new web project.
+
+It includes such [goodies](#features) as `functions`, `mixins`, `animations`.
## installation
* If you are using yarn run `yarn add sass-ultimate-boilerplate --save`
* If you prefer npm run `npm install sass-ultimate-boilerplate --save`
## How to use
-* In one of your sass files (preferably top of the root sass file) import sass-ultimate-boilerplate with a fallowing code:
-```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";
-```
+- In one of your *scss* files (preferably the very "root" scss file) add line to import `sass-ultimate-boilerplate`:
+ ```scss
+ @import "~sass-ultimate-boilerplate/src/usb";
+ ```
+
+- When developing encapsulated components (for example _Angular_ components) you can also import `animations`, `functions` and `mixins` separately:
+ * Import animations only:
+ ```scss
+ @import "~sass-ultimate-boilerplate/src/usb-animations";
+ ```
+ * Import functions only:
+ ```scss
+ @import "~sass-ultimate-boilerplate/src/usb-functions";
+ ```
+ * Import mixins only:
+ ```scss
+ @import "~sass-ultimate-boilerplate/src/usb-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).
@@ -59,7 +59,7 @@ The repository code is open-sourced software licensed under the [MIT license](ht
### Functions
- [Pixels to rem](#pixels-to-rem)
-- [Fixed Z index](#fixed-z-index)
+- [Clean z-index](#clean-z-index)
### Mixins
- [Absolute](#absolute)
@@ -77,20 +77,22 @@ The repository code is open-sourced software licensed under the [MIT license](ht
### 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);`
+- `Description:` Convert pixels to rems
+- `Variables:`
+> 🔖`$usb-font-base` - optional variable for base font size (you can also pass second argument to the function e.g. `usb-px-to-rem(45px, 14px);`
Usage:
```scss
-div { height: pxToRem(45px); }
+div { height: usb-px-to-rem(45px); }
```
-### Fixed Z index
+### Clean 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:
+- `Description:` Helps to set `z-index` for your elements
+- `Variables`:
+> 🔖 `$usb-z-indexes` - array of specifically ordered option (for default value look below)
```scss
-$z-indexes: (
+$usb-z-indexes: (
"outdated-browser",
"modal",
"site-header",
@@ -101,16 +103,16 @@ $z-indexes: (
Usage:
```scss
-div.header { z-index: z('site-header'); }
+.header { z-index: usb-z-index('site-header'); }
```
### Absolute
- `Type:` Mixin
-- `Description:` Shortcut for setting position absolute with all positions containing same value
+- `Description:` Helps setting absolute position with same position value for all sides
Usage:
```scss
-div { @include absolute(10px); }
+.absoluted-element { @include usb-absolute(10px); }
```
### Blur
@@ -119,72 +121,68 @@ div { @include absolute(10px); }
Usage:
```scss
-.blured-text { @include blur(0.8); }
+.blured-text { @include usb-blur(0.8); }
```
### Border-radius
- `Type:` Mixin
-- `Description:` Vendorized border-radius shortcut
+- `Description:` Vendorized border-radius
Usage:
```scss
-.card { @include border-radius(0.8); }
+.card { @include usb-border-radius(0.8); }
```
### Box-shadow
- `Type:` Mixin
-- `Description:` Vendorized box-shadow shortcut
+- `Description:` Vendorized box-shadow
Usage:
```scss
-.element { @include box-shadow(5px, 3px, 10px, #000); }
+.ninja-in-the-shadow { @include usb-box-shadow(5px, 3px, 10px, #000); }
```
### Flex-order
- `Type:` Mixin
-- `Description:` Vendorized flex-order shortcut
+- `Description:` Vendorized flex-order
Usage:
```scss
-.card { @include flex-order(-1); }
+.display-second { @include usb-flex-order(-1); }
```
### Gradient
- `Type:` Mixin
-- `Description:` Comfortable way of setting css gradients!
+- `Description:` Easy way for creating gradient backgrounds
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 usb-linear-gradient(#31B7D7, #EDAC7D); }
+.test-2 { @include usb-linear-gradient(to right, #E47D7D 0%, #C195D3 50%, #4FB4E8 100%); }
+.test-3 { @include usb-linear-gradient(42deg, #B58234 0%, #D2B545 50%, #D7C04D 50.01%, #FFFFFF 100%); }
```
### Animation and keyframes
- `Type:` Mixin
-- `Description:` Vendorized animation & keyframes shortcut
+- `Description:` Vendorized animation & keyframes
Usage:
```scss
-@include keyframes(slide-down) {
+@include usb-keyframes(slide-down) {
0% { opacity: 1; }
90% { opacity: 0; }
}
-.element {
-width: 100px;
-height: 100px;
-background: black;
-@include animation('slide-down 5s 3');
-}
+.animated-element { @include usb-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:
+- `Variables:`
+> 🔖 `$usb-grid-breakpoints` - array holding breakpoints sizes (for default value look below)
```scss
-$grid-breakpoints: (
+$usb-grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
@@ -201,7 +199,7 @@ width: 100px;
height: 100px;
background-color: black;
-@include media-xs() {
+@include usb-media-xs() {
background-color: white;
};
}
@@ -209,81 +207,82 @@ background-color: white;
### Opacity
- `Type:` Mixin
-- `Description:` Vendorized opacity shortcut
+- `Description:` Vendorized opacity
Usage:
```scss
-.faded-text { @include opacity(0.8); }
+.faded-text { @include usb-opacity(0.8); }
```
### Parallax background
- `Type:` Mixin
-- `Description:` Set parallax image backfround easy!
+- `Description:` Easy way to create parallax image background
Usage:
```scss
-.header { @include parallax-background('/assets/images/header2_offset.jpg'); }
+.header { @include usb-parallax-background('/assets/images/header2_offset.jpg'); }
```
### Placeholder
- `Type:` Mixin
-- `Description:` Easy way of setting placeholder stylings
+- `Description:` Easy way to set placeholder style
Usage:
```scss
-input.element {
-@include placeholder {
-font-style:italic;
-color: white;
-font-weight:100;
-}
+input.password-italic {
+@include usb-placeholder { font-style:italic; }
}
```
### Prefix or Vendorize
- `Type:` Mixin
-- `Description:` Prefix or vendorize your style attributes
+- `Description:` Prefix / vendorize without a problem
Usage:
```scss
-.icon { @include prefix(transform, rotate(45deg), webkit ms); }
+.icon { @include usb-prefix(transform, rotate(45deg), webkit ms); }
```
### Transition
- `Type:` Mixin
-- `Description:` Vendorized transitions
+- `Description:` Vendorized transition
Usage:
```scss
-.animated-div { @include transition(color .3s ease); }
+.animated-div { @include usb-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
+- `Variables:`
+> 🔖 `$usb-float-animation-speed` - animation speed (default value is `4s`)
Usage:
```scss
-div { @extend %animation-float; }
+div { @extend %usb-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
+- `Variables:`
+> 🔖 `$usb-pulse-animation-speed` - animation speed (default is `2s`)
+> 🔖 `$usb-pulse-animation-primary-color` - primary pulsation color (default value is `rgba(38, 166, 154, 0.4)`)
+> 🔖 `$usb-pulse-animation-secondary-color` - secondary pulsation color (default value is `rgba(38, 166, 154, 0)`)
Usage:
```scss
-div { @extend %pulse; }
+div { @extend %usb-animation-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
+- `Variables:`
+> 🔖 `$usb-spin-animation-speed` - animation speed (default value is `0.5s`)
Usage:
```scss
-div { @extend %spin; }
+div { @extend %usb-animation-spin; }
```
diff --git a/docs/features.md b/docs/features.md
index 2d1fd24..9bf238c 100644
--- a/docs/features.md
+++ b/docs/features.md
@@ -5,7 +5,7 @@
### Functions
- [Pixels to rem](#pixels-to-rem)
-- [Fixed Z index](#fixed-z-index)
+- [Clean z-index](#clean-z-index)
### Mixins
- [Absolute](#absolute)
@@ -23,20 +23,22 @@
### 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);`
+- `Description:` Convert pixels to rems
+- `Variables:`
+> 🔖`$usb-font-base` - optional variable for base font size (you can also pass second argument to the function e.g. `usb-px-to-rem(45px, 14px);`
Usage:
```scss
-div { height: pxToRem(45px); }
+div { height: usb-px-to-rem(45px); }
```
-### Fixed Z index
+### Clean 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:
+- `Description:` Helps to set `z-index` for your elements
+- `Variables`:
+> 🔖 `$usb-z-indexes` - array of specifically ordered option (for default value look below)
```scss
-$z-indexes: (
+$usb-z-indexes: (
"outdated-browser",
"modal",
"site-header",
@@ -47,16 +49,16 @@ $z-indexes: (
Usage:
```scss
-div.header { z-index: z('site-header'); }
+.header { z-index: usb-z-index('site-header'); }
```
### Absolute
- `Type:` Mixin
-- `Description:` Shortcut for setting position absolute with all positions containing same value
+- `Description:` Helps setting absolute position with same position value for all sides
Usage:
```scss
-div { @include absolute(10px); }
+.absoluted-element { @include usb-absolute(10px); }
```
### Blur
@@ -65,72 +67,68 @@ div { @include absolute(10px); }
Usage:
```scss
-.blured-text { @include blur(0.8); }
+.blured-text { @include usb-blur(0.8); }
```
### Border-radius
- `Type:` Mixin
-- `Description:` Vendorized border-radius shortcut
+- `Description:` Vendorized border-radius
Usage:
```scss
-.card { @include border-radius(0.8); }
+.card { @include usb-border-radius(0.8); }
```
### Box-shadow
- `Type:` Mixin
-- `Description:` Vendorized box-shadow shortcut
+- `Description:` Vendorized box-shadow
Usage:
```scss
-.element { @include box-shadow(5px, 3px, 10px, #000); }
+.ninja-in-the-shadow { @include usb-box-shadow(5px, 3px, 10px, #000); }
```
### Flex-order
- `Type:` Mixin
-- `Description:` Vendorized flex-order shortcut
+- `Description:` Vendorized flex-order
Usage:
```scss
-.card { @include flex-order(-1); }
+.display-second { @include usb-flex-order(-1); }
```
### Gradient
- `Type:` Mixin
-- `Description:` Comfortable way of setting css gradients!
+- `Description:` Easy way for creating gradient backgrounds
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 usb-linear-gradient(#31B7D7, #EDAC7D); }
+.test-2 { @include usb-linear-gradient(to right, #E47D7D 0%, #C195D3 50%, #4FB4E8 100%); }
+.test-3 { @include usb-linear-gradient(42deg, #B58234 0%, #D2B545 50%, #D7C04D 50.01%, #FFFFFF 100%); }
```
### Animation and keyframes
- `Type:` Mixin
-- `Description:` Vendorized animation & keyframes shortcut
+- `Description:` Vendorized animation & keyframes
Usage:
```scss
-@include keyframes(slide-down) {
+@include usb-keyframes(slide-down) {
0% { opacity: 1; }
90% { opacity: 0; }
}
-.element {
-width: 100px;
-height: 100px;
-background: black;
-@include animation('slide-down 5s 3');
-}
+.animated-element { @include usb-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:
+- `Variables:`
+> 🔖 `$usb-grid-breakpoints` - array holding breakpoints sizes (for default value look below)
```scss
-$grid-breakpoints: (
+$usb-grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
@@ -147,7 +145,7 @@ width: 100px;
height: 100px;
background-color: black;
-@include media-xs() {
+@include usb-media-xs() {
background-color: white;
};
}
@@ -155,81 +153,82 @@ background-color: white;
### Opacity
- `Type:` Mixin
-- `Description:` Vendorized opacity shortcut
+- `Description:` Vendorized opacity
Usage:
```scss
-.faded-text { @include opacity(0.8); }
+.faded-text { @include usb-opacity(0.8); }
```
### Parallax background
- `Type:` Mixin
-- `Description:` Set parallax image backfround easy!
+- `Description:` Easy way to create parallax image background
Usage:
```scss
-.header { @include parallax-background('/assets/images/header2_offset.jpg'); }
+.header { @include usb-parallax-background('/assets/images/header2_offset.jpg'); }
```
### Placeholder
- `Type:` Mixin
-- `Description:` Easy way of setting placeholder stylings
+- `Description:` Easy way to set placeholder style
Usage:
```scss
-input.element {
-@include placeholder {
-font-style:italic;
-color: white;
-font-weight:100;
-}
+input.password-italic {
+@include usb-placeholder { font-style:italic; }
}
```
### Prefix or Vendorize
- `Type:` Mixin
-- `Description:` Prefix or vendorize your style attributes
+- `Description:` Prefix / vendorize without a problem
Usage:
```scss
-.icon { @include prefix(transform, rotate(45deg), webkit ms); }
+.icon { @include usb-prefix(transform, rotate(45deg), webkit ms); }
```
### Transition
- `Type:` Mixin
-- `Description:` Vendorized transitions
+- `Description:` Vendorized transition
Usage:
```scss
-.animated-div { @include transition(color .3s ease); }
+.animated-div { @include usb-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
+- `Variables:`
+> 🔖 `$usb-float-animation-speed` - animation speed (default value is `4s`)
Usage:
```scss
-div { @extend %animation-float; }
+div { @extend %usb-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
+- `Variables:`
+> 🔖 `$usb-pulse-animation-speed` - animation speed (default is `2s`)
+> 🔖 `$usb-pulse-animation-primary-color` - primary pulsation color (default value is `rgba(38, 166, 154, 0.4)`)
+> 🔖 `$usb-pulse-animation-secondary-color` - secondary pulsation color (default value is `rgba(38, 166, 154, 0)`)
Usage:
```scss
-div { @extend %pulse; }
+div { @extend %usb-animation-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
+- `Variables:`
+> 🔖 `$usb-spin-animation-speed` - animation speed (default value is `0.5s`)
Usage:
```scss
-div { @extend %spin; }
+div { @extend %usb-animation-spin; }
```
diff --git a/docs/readme.md b/docs/readme.md
index 52574e2..ebfe64d 100644
--- a/docs/readme.md
+++ b/docs/readme.md
@@ -1,13 +1,11 @@
-
-
-
+
-
+
-
+
@@ -22,31 +20,33 @@
- [Features](#features)
## About
-Sass boilerplate which is useful when starting a new web project. Includes: variables, functions, mixins, animations and other useful bits!
+*Ultimate Sass boilerplate* is useful when starting a new web project.
+
+It includes such [goodies](#features) as `functions`, `mixins`, `animations`.
## installation
* If you are using yarn run `yarn add sass-ultimate-boilerplate --save`
* If you prefer npm run `npm install sass-ultimate-boilerplate --save`
## How to use
-* In one of your sass files (preferably top of the root sass file) import sass-ultimate-boilerplate with a fallowing code:
-```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";
-```
+- In one of your *scss* files (preferably the very "root" scss file) add line to import `sass-ultimate-boilerplate`:
+ ```scss
+ @import "~sass-ultimate-boilerplate/src/usb";
+ ```
+
+- When developing encapsulated components (for example _Angular_ components) you can also import `animations`, `functions` and `mixins` separately:
+ * Import animations only:
+ ```scss
+ @import "~sass-ultimate-boilerplate/src/usb-animations";
+ ```
+ * Import functions only:
+ ```scss
+ @import "~sass-ultimate-boilerplate/src/usb-functions";
+ ```
+ * Import mixins only:
+ ```scss
+ @import "~sass-ultimate-boilerplate/src/usb-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).
diff --git a/gulpfile.js b/gulpfile.js
index e40839d..cf97062 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -5,7 +5,7 @@ const commentsToMd = require('gulp-comments-to-md')
const gulpConcat = require('gulp-concat')
gulp.task('[SASS] Compile', () => {
- return gulp.src('./src/sass-boilerplate.scss')
+ return gulp.src('./src/usb.scss')
.pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
.pipe(gulp.dest('./dist'))
})
diff --git a/package.json b/package.json
index 2692d47..fc8d6bc 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,16 @@
{
"name": "sass-ultimate-boilerplate",
- "description": "Sass boilerplate which is useful when starting a new web project. Includes: variables, functions, mixins, animations and other useful bits!",
+ "description": "Scss boilerplate which is useful when starting a new web based project.",
"main": "index.js",
- "repository": "https://github.com/SlimDogs/sass-ultimate-boilerplate.git",
- "author": "Tautvydas Derzinskas ",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/SlimDogs/sass-ultimate-boilerplate.git"
+ },
+ "author": {
+ "name": "Tautvydas Derzinskas",
+ "email": "tautvydasuk@gmail.com",
+ "url": "http://Tautvydas.info"
+ },
"license": "MIT",
"private": false,
"scripts": {
@@ -20,6 +27,14 @@
"gulp-sass-lint": "1.3.4",
"semantic-release": "8.2.0"
},
+ "keywords": [
+ "sass",
+ "boilerplate",
+ "functions",
+ "mixins",
+ "animations",
+ "scss"
+ ],
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
diff --git a/src/_animations.scss b/src/_animations.scss
deleted file mode 100644
index 84d5905..0000000
--- a/src/_animations.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * ### Animations
- * - [Float](#float)
- * - [Pulse](#pulse)
- * - [Spin](#spin)
- */
-
-@import "animations/float";
-@import "animations/pulse";
-@import "animations/spin";
\ No newline at end of file
diff --git a/src/_functions.scss b/src/_functions.scss
deleted file mode 100644
index 6c39020..0000000
--- a/src/_functions.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * ### Functions
- * - [Pixels to rem](#pixels-to-rem)
- * - [Fixed Z index](#fixed-z-index)
- */
-
-@import "functions/pxToRem";
-@import "functions/z-index";
\ No newline at end of file
diff --git a/src/_mixins.scss b/src/_mixins.scss
deleted file mode 100644
index 0b95596..0000000
--- a/src/_mixins.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * ### Mixins
- * - [Absolute](#absolute)
- * - [Blur](#blur)
- * - [Border radius](#border-radius)
- * - [Box shadow](#box-shadow)
- * - [Flex order](#flex-order)
- * - [Gradient](#gradient)
- * - [Animation and keyframes](#animation-and-keyframes)
- * - [Opacity](#opacity)
- * - [Parallax background](#parallax-background)
- * - [Placeholder](#placeholder)
- * - [Prefix or Vendorize](#prefix-or-vendorize)
- * - [Transition](#transition)
- */
-
-@import "mixins/absolute";
-@import "mixins/blur";
-@import "mixins/border-radius";
-@import "mixins/box-shadow";
-@import "mixins/flex-order";
-@import "mixins/gradient";
-@import "mixins/keyframes";
-@import "mixins/opacity";
-@import "mixins/parallax-background";
-@import "mixins/placeholder";
-@import "mixins/prefix";
-@import "mixins/transitions";
\ No newline at end of file
diff --git a/src/_usb-animations.scss b/src/_usb-animations.scss
new file mode 100644
index 0000000..c246b1a
--- /dev/null
+++ b/src/_usb-animations.scss
@@ -0,0 +1,10 @@
+/**
+ * ### Animations
+ * - [Float](#float)
+ * - [Pulse](#pulse)
+ * - [Spin](#spin)
+ */
+
+@import "animations/usb-animation-float";
+@import "animations/usb-animation-pulse";
+@import "animations/usb-animation-spin";
\ No newline at end of file
diff --git a/src/_usb-functions.scss b/src/_usb-functions.scss
new file mode 100644
index 0000000..536c094
--- /dev/null
+++ b/src/_usb-functions.scss
@@ -0,0 +1,8 @@
+/**
+ * ### Functions
+ * - [Pixels to rem](#pixels-to-rem)
+ * - [Clean z-index](#clean-z-index)
+ */
+
+@import "functions/usb-function-px-to-rem";
+@import "functions/usb-function-z-index";
\ No newline at end of file
diff --git a/src/_usb-mixins.scss b/src/_usb-mixins.scss
new file mode 100644
index 0000000..1bfb198
--- /dev/null
+++ b/src/_usb-mixins.scss
@@ -0,0 +1,28 @@
+/**
+ * ### Mixins
+ * - [Absolute](#absolute)
+ * - [Blur](#blur)
+ * - [Border radius](#border-radius)
+ * - [Box shadow](#box-shadow)
+ * - [Flex order](#flex-order)
+ * - [Gradient](#gradient)
+ * - [Animation and keyframes](#animation-and-keyframes)
+ * - [Opacity](#opacity)
+ * - [Parallax background](#parallax-background)
+ * - [Placeholder](#placeholder)
+ * - [Prefix or Vendorize](#prefix-or-vendorize)
+ * - [Transition](#transition)
+ */
+
+@import "mixins/usb-mixin-absolute";
+@import "mixins/usb-mixin-blur";
+@import "mixins/usb-mixin-border-radius";
+@import "mixins/usb-mixin-box-shadow";
+@import "mixins/usb-mixin-flex-order";
+@import "mixins/usb-mixin-gradient";
+@import "mixins/usb-mixin-keyframes";
+@import "mixins/usb-mixin-opacity";
+@import "mixins/usb-mixin-parallax-background";
+@import "mixins/usb-mixin-placeholder";
+@import "mixins/usb-mixin-prefix";
+@import "mixins/usb-mixin-transitions";
\ No newline at end of file
diff --git a/src/_variables.scss b/src/_variables.scss
deleted file mode 100644
index 55d47f5..0000000
--- a/src/_variables.scss
+++ /dev/null
@@ -1 +0,0 @@
-$sass-boilerplate-custom-variables: true;
\ No newline at end of file
diff --git a/src/animations/_float.scss b/src/animations/_float.scss
deleted file mode 100644
index 85dd61a..0000000
--- a/src/animations/_float.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * ### 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; }
- * ```
- */
-
-@keyframes float {
- 0% {
- box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3);
- transform: translatey(0px);
- }
- 50% {
- box-shadow: 0 25px 15px 0px rgba(0,0,0,0.1);
- transform: translatey(-20px);
- }
- 100% {
- box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3);
- transform: translatey(0px);
- }
-}
-
-%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;
- -o-animation: float $flaot-animation-speed ease-in-out infinite;
- animation: float $flaot-animation-speed ease-in-out infinite;
-}
\ No newline at end of file
diff --git a/src/animations/_pulse.scss b/src/animations/_pulse.scss
deleted file mode 100644
index 08c76e4..0000000
--- a/src/animations/_pulse.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * ### 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; }
- * ```
- */
-
-%pulse {
- $pulse-animation-speed: 2s !default;
-
- animation: pulse $pulse-animation-speed infinite;
-
- &:hover {
- animation: none;
- }
-}
-
-$pulse-primary-color: rgba(38, 166, 154, 0.4);
-$pulse-secondary-color: rgba(38, 166, 154, 0);
-
-@-webkit-keyframes pulse {
- 0% {
- -webkit-box-shadow: $pulse-primary-color;
- }
- 70% {
- -webkit-box-shadow: $pulse-secondary-color;
- }
- 100% {
- -webkit-box-shadow: $pulse-secondary-color;
- }
-}
-@keyframes pulse {
- 0% {
- -moz-box-shadow: 0 0 0 0 $pulse-primary-color;
- box-shadow: 0 0 0 0 $pulse-primary-color;
- }
- 70% {
- -moz-box-shadow: 0 0 0 10px $pulse-secondary-color;
- box-shadow: 0 0 0 10px $pulse-secondary-color;
- }
- 100% {
- -moz-box-shadow: 0 0 0 0 $pulse-secondary-color;
- box-shadow: 0 0 0 0 $pulse-secondary-color;
- }
-}
\ No newline at end of file
diff --git a/src/animations/_usb-animation-float.scss b/src/animations/_usb-animation-float.scss
new file mode 100644
index 0000000..c34c54e
--- /dev/null
+++ b/src/animations/_usb-animation-float.scss
@@ -0,0 +1,37 @@
+/**
+ * ### Float
+ * - `Type:` Animation
+ * - `Description:` Floating/hovering animation
+ * - `Variables:`
+ * > 🔖 `$usb-float-animation-speed` - animation speed (default value is `4s`)
+ *
+ * Usage:
+ * ```scss
+ * div { @extend %usb-animation-float; }
+ * ```
+ */
+
+@keyframes float {
+ 0% {
+ box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3);
+ transform: translatey(0px);
+ }
+ 50% {
+ box-shadow: 0 25px 15px 0px rgba(0,0,0,0.1);
+ transform: translatey(-20px);
+ }
+ 100% {
+ box-shadow: 0 5px 15px 0px rgba(0,0,0,0.3);
+ transform: translatey(0px);
+ }
+}
+
+%usb-animation-float {
+ $usb-float-animation-speed: 4s !default;
+
+ -webkit-animation: float $usb-float-animation-speed ease-in-out infinite;
+ -moz-animation: float $usb-float-animation-speed ease-in-out infinite;
+ -ms-animation: float $usb-float-animation-speed ease-in-out infinite;
+ -o-animation: float $usb-float-animation-speed ease-in-out infinite;
+ animation: float $usb-float-animation-speed ease-in-out infinite;
+}
\ No newline at end of file
diff --git a/src/animations/_usb-animation-pulse.scss b/src/animations/_usb-animation-pulse.scss
new file mode 100644
index 0000000..fa39f6a
--- /dev/null
+++ b/src/animations/_usb-animation-pulse.scss
@@ -0,0 +1,53 @@
+/**
+ * ### Pulse
+ * - `Type:` Animation
+ * - `Description:` Pulsing shadow/outline animation
+ * - `Variables:`
+ * > 🔖 `$usb-pulse-animation-speed` - animation speed (default is `2s`)
+ * > 🔖 `$usb-pulse-animation-primary-color` - primary pulsation color (default value is `rgba(38, 166, 154, 0.4)`)
+ * > 🔖 `$usb-pulse-animation-secondary-color` - secondary pulsation color (default value is `rgba(38, 166, 154, 0)`)
+ *
+ * Usage:
+ * ```scss
+ * div { @extend %usb-animation-pulse; }
+ * ```
+ */
+
+%usb-animation-pulse {
+ $usb-pulse-animation-speed: 2s !default;
+
+ animation: pulse $usb-pulse-animation-speed infinite;
+
+ &:hover {
+ animation: none;
+ }
+}
+
+$usb-pulse-animation-primary-color: rgba(38, 166, 154, 0.4) !default;
+$usb-pulse-animation-secondary-color: rgba(38, 166, 154, 0) !default;
+
+@-webkit-keyframes pulse {
+ 0% {
+ -webkit-box-shadow: $usb-pulse-animation-primary-color;
+ }
+ 70% {
+ -webkit-box-shadow: $usb-pulse-animation-secondary-color;
+ }
+ 100% {
+ -webkit-box-shadow: $usb-pulse-animation-secondary-color;
+ }
+}
+@keyframes pulse {
+ 0% {
+ -moz-box-shadow: 0 0 0 0 $usb-pulse-animation-primary-color;
+ box-shadow: 0 0 0 0 $usb-pulse-animation-primary-color;
+ }
+ 70% {
+ -moz-box-shadow: 0 0 0 10px $usb-pulse-animation-secondary-color;
+ box-shadow: 0 0 0 10px $usb-pulse-animation-secondary-color;
+ }
+ 100% {
+ -moz-box-shadow: 0 0 0 0 $usb-pulse-animation-secondary-color;
+ box-shadow: 0 0 0 0 $usb-pulse-animation-secondary-color;
+ }
+}
\ No newline at end of file
diff --git a/src/animations/_spin.scss b/src/animations/_usb-animation-spin.scss
similarity index 58%
rename from src/animations/_spin.scss
rename to src/animations/_usb-animation-spin.scss
index cdb3116..6532d65 100644
--- a/src/animations/_spin.scss
+++ b/src/animations/_usb-animation-spin.scss
@@ -2,14 +2,26 @@
* ### 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
+ * - `Variables:`
+ * > 🔖 `$usb-spin-animation-speed` - animation speed (default value is `0.5s`)
*
* Usage:
* ```scss
- * div { @extend %spin; }
+ * div { @extend %usb-animation-spin; }
* ```
*/
+%usb-animation-spin {
+ $usb-spin-animation-speed: 0.5s !default;
+
+ display: inline-block;
+ -webkit-animation: rotating $usb-spin-animation-speed linear infinite;
+ -moz-animation: rotating $usb-spin-animation-speed linear infinite;
+ -ms-animation: rotating $usb-spin-animation-speed linear infinite;
+ -o-animation: rotating $usb-spin-animation-speed linear infinite;
+ animation: rotating $usb-spin-animation-speed linear infinite;
+}
+
@-webkit-keyframes rotating {
from {
-webkit-transform: rotate(0deg);
@@ -38,14 +50,3 @@
transform: rotate(360deg);
}
}
-
-%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;
- -ms-animation: rotating $spin-animation-speed linear infinite;
- -o-animation: rotating $spin-animation-speed linear infinite;
- animation: rotating $spin-animation-speed linear infinite;
-}
diff --git a/src/functions/_pxToRem.scss b/src/functions/_pxToRem.scss
deleted file mode 100644
index 6ad6d69..0000000
--- a/src/functions/_pxToRem.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * ### 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); }
- * ```
- */
-
-@function pxToRem($size, $fn-font-base: null) {
- $base: $size;
-
- @if ($fn-font-base != null) {
- $base: $fn-font-base;
- }
- @else if ($font-base != null) {
- $base: $font-base;
- }
-
- $remSize: $size / $base * 1rem;
-
- @return #{$remSize};
-}
\ No newline at end of file
diff --git a/src/functions/_usb-function-px-to-rem.scss b/src/functions/_usb-function-px-to-rem.scss
new file mode 100644
index 0000000..7a9edf5
--- /dev/null
+++ b/src/functions/_usb-function-px-to-rem.scss
@@ -0,0 +1,27 @@
+/**
+ * ### Pixels to rem
+ * - `Type:` Function
+ * - `Description:` Convert pixels to rems
+ * - `Variables:`
+ * > 🔖`$usb-font-base` - optional variable for base font size (you can also pass second argument to the function e.g. `usb-px-to-rem(45px, 14px);`
+ *
+ * Usage:
+ * ```scss
+ * div { height: usb-px-to-rem(45px); }
+ * ```
+ */
+
+@function usb-px-to-rem($size, $fn-font-base: null) {
+ $base: $size;
+
+ @if ($fn-font-base != null) {
+ $base: $fn-font-base;
+ }
+ @else if ($usb-font-base != null) {
+ $base: $usb-font-base;
+ }
+
+ $remSize: $size / $base * 1rem;
+
+ @return #{$remSize};
+}
\ No newline at end of file
diff --git a/src/functions/_usb-function-z-index.scss b/src/functions/_usb-function-z-index.scss
new file mode 100644
index 0000000..fe20e33
--- /dev/null
+++ b/src/functions/_usb-function-z-index.scss
@@ -0,0 +1,38 @@
+/**
+ * ### Clean z index
+ * - `Type:` Function
+ * - `Description:` Helps to set `z-index` for your elements
+ * - `Variables`:
+ * > 🔖 `$usb-z-indexes` - array of specifically ordered option (for default value look below)
+ * ```scss
+ * $usb-z-indexes: (
+ * "outdated-browser",
+ * "modal",
+ * "site-header",
+ * "page-wrapper",
+ * "site-footer"
+ * );
+ * ```
+ *
+ * Usage:
+ * ```scss
+ * .header { z-index: usb-z-index('site-header'); }
+ * ```
+ */
+
+$usb-z-indexes: (
+ "outdated-browser",
+ "modal",
+ "site-header",
+ "page-wrapper",
+ "site-footer"
+) !default;
+
+@function usb-z-index($name) {
+ @if index($usb-z-indexes, $name) {
+ @return (length($usb-z-indexes) - index($usb-z-indexes, $name)) + 1;
+ } @else {
+ @warn 'There is no item "#{$name}" in this list; choose one of: #{$usb-z-indexes}';
+ @return null;
+ }
+}
\ No newline at end of file
diff --git a/src/functions/_z-index.scss b/src/functions/_z-index.scss
deleted file mode 100644
index 882da55..0000000
--- a/src/functions/_z-index.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * ### 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'); }
- * ```
- */
-
-$z-indexes: (
- "outdated-browser",
- "modal",
- "site-header",
- "page-wrapper",
- "site-footer"
-) !default;
-
-@function z($name) {
- @if index($z-indexes, $name) {
- @return (length($z-indexes) - index($z-indexes, $name)) + 1;
- } @else {
- @warn 'There is no item "#{$name}" in this list; choose one of: #{$z-indexes}';
- @return null;
- }
-}
\ No newline at end of file
diff --git a/src/mixins/_absolute.scss b/src/mixins/_absolute.scss
deleted file mode 100644
index 3085de0..0000000
--- a/src/mixins/_absolute.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * ### Absolute
- * - `Type:` Mixin
- * - `Description:` Shortcut for setting position absolute with all positions containing same value
- *
- * Usage:
- * ```scss
- * div { @include absolute(10px); }
- * ```
- */
-
-@mixin absolute($gap: 0) {
- position: absolute;
- top: $gap;
- left: $gap;
- bottom: $gap;
- right: $gap;
-}
diff --git a/src/mixins/_media.scss b/src/mixins/_media.scss
deleted file mode 100644
index a218ce3..0000000
--- a/src/mixins/_media.scss
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * ### 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
- * .element {
- * width: 100px;
- * height: 100px;
- * background-color: black;
- *
- * @include media-xs() {
- * background-color: white;
- * };
- * }
- * ```
- */
-
-$grid-breakpoints: (
- xs: 0,
- sm: 576px,
- md: 768px,
- lg: 992px,
- xl: 1200px,
- xxl: 1330px
-) !default;
-
-@mixin media-xs {
- @media (min-width: #{map-get($grid-breakpoints, xs)}) {
- @content;
- }
-}
-
-@mixin media-sm {
- @media (min-width: #{map-get($grid-breakpoints, sm)}) {
- @content;
- }
-}
-
-@mixin media-md {
- @media (min-width: #{map-get($grid-breakpoints, md)}) {
- @content;
- }
-}
-
-@mixin media-lg {
- @media (min-width: #{map-get($grid-breakpoints, lg)}) {
- @content;
- }
-}
-
-@mixin media-xl {
- @media (min-width: #{map-get($grid-breakpoints, xl)}) {
- @content;
- }
-}
-
-@mixin media-xxl {
- @media (min-width: #{map-get($grid-breakpoints, xxl)}) {
- @content;
- }
-}
-
-
-@mixin media-xs-down {
- @media (max-width: #{map-get($grid-breakpoints, xs)}) {
- @content;
- }
-}
-
-@mixin media-sm-down {
- @media (max-width: #{map-get($grid-breakpoints, sm)}) {
- @content;
- }
-}
-
-@mixin media-md-down {
- @media (max-width: #{map-get($grid-breakpoints, md)}) {
- @content;
- }
-}
-
-@mixin media-lg-down {
- @media (max-width: #{map-get($grid-breakpoints, lg)}) {
- @content;
- }
-}
-
-@mixin media-xl-down {
- @media (max-width: #{map-get($grid-breakpoints, xl)}) {
- @content;
- }
-}
-
-@mixin media-xxl-down {
- @media (max-width: #{map-get($grid-breakpoints, xxl)}) {
- @content;
- }
-}
diff --git a/src/mixins/_usb-mixin-absolute.scss b/src/mixins/_usb-mixin-absolute.scss
new file mode 100644
index 0000000..468f6e2
--- /dev/null
+++ b/src/mixins/_usb-mixin-absolute.scss
@@ -0,0 +1,18 @@
+/**
+ * ### Absolute
+ * - `Type:` Mixin
+ * - `Description:` Helps setting absolute position with same position value for all sides
+ *
+ * Usage:
+ * ```scss
+ * .absoluted-element { @include usb-absolute(10px); }
+ * ```
+ */
+
+@mixin usb-absolute($gap: 0) {
+ position: absolute;
+ top: $gap;
+ left: $gap;
+ bottom: $gap;
+ right: $gap;
+}
diff --git a/src/mixins/_blur.scss b/src/mixins/_usb-mixin-blur.scss
similarity index 77%
rename from src/mixins/_blur.scss
rename to src/mixins/_usb-mixin-blur.scss
index 2b78088..d8ff586 100644
--- a/src/mixins/_blur.scss
+++ b/src/mixins/_usb-mixin-blur.scss
@@ -5,11 +5,11 @@
*
* Usage:
* ```scss
- * .blured-text { @include blur(0.8); }
+ * .blured-text { @include usb-blur(0.8); }
* ```
*/
-@mixin blur($blur) {
+@mixin usb-blur($blur) {
-webkit-filter: blur($blur);
-moz-filter: blur($blur);
-o-filter: blur($blur);
diff --git a/src/mixins/_border-radius.scss b/src/mixins/_usb-mixin-border-radius.scss
similarity index 61%
rename from src/mixins/_border-radius.scss
rename to src/mixins/_usb-mixin-border-radius.scss
index d15f317..67cee7c 100644
--- a/src/mixins/_border-radius.scss
+++ b/src/mixins/_usb-mixin-border-radius.scss
@@ -1,15 +1,15 @@
/**
* ### Border-radius
* - `Type:` Mixin
- * - `Description:` Vendorized border-radius shortcut
+ * - `Description:` Vendorized border-radius
*
* Usage:
* ```scss
- * .card { @include border-radius(0.8); }
+ * .card { @include usb-border-radius(0.8); }
* ```
*/
-@mixin border-radius($radius) {
+@mixin usb-border-radius($radius) {
border-radius: $radius !important;
-webkit-border-radius: $radius !important;
-moz-border-radius: $radius !important;
diff --git a/src/mixins/_box-shadow.scss b/src/mixins/_usb-mixin-box-shadow.scss
similarity index 68%
rename from src/mixins/_box-shadow.scss
rename to src/mixins/_usb-mixin-box-shadow.scss
index ebb3271..f87423c 100644
--- a/src/mixins/_box-shadow.scss
+++ b/src/mixins/_usb-mixin-box-shadow.scss
@@ -1,15 +1,15 @@
/**
* ### Box-shadow
* - `Type:` Mixin
- * - `Description:` Vendorized box-shadow shortcut
+ * - `Description:` Vendorized box-shadow
*
* Usage:
* ```scss
- * .element { @include box-shadow(5px, 3px, 10px, #000); }
+ * .ninja-in-the-shadow { @include usb-box-shadow(5px, 3px, 10px, #000); }
* ```
*/
-@mixin box-shadow($top, $left, $blur, $color, $inset: false) {
+@mixin usb-box-shadow($top, $left, $blur, $color, $inset: false) {
@if $inset {
-webkit-box-shadow:inset $top $left $blur $color;
-moz-box-shadow:inset $top $left $blur $color;
diff --git a/src/mixins/_flex-order.scss b/src/mixins/_usb-mixin-flex-order.scss
similarity index 59%
rename from src/mixins/_flex-order.scss
rename to src/mixins/_usb-mixin-flex-order.scss
index 3c0b13a..211d338 100644
--- a/src/mixins/_flex-order.scss
+++ b/src/mixins/_usb-mixin-flex-order.scss
@@ -1,15 +1,15 @@
/**
* ### Flex-order
* - `Type:` Mixin
- * - `Description:` Vendorized flex-order shortcut
+ * - `Description:` Vendorized flex-order
*
* Usage:
* ```scss
- * .card { @include flex-order(-1); }
+ * .display-second { @include usb-flex-order(-1); }
* ```
*/
-@mixin flex-order($position) {
+@mixin usb-flex-order($position) {
-webkit-box-ordinal-group: 0;
-webkit-order: $position;
-ms-flex-order: $position;
diff --git a/src/mixins/_gradient.scss b/src/mixins/_usb-mixin-gradient.scss
similarity index 83%
rename from src/mixins/_gradient.scss
rename to src/mixins/_usb-mixin-gradient.scss
index bfba0a7..2dd346d 100644
--- a/src/mixins/_gradient.scss
+++ b/src/mixins/_usb-mixin-gradient.scss
@@ -1,13 +1,13 @@
/**
* ### Gradient
* - `Type:` Mixin
- * - `Description:` Comfortable way of setting css gradients!
+ * - `Description:` Easy way for creating gradient backgrounds
*
* 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 usb-linear-gradient(#31B7D7, #EDAC7D); }
+ * .test-2 { @include usb-linear-gradient(to right, #E47D7D 0%, #C195D3 50%, #4FB4E8 100%); }
+ * .test-3 { @include usb-linear-gradient(42deg, #B58234 0%, #D2B545 50%, #D7C04D 50.01%, #FFFFFF 100%); }
* ```
*/
@@ -57,7 +57,7 @@
@return 90deg - convert-angle($value, 'deg');
}
-@mixin linear-gradient($direction, $color-stops...) {
+@mixin usb-linear-gradient($direction, $color-stops...) {
@if is-direction($direction) == false {
$color-stops: ($direction, $color-stops);
$direction: 180deg;
diff --git a/src/mixins/_keyframes.scss b/src/mixins/_usb-mixin-keyframes.scss
similarity index 66%
rename from src/mixins/_keyframes.scss
rename to src/mixins/_usb-mixin-keyframes.scss
index 2ca0e77..b8dc33b 100644
--- a/src/mixins/_keyframes.scss
+++ b/src/mixins/_usb-mixin-keyframes.scss
@@ -1,25 +1,20 @@
/**
* ### Animation and keyframes
* - `Type:` Mixin
- * - `Description:` Vendorized animation & keyframes shortcut
+ * - `Description:` Vendorized animation & keyframes
*
* Usage:
* ```scss
- * @include keyframes(slide-down) {
+ * @include usb-keyframes(slide-down) {
* 0% { opacity: 1; }
* 90% { opacity: 0; }
* }
*
- * .element {
- * width: 100px;
- * height: 100px;
- * background: black;
- * @include animation('slide-down 5s 3');
- * }
+ * .animated-element { @include usb-animation('slide-down 5s 3'); }
* ```
*/
-@mixin keyframes($animation-name) {
+@mixin usb-keyframes($animation-name) {
@-webkit-keyframes #{$animation-name} {
@content;
}
@@ -37,7 +32,7 @@
}
}
-@mixin animation($str) {
+@mixin usb-animation($str) {
-webkit-animation: #{$str};
-moz-animation: #{$str};
-ms-animation: #{$str};
diff --git a/src/mixins/_usb-mixin-media.scss b/src/mixins/_usb-mixin-media.scss
new file mode 100644
index 0000000..8ea7fd7
--- /dev/null
+++ b/src/mixins/_usb-mixin-media.scss
@@ -0,0 +1,112 @@
+/**
+ * ### Media queries
+ * - `Type:` Mixin
+ * - `Description:` Easy media queries!
+ * - `Variables:`
+ * > 🔖 `$usb-grid-breakpoints` - array holding breakpoints sizes (for default value look below)
+ * ```scss
+ * $usb-grid-breakpoints: (
+ * xs: 0,
+ * sm: 576px,
+ * md: 768px,
+ * lg: 992px,
+ * xl: 1200px,
+ * xxl: 1330px
+ * );
+ * ```
+ *
+ * Usage:
+ * ```scss
+ * .element {
+ * width: 100px;
+ * height: 100px;
+ * background-color: black;
+ *
+ * @include usb-media-xs() {
+ * background-color: white;
+ * };
+ * }
+ * ```
+ */
+
+$usb-grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px,
+ xxl: 1330px
+) !default;
+
+@mixin usb-media-xs {
+ @media (min-width: #{map-get($usb-grid-breakpoints, xs)}) {
+ @content;
+ }
+}
+
+@mixin usb-media-sm {
+ @media (min-width: #{map-get($usb-grid-breakpoints, sm)}) {
+ @content;
+ }
+}
+
+@mixin usb-media-md {
+ @media (min-width: #{map-get($usb-grid-breakpoints, md)}) {
+ @content;
+ }
+}
+
+@mixin usb-media-lg {
+ @media (min-width: #{map-get($usb-grid-breakpoints, lg)}) {
+ @content;
+ }
+}
+
+@mixin usb-media-xl {
+ @media (min-width: #{map-get($usb-grid-breakpoints, xl)}) {
+ @content;
+ }
+}
+
+@mixin usb-media-xxl {
+ @media (min-width: #{map-get($usb-grid-breakpoints, xxl)}) {
+ @content;
+ }
+}
+
+
+@mixin usb-media-xs-down {
+ @media (max-width: #{map-get($usb-grid-breakpoints, xs)}) {
+ @content;
+ }
+}
+
+@mixin usb-media-sm-down {
+ @media (max-width: #{map-get($usb-grid-breakpoints, sm)}) {
+ @content;
+ }
+}
+
+@mixin usb-media-md-down {
+ @media (max-width: #{map-get($usb-grid-breakpoints, md)}) {
+ @content;
+ }
+}
+
+@mixin usb-media-lg-down {
+ @media (max-width: #{map-get($usb-grid-breakpoints, lg)}) {
+ @content;
+ }
+}
+
+@mixin usb-media-xl-down {
+ @media (max-width: #{map-get($usb-grid-breakpoints, xl)}) {
+ @content;
+ }
+}
+
+@mixin usb-media-xxl-down {
+ @media (max-width: #{map-get($usb-grid-breakpoints, xxl)}) {
+ @content;
+ }
+}
diff --git a/src/mixins/_opacity.scss b/src/mixins/_usb-mixin-opacity.scss
similarity index 59%
rename from src/mixins/_opacity.scss
rename to src/mixins/_usb-mixin-opacity.scss
index 42530ee..54ff100 100644
--- a/src/mixins/_opacity.scss
+++ b/src/mixins/_usb-mixin-opacity.scss
@@ -1,15 +1,15 @@
/**
* ### Opacity
* - `Type:` Mixin
- * - `Description:` Vendorized opacity shortcut
+ * - `Description:` Vendorized opacity
*
* Usage:
* ```scss
- * .faded-text { @include opacity(0.8); }
+ * .faded-text { @include usb-opacity(0.8); }
* ```
*/
-@mixin opacity($opacity) {
+@mixin usb-opacity($opacity) {
opacity: $opacity;
$opacity-ie: $opacity * 100;
filter: alpha(opacity=$opacity-ie); // IE8
diff --git a/src/mixins/_parallax-background.scss b/src/mixins/_usb-mixin-parallax-background.scss
similarity index 57%
rename from src/mixins/_parallax-background.scss
rename to src/mixins/_usb-mixin-parallax-background.scss
index 0c62c27..2eeceb0 100644
--- a/src/mixins/_parallax-background.scss
+++ b/src/mixins/_usb-mixin-parallax-background.scss
@@ -1,15 +1,15 @@
/**
* ### Parallax background
* - `Type:` Mixin
- * - `Description:` Set parallax image backfround easy!
+ * - `Description:` Easy way to create parallax image background
*
* Usage:
* ```scss
- * .header { @include parallax-background('/assets/images/header2_offset.jpg'); }
+ * .header { @include usb-parallax-background('/assets/images/header2_offset.jpg'); }
* ```
*/
-@mixin parallax-background($url) {
+@mixin usb-parallax-background($url) {
background-image: url($url);
background-attachment: fixed;
background-position: center top;
diff --git a/src/mixins/_placeholder.scss b/src/mixins/_usb-mixin-placeholder.scss
similarity index 51%
rename from src/mixins/_placeholder.scss
rename to src/mixins/_usb-mixin-placeholder.scss
index 6b2a5ee..a5661cf 100644
--- a/src/mixins/_placeholder.scss
+++ b/src/mixins/_usb-mixin-placeholder.scss
@@ -1,21 +1,17 @@
/**
* ### Placeholder
* - `Type:` Mixin
- * - `Description:` Easy way of setting placeholder stylings
+ * - `Description:` Easy way to set placeholder style
*
* Usage:
* ```scss
- * input.element {
- * @include placeholder {
- * font-style:italic;
- * color: white;
- * font-weight:100;
- * }
+ * input.password-italic {
+ * @include usb-placeholder { font-style:italic; }
* }
* ```
*/
-@mixin placeholder {
+@mixin usb-placeholder {
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
diff --git a/src/mixins/_prefix.scss b/src/mixins/_usb-mixin-prefix.scss
similarity index 50%
rename from src/mixins/_prefix.scss
rename to src/mixins/_usb-mixin-prefix.scss
index 21f8e72..506d951 100644
--- a/src/mixins/_prefix.scss
+++ b/src/mixins/_usb-mixin-prefix.scss
@@ -1,15 +1,15 @@
/**
* ### Prefix or Vendorize
* - `Type:` Mixin
- * - `Description:` Prefix or vendorize your style attributes
+ * - `Description:` Prefix / vendorize without a problem
*
* Usage:
* ```scss
- * .icon { @include prefix(transform, rotate(45deg), webkit ms); }
+ * .icon { @include usb-prefix(transform, rotate(45deg), webkit ms); }
* ```
*/
-@mixin prefix($property, $value, $prefixes: (webkit ms)) {
+@mixin usb-prefix($property, $value, $prefixes: (webkit ms)) {
@each $prefix in $prefixes {
#{'-' + $prefix + '-' + $property}: $value;
}
diff --git a/src/mixins/_transitions.scss b/src/mixins/_usb-mixin-transitions.scss
similarity index 59%
rename from src/mixins/_transitions.scss
rename to src/mixins/_usb-mixin-transitions.scss
index 7f73b11..68e039f 100644
--- a/src/mixins/_transitions.scss
+++ b/src/mixins/_usb-mixin-transitions.scss
@@ -1,15 +1,15 @@
/**
* ### Transition
* - `Type:` Mixin
- * - `Description:` Vendorized transitions
+ * - `Description:` Vendorized transition
*
* Usage:
* ```scss
- * .animated-div { @include transition(color .3s ease); }
+ * .animated-div { @include usb-transition(color .3s ease); }
* ```
*/
-@mixin transition($args...) {
+@mixin usb-transition($args...) {
-webkit-transition: $args;
-moz-transition: $args;
-ms-transition: $args;
diff --git a/src/sass-boilerplate.scss b/src/sass-boilerplate.scss
deleted file mode 100644
index 503c509..0000000
--- a/src/sass-boilerplate.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import "functions";
-@import "animations";
-@import "mixins";
\ No newline at end of file
diff --git a/src/usb.scss b/src/usb.scss
new file mode 100644
index 0000000..03ca831
--- /dev/null
+++ b/src/usb.scss
@@ -0,0 +1,3 @@
+@import "usb-functions";
+@import "usb-animations";
+@import "usb-mixins";
\ No newline at end of file