▨ Shima is a quick, painless, javascript-free grid overlay. Helpful for vertical rhythm, grid systems, icon designing and more. ▨

▨ Getting Started

Hi!

Shima helps you to render custom lovely grids 💖. You can use Shima as is without installing anything! Refer to the following for more details:

Do you want to display a grid with gutters? Simply add a line of CSS and you're done:

.myAwesomeDiv {
background-image: url("https://shima-grid.com/img/128x4x32/128x4x0");
}

▨ Create your grid

https://shima-grid.com/img/128x4x-32/128x4x0

 

X axis

Y axis

Spacing

Divisions

Gutter

Grid color

Div color

Grid type

.myAwesomeDiv {
background-image: url("https://shima-grid.com/img/128x4x-32/128x4x0");
}

▨ Examples

https://shima-grid.com/img/0x0x0/32x0x0

 

X axis

Y axis

Spacing

Divisions

Gutter

Grid color

Div color

Grid type

Vertical Rhythm

Cupcake ipsum dolor sit amet. Fruitcake powder ice cream. Tart macaroon marzipan chupa chups macaroon sweet roll cookie. Apple pie gummi bears chupa chups halvah pie cookie jelly. Muffin cake danish caramels jujubes. Candy I love biscuit.

Croissant gummi bears bonbon I love cookie muffin. Jujubes chocolate jelly fruitcake cheesecake jelly-o I love. Gingerbread fruitcake marshmallow biscuit I love. Tiramisu candy liquorice. Brownie carrot cake bear claw chupa chups powder.

.myAwesomeDiv {
background-image: url("https://shima-grid.com/img/0x0x0/32x0x0");
}

▨ API

General Configuration

    https://shima-grid.com/img/x axis config / <y axis config> / <type>
  • x axis config

    Configuration for the X axis.
    Mandatory.
    See definition

  • y axis config

    Configuration for the Y axis.
    Optional : If not provided, the x-axis and y-axis will have the same configuration.
    See definition

  • type

    Grid type.
    Optional : If not provided, the grid type will be equal to standard.
    Values : standard / oblique / isometric / isometric-2-1 / trimetric-left / trimetric-right.

Axis configuration

    https://shima-grid.com/img/grid x division x gutter x <grid color> x <div color>
  • grid

    Set the spacing of the main grid.
    Mandatory.

  • division

    Number of divisions per grid.
    Mandatory.

  • gutter

    Spacing between each grid (you can set a negative value to start the grid by a gutter).
    Mandatory.

  • grid color

    Set the color of the grid lines.
    Optional.
    See definition

  • div color

    Set the color of the subdivision lines.
    Optional.
    See definition

Color configuration

    hexa or r-g-b - <a>
  • hexa

    Hexadecimal color (without #).
    Mandatory.

  • r-g-b

    RGB color
    Mandatory.

  • a

    Alpha channel.
    Optional (if not provided, a will be equal to 1).

  • Examples

    • hex

      FF00FF090210

    • rgb

      255-0-2559-2-16

    • rgba

      255-0-255-19-2-16-.5