Skip to content

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

License

Notifications You must be signed in to change notification settings

TautvydasDerzinskas/sass-ultimate-boilerplate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

43 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

Sass ultimate boilerplate

npm version Latest CI build status Semantic release Greenkeeper Commitizen friendly NPM Downloads MIT License

Table of content

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

Functions

Mixins

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; }

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published