Collection of handy scss mixins.
- You can install it via npm:
npm install --save-dev scss-mixins-collectionor 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 MIT
See LICENSE.md
See releases
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 - 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($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)
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 - styles for list that have
li { inline-block }
- inline-list - apply this mixin for ol/ul to make li stack horizontally;
Applying styles for input's placeholders:
- placeholder
- 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)
