vueture-blocklevel-sass-utils v1.0.3

vueture-blocklevel-sass-utils

A Blocklevel Vueture SASS plugin, contains mixins, functions and extends for faster templating.

Installation

Install the plugin by NPM:

$ npm install vueture-blocklevel-sass-utils --save

Open src/assets/sass/app.scss and import jsture-blocklevel-sass-utils

@import '~vueture-blocklevel-sass-utils';

Functions

See sass docs for more information about functions.

Ease

CSS easings based on ceaser.

Usage

.my-ease-element {
  transition: background 200ms ease('easeInOut');
}

Easings

zIndex

Better z-index managing. Create a list of element names and get the z-index based on elements name. Returns a number.

Usage:

@layout: content, popup;

.content {
  z-index: zindex($layout, content); // z-index: 1;
}

.popup {
  z-index: zindex($layout, popup); // z-index: 2;
}

Parameters:

Mixins

See sass docs for more information about mixins.

Aspect ratio

Maintain Aspect Ratio Mixin. The mixin assumes you'll be nesting an element with the class of content inside your initial block.

Usage

.sixteen-nine {
  @include aspect-ratio(16, 9);
}

<div class="sixteen-nine">
  <div class="content">16:9</div>
</div>

Parameters

Font face

Font face helper. Be sure to have the following font files: eot, woff, ttf, svg. Font can be generated at https://www.fontsquirrel.com/tools/webfont-generator

Usage

// Name, folder, file
@include font-face('QuatroBold', 'quatro', 'quatro-bold');

Paramenters

Placeholder

Cross-browser :placeholder styles. Automatically adds all needed vendor prefixes.

Example

input {
  width: 200px;

  @include placeholder() {
    font-style: italic;
    color: #B4D433;
  }
}

Extends

transform-center

Absolute element. Positioned in center horizontally and vertically.

.my-element {
  @extend %transform-center;
}

// Renders:
.my-element {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

force-hardware

Sets transform and backface-visiblity which forces hardware acceleration.

.my-element {
  @extend %force-hardware;
}

// Renders:
.my-element {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000;
}

clearfix

Clearfix, For clearing floats like a boss. See http://h5bp.com/q

Style guide: utils.extends.clearfix

.my-element {
  @extend %clearfix;
}

// Renders:
.my-element {
	*zoom: 1;

	&:before,
	&:after {
		display: table;
		content: '';
		line-height: 0;
	}

	&:after {
		clear: both;
	}
}

reset-bmp

Resets border, margin and padding

.my-element {
  @extend %reset-bmp;
}

// Renders:
.my-element {
	border: 0;
	padding: 0;
	margin: 0;
}

reset-list

Reset ul element. Removes list-style and extends %reset-bmp.

ul {
  @extend %reset-list;
}

ul {
  border: 0;
  margin: 0;
  padding: 0;
	list-style: none;
}

reset-input

Remove all default browser input styles.

input {
  @extend %reset-input;
}

// Renders:
input {
	display: inline-block;
	border: 0;
	padding: 0;
	background: none;
	-webkit-appearance: none;

	&:focus { outline: 0; }

	&::-moz-focus-inner,
	&[type=reset]::-moz-focus-inner,
	&[type=button]::-moz-focus-inner,
	&[type=submit]::-moz-focus-inner,
	&::-moz-focus-inner,
	&[type=file] > [type=button]::-moz-focus-inner {
		border: 0;
		padding: 0;
	}
}

unstyled-link

A link that looks and acts like the text it is contained within.

a {
  @extend %unstyled-link;
}

// Renders:
a {
	color: inherit;
	text-decoration: inherit;
	cursor: inherit;

	&:active,
	&:focus {
		outline: none;
	}
}