smc

scss-mixins-collection

Collection of handy scss mixins

Showing:

Popularity

Downloads/wk

17

GitHub Stars

24

Maintenance

Last Commit

1yr ago

Contributors

2

Package

Dependencies

0

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

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)

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial