IsometricSass

Isomatric Sass Library

Source / Download
Created by Morgan Caron

Context

2D

2d Isometric

HTML

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

Sass

@import isometric

Grid

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

HTML

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

Sass

@import isometric

$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 isometric

$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 isometric

$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 isometric

$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 isometric

$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 isometric

$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 isometric

$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 isometric

$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 isometric

$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 isometric

$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