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

Your projects