TautvydasDerzinskas / sass-ultimate-boilerplate

Sass boilerplate which is useful when starting a new web project. Includes: variables, functions, mixins, animations and other useful bits!

Table of content

• About
• Installation
• How to use?
• License
• Features

About

Ultimate Sass boilerplate is useful when starting a new web project.

It includes such goodies 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 scss files (preferably the very "root" scss file) add line to import sass-ultimate-boilerplate:

  @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:

    @import "~sass-ultimate-boilerplate/src/usb-animations";

  • Import functions only:

    @import "~sass-ultimate-boilerplate/src/usb-functions";

  • Import mixins only:

    @import "~sass-ultimate-boilerplate/src/usb-mixins";

License

The repository code is open-sourced software licensed under the MIT license.

Features

Animations

• Float
• Pulse
• Spin

Functions

• Pixels to rem
• Clean z-index

Mixins

• Absolute
• Blur
• Border radius
• Box shadow
• Flex order
• Gradient
• Animation and keyframes
• Media queries
• Opacity
• Parallax background
• Placeholder
• Prefix or Vendorize
• Transition

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:

div { height: usb-px-to-rem(45px); }

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)

$usb-z-indexes: (
"outdated-browser",
"modal",
"site-header",
"page-wrapper",
"site-footer"
);

Usage:

.header { z-index: usb-z-index('site-header'); }

Absolute

• Type: Mixin
• Description: Helps setting absolute position with same position value for all sides

Usage:

.absoluted-element { @include usb-absolute(10px); }

Blur

• Type: Mixin
• Description: Vendorized blur

Usage:

.blured-text { @include usb-blur(0.8); }

Border-radius

• Type: Mixin
• Description: Vendorized border-radius

Usage:

.card { @include usb-border-radius(0.8); }

Box-shadow

• Type: Mixin
• Description: Vendorized box-shadow

Usage:

.ninja-in-the-shadow { @include usb-box-shadow(5px, 3px, 10px, #000); }

Flex-order

• Type: Mixin
• Description: Vendorized flex-order

Usage:

.display-second { @include usb-flex-order(-1); }

Gradient

• Type: Mixin
• Description: Easy way for creating gradient backgrounds

Usage:

.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

Usage:

@include usb-keyframes(slide-down) {
0% { opacity: 1; }
90% { opacity: 0; }
}

.animated-element { @include usb-animation('slide-down 5s 3'); }

Media queries

• Type: Mixin
• Description: Easy media queries!
• Variables:

🔖 $usb-grid-breakpoints - array holding breakpoints sizes (for default value look below)

$usb-grid-breakpoints: ( xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1330px);

Usage:

.element {
@include usb-media-xs() { background-color: white; };
}

Opacity

• Type: Mixin
• Description: Vendorized opacity

Usage:

.faded-text { @include usb-opacity(0.8); }

Parallax background

• Type: Mixin
• Description: Easy way to create parallax image background

Usage:

.header { @include usb-parallax-background('/assets/images/header2_offset.jpg'); }

Placeholder

• Type: Mixin
• Description: Easy way to set placeholder style

Usage:

input.password-italic {
@include usb-placeholder { font-style:italic; }
}

Prefix or Vendorize

• Type: Mixin
• Description: Prefix / vendorize without a problem

Usage:

.icon { @include usb-prefix(transform, rotate(45deg), webkit ms); }

Transition

• Type: Mixin
• Description: Vendorized transition

Usage:

.animated-div { @include usb-transition(color .3s ease); }

Float

• Type: Animation
• Description: Floating/hovering animation
• Variables:

🔖 $usb-float-animation-speed - animation speed (default value is 4s)

Usage:

div { @extend %usb-animation-float; }

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:

div { @extend %usb-animation-pulse; }

Spin

• Type: Animation
• Description: 360deg infinite spinning animation
• Variables:

🔖 $usb-spin-animation-speed - animation speed (default value is 0.5s)

Usage:

div { @extend %usb-animation-spin; }