Skip to content

farhanjiwani/SASS-helpers

Repository files navigation

SASS-helpers

My goto SASS helpers when I am starting a project. NOTE: This is a new work in progress.

Table of Contents

  1. Normalize
    1. Custom Resets
  2. Initial Measurements
    1. Breakpoints
    2. Gutters
  3. Fonts
    1. Custom font-family mixin
  4. Accessibility
    1. sr-only
  5. Animation
    1. Easing
    2. Keyframe Animation Template

Normalize

  • normalize.css
  • A CSS reset by @necolas
  • NOTES:
    • box-sizing is not set to border-box for all elements by default.
    • Base font size not set

Custom Resets

Element Intializations

  • global box-sizing set to boder-box
  • horizontal rule height set to 1px

Font Initializations

  • base font-size set to 10px for simple rem calculations
  • default font-size set to 1.6rem (16px)
  • global -webkit-font-smoothing set to antialiased;
  • headings h1 to h6 get initial font-size and margin rules

Initial Measurements

Breakpoints

  • Initial widths
  • somewhat based on Google Chrome's inspector device toolbar default breakpoints

Gutters

Fonts

Accessibility

.sr-only

  • @mixin sr-only
  • Taken from "Improved .sr-only" by @ffoodd and made into mixin
  • Class name previously used in Bootstrap 3
/* Example Usage: */
.sr-only,
.my-selector {
    @include sr-only;
}

Animation

Easing

My Default Easing:

$defaultEasing: 0.3s ease-in-out 0s;

Keyframe Animation Template

Example 1 - From-To

.my-animation-class {
    // shorthand:
    //   easing | duration | delay | iterations | direction | name
    animation: linear 1.25s 2s 6 alternate pulsate;
}

@keyframes pulsate { 
    from { 
        opacity: 1;
    } 
    
    to { 
        opacity: 0;
    }  
}
  • animation-iteration-count: postive number (including float) or infinite
  • animation-direction: normal, reverse, alternate, alternate-reverse

Releases

No releases published

Packages

No packages published

Languages