IsometricSass

Isometric Sass Library

Source / Download
Created by Morgan Caron

Installation

IsometricSass is available on NPM:

npm install --save-dev isometricsass

Context

2D

2d Isometric

HTML

<div class="isometric-container">
	<div class="isometric">
		...
	</div>
</div>

Sass

@import isometricsass

Grid

+grid($size, $lineweight, $color)

HTML

<div class="isometric-container">
	<div class="isometric">
		<div class="grid"></div>
	</div>
</div>

Sass

@import isometricsass

$size: 1rem

.grid
	+grid($size, 1%, mediumorchid)
	width: $size*5
	height: $size*5
If the grid is too small, it is possible that the lines are too thin to be visible. In this case, increase the thickness of the lines.

Plane

+plane($width, $height, $color)

HTML

<div class="isometric-container">
    <div class="isometric">
        <div class="plane"></div>
    </div>
</div>

Sass

@import isometricsass

$size: 1rem

.plane
    +plane($size, $size, darkcyan)

Border

+border($size, $color)

HTML

<div class="isometric-container">
    <div class="isometric">
        <div class="plane"></div>
    </div>
</div>

Sass

@import isometricsass

$size: 1rem

.plane
    +plane($size, $size, darkcyan)
    +border(2px, white)

Edge

+edge($depth, $color)

HTML

<div class="isometric-container">
    <div class="isometric">
        <div class="plane"></div>
    </div>
</div>

Sass

@import isometricsass

$size: 1rem

.plane
    +plane($size, $size, darkcyan)
    +edge(2px, darkcyan)
+tile(width, height, depth, color)
is equivalent to
+plane(width, height, color)
+edge(depth, color)

Shadow

+shadow($distance, $spacingX, $spacingY)

HTML

<div class="isometric-container">
    <div class="isometric">
        <div class="plane"></div>
    </div>
</div>

Sass

@import isometricsass

$size: 1rem

.plane
    +plane($size, $size, darkcyan)
    +shadow($size, $size*.1, $size*.3)

Cube

+cube($width, $height, $depth, $color)

HTML

<div class="isometric-container">
    <div class="isometric">
        <div class="cube">
            <div></div><div></div><div></div><div></div><div></div><div></div>
        </div>
    </div>
</div>

Sass

@import isometricsass

$size: 1rem

.cube
    +cube($size, $size, $size, darkcyan)
Each side is a plane. You can modify the sides as you want (border, border-radius, background, content, etc)
Don't forget the <div> elements of each of the 6 sides of the cube

Position

top: $X
left: $Y
transform: translateZ($Z)

HTML

<div class="isometric-container">
    <div class="isometric">
        <div class="plane"></div>
    </div>
</div>

Sass

@import isometricsass

$size: 1rem

.plane
    +plane($size, $size, darkcyan)
    top: $size
    left: $size*2
    transform: translateZ($size*.5)
Each object is positioned according to its parent

Animation

+animation($name, $attribute, $from, $to, $delay, $duration, $options)

HTML

<div class="isometric-container">
    <div class="isometric">
        <div class="plane"></div>
    </div>
</div>

Sass

@import isometricsass

$size: 1rem

.plane
    +animation(planeAnimation, transform, translateZ(0), translateZ($size), 0s, 2s, alternate infinite)
+move($name, $from, $to, $delay, $duration, $options)
is equivalent to
+animation($name, transform, $from, $to, $delay, $duration, $options)
There can only be one animation per element at a time

Move Shadow

+moveShadow($name, $from, $to, $spacingX, $spacingY, $delay, $duration, $options)

HTML

<div class="isometric-container">
    <div class="isometric">
        <div class="plane"></div>
    </div>
</div>

Sass

@import isometricsass

$size: 1rem

.plane
    +moveShadow(planeShadow, 0, $size, .2, .4, 0s, 2s, alternate infinite)

Rotate

+rotate($name, $from, $to, $delay, $duration)

HTML

<div class="isometric-container">
    <div class="isometric">
        <div class="plane"></div>
    </div>
</div>

Sass

@import isometricsass

$size: 1rem

.plane
    +rotate(planeRotate, 0deg, 360deg, 0s, 7s)

Final Example

|

IsometricSass

Press F5 to launch the animation

This documentation shows how to use isometry tools on HTML tags. It should be noted that it is also usable on SVG elements.

Your projects