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

See releases

WHATS INSIDE

any-button

Content mixin that apply style for any button.

arrow

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;

bs-gutter

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

• bs-gutter($gutter-width)

clearfix

• clearfix - bootstrap's clearfix hack;

ellipsis

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 - fit image with various aspect ratio into fixed size wrapper;

fluid-type

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-list - reset for default ol/ul styles;

reset-link

• reset-link - reset for default links styles;

reset-text

• reset-text - reset for default text styles;

row

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

row-inline

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

size

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

square

• square - making block with same width, height;

sr-only

• sr-only - makes block available for screen readers only

spacing

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

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

text-hide

• text-hide - Mixin that hides text

triangle

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)