awsm.css

It makes your HTML beautiful

There are some plugins that I advice you to use with awsm.css.

Fotorama

It's simple and powerful jQuery gallery by Artem Polikarpov. Homepage of the plugin — fotorama.io. Demo:

Photos by Andrey Okonetchnikov.

highlight.js & prism.js

The best syntax highlight libraries. First of them has more themes, but sometimes second works better. Which one to use? Up to you.

Homepages: highlightjs.org & prismjs.com. Demo of prism.js you can see below.

/* Create a border-triangle 
 * params:
 * 		$direction: [top, right, bottom, left]
 *		$size
 * 		$color
 * 		$type: `display` value
 */
@mixin triangle($direction, $size, $color, $mode: 'normal', $type: inline-block) {
	display: $type;
	$direction-map: (
		'top': 'bottom',
		'right': 'left',
		'bottom': 'top',
		'left': 'right'
	);
	$opposite-direction: map-get($direction-map, $direction);
	
	@each $d in top right bottom left {
		@if $d == $opposite-direction {
			border-#{$d}: $size solid $color;
		}
		@else {
			@if $d != $direction {
				@if $mode == 'normal' {
					border-#{$d}: $size solid transparent;	
				}

				@if $mode == 'wide' {
					border-#{$d}: $size * 1.5 solid transparent;	
				}
			}
		}
	}
}