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

• _initializations.scss
• My additional defaults after normalization

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

• Initial gutters

Fonts

• Custom font-family mixin: @fntDefault

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