SASS-helpers
My goto SASS helpers when I am starting a project. NOTE: This is a new work in progress.
Table of Contents
Normalize
- normalize.css
- A CSS reset by @necolas
- NOTES:
box-sizing
is not set toborder-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 toboder-box
- horizontal rule
height
set to1px
Font Initializations
- base
font-size
set to10px
for simple rem calculations - default
font-size
set to1.6rem
(16px
) - global
-webkit-font-smoothing
set toantialiased;
- headings
h1
toh6
get initialfont-size
andmargin
rules
Initial Measurements
Breakpoints
- Initial widths
- somewhat based on Google Chrome's inspector device toolbar default breakpoints
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) orinfinite
animation-direction
:normal
,reverse
,alternate
,alternate-reverse