SCSS-MIXINS-COLLECTION

Collection of handy scss mixins.

INSTALLATION

You can install it via npm:

npm install --save-dev scss-mixins-collection

or via Bower if you prefer so:

bower install scss-mixins-collection

Then just @import '[node_modules || bower_components]/scss-mixins-collection/_index.scss' file into your scss
???
PROFIT

LICENSE

LICENSE MIT
See LICENSE.md

CHANGELOG

WHATS INSIDE

Content mixin that apply style for any button.

Mixins to make arrows with border:

arrow-top($size, $width, $color)
arrow-bottom($size, $width, $color)
arrow-left($size, $width, $color)
arrow-right($size, $width, $color)
arrow-top-left($size, $width, $color)
arrow-top-right($size, $width, $color)
arrow-bottom-left($size, $width, $color)
arrow-bottom-right($size, $width, $color)

block-center

block-center - centers block with margin: auto;

Applying custom paddings for bootstrap columns along with row's margin changes:

bs-gutter($gutter-width)

clearfix - bootstrap's clearfix hack;

Contains mixins to make block that cut text adding ellipsis:

ellipsis
ellipsis-multiline($font-size, $line-height, $lines-to-show)
ellipsis-multiline-simple($height, $lines-to-show)
ellipsis-lines($lines-to-show)

fill-parent

fill-parent($position: absolute, $zindex: 0) - fill given element in the parents block;

fit-image - fit image with various aspect ratio into fixed size wrapper;

PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
Indrek Paas @indrekpaas
Inspired by Mike Riethmuller's Precise control over responsive typography
http://madebymike.com.au/writing/precise-control-responsive-typography/

fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value)

if-childrens

Applying styles to an element or to element and siblings if provided
if there are given number of siblings:

if-childrens($number-of-children, $sibling-selector)

inline-list

inline-list - styles for list that have li { inline-block }

inline-list

inline-list - apply this mixin for ol/ul to make li stack horizontally;

placeholder

Applying styles for input's placeholders:

placeholder

pseudo-block

pseudo-block - making blocks with :before, :after pseudo elements;
pseudo-absolute - alias for pseudo-block(absolute);
pseudo-inline - making inline-block with pseudo elements;
before-block, before-inline, before-absolute, after-block, after-inline, after-absolute, - mixins with block content for previous mixins in this file;

reset-list - reset for default ol/ul styles;

reset-link - reset for default links styles;

reset-text - reset for default text styles;

row($margin) - adding clearfix + negative margin;

row-inline($margin) - makes columns to have display inline-block

size($width, $height: $width) - applies width, height;

square - making block with same width, height;

sr-only - makes block available for screen readers only

Handy margin/padding mixins:

margin-h($margin-right, $margin-left: $margin-right)
margin-v($margin-top, $margin-bottom: $margin-top)
padding-h($padding-right, $padding-left: $padding-right)
padding-v($padding-top, $padding-bottom: $padding-top)

take-space($margin) - Mixin for Absolute|Fixed block to fill parents' block

text-hide - Mixin that hides text

Set of mixins to make triangle with css border property:

triangle-top($width, $height, $color)
triangle-bottom($width, $height, $color)
triangle-left($width, $height, $color)
triangle-right($width, $height, $color)
triangle-top-left($size, $color)
triangle-top-right($size, $color)
triangle-bottom-left($size, $color)
triangle-bottom-right($size, $color)