Skip to content

RusinovAnton/scss-mixins-collection

Repository files navigation

SCSS-MIXINS-COLLECTION

npm Build Status

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)