turretcss

Mixins

turretcsss set of mixins for simple & maintainable CSS.

Contents

Transition

Transition

Apply a transition property for all at --speed with ease-in-out

@apply --transition;

Transition Fast

Apply a transition property for all at --speed-fast with ease-in-out

@apply --transition-fast;

Transition Medium

Apply a transition property for all at --speed-medium with ease-in-out

@apply --transition-medium;

Transition Slow

Apply a transition property for all at --speed-slow with ease-in-out

@apply --transition-slow;

Clearfix

Clearfix mixin used to clear floats

@apply --clearfix;

Center

Absolutely center an element from the top and left by 50% using .translate(-50%, -50%); to center based on element size

@apply --center;

Cover

Absolutely cover parent element

@apply --cover;

Text Hide

Utility mixin for .hide-text;

@apply --text-hide;

Hide Visually

Hide but keep in DOM for Screen Readers

@apply --hide-visually;

Truncate

Truncate text with ellipsis based on containing element width

@apply --truncate;

Font Smoothing

Set the font smoothing properties for browsers that support font-smoothing, by default turretcss sets --font-smoothing-antialiased on the <html> root tag, this can be overwritten with the --font-smoothing-auto mixin.

@apply --font-smoothing-antialiased;
@apply --font-smoothing-auto;

Overflow Scroll

Set overflow to scroll with -webkit-overflow-scrolling: touch; for Mobile Safari

@apply --overflow-scroll;

Overflow Y Scroll

Set overflow to scroll on the Y-axis with -webkit-overflow-scrolling: touch; for Mobile Safari

@apply --overflow-y-scroll;

Overflow X Scroll

Set overflow to scroll on the X-axis with -webkit-overflow-scrolling: touch; for Mobile Safari

@apply --overflow-x-scroll;

Display Title

Applies .display-title typographic styles.

@apply --display-title;

Big

Applies .big typographic styles.

@apply --big;

Small Caps

Applies .small-caps typographic styles.

@apply --small-caps;

Lead

Applies .lead typographic styles.

@apply --lead;