Da Vinci CSS

Creating shapes and drawings with CSS.

Pixel Art demo

Sheldon J. Plankton - View demo

Summary

• Why?
• How to install?
• Usage
  • Basic shapes
    • rectangle
    • circle
    • oval
    • triangle
  • Pixel Art
    • markup
    • grid
    • origin
    • pixels
    • line
    • lineX
    • lineY
  • Images
    • img
  • Edit
    • position
    • flip vertical
    • flip horizontal
    • clone
    • shadow
• Versioning
• Contributing
• History
• License

Why?

Because it's fun.

How to install?

Note: To use the framework, you'll need to compile your style with the Stylus preprocessor using NodeJS, for more information see NodeJS and Stylus.

Import the library.

@import "da-vinci"

Done ;)

Usage

Basic shapes

rectangle

.element
  rect(100px, 50px, #eb02dd) /* width, height, color (default #eb02dd) */

circle

.element
  circ(50px, #eb02dd) /* radius, color (default = #eb02dd) */

oval

.element
  oval(100px, 50px, #eb02dd) /* width, height, color (default = #eb02dd) */

triangle

.element
  tri(100px, 50px, 50px, #eb02dd) /* top, right, left (default = #eb02dd) */

Pixel art

markup

<div class="canvas">
  <div class="art"></div>
</div>

grid

.canvas {
  grid(30px, 4, #000) /* cell size, grid size (default = 4), stroke color (default = #000) */
}

origin

.art {
  origin(1, 1, 30px, #000) /* row, col, displacement, color (default = #000) */
}

pixels

.art {
  origin(1, 1, 30px, #000)
  box-shadow: pixel(2, 2, 30px, #000); /* row, col, displacement, color (default = #000) */
}

Tip: Create variables and use p( ) > pixel( ).

.art {
  a = 30px
  origin(1, 1, a)
  box-shadow: p(2, 2, a);
}

line

.art {
  a = 30px
  origin(1, 1, a)
  box-shadow: line(2..6, a, #eb02dd); /* start..end, displacement, color (default = #000) */
}

lineX

.art {
  a = 30px
  origin(1, 1, a)
  box-shadow: lineX(2..6, a, #eb02dd); /* start..end, displacement, color (default = #000) */
}

lineY

.art {
  a = 30px
  origin(1, 1, a)
  box-shadow: lineY(2..6, a, #eb02dd); /* start..end, displacement, color (default = #000) */
}

Working all together

.canvas {
  grid(30px, 6, #ccc)
}

.art {
  a = 30px
  origin(1, 1, a, #eb02dd)
  box-shadow:
    pixel(3, 4, a, #eb02dd),
    line(2..6, a, purple),
    lineY(2..6, a, pink),
    lineX(2..6, a, pink);
}

Images

img

.picture
  img("magic.gif", 200px, 200px) /* url, width, height */

Edit

position

.element
  rect(100px, 50px, #eb02dd)
  pos(10px, 10px, 1) /* x, y, layer(default = 1) */

flip vertical

.picture
  img("magic.gif", 200px, 200px)
  flip(vertical) /* vertical or horizontal (default = horizontal) */

flip horizontal

.picture
  img("magic.gif", 200px, 200px)
  flip(horizontal) /* vertical or horizontal (default = horizontal) */

clone

.element
  rect(100px, 100px, #eb02dd)
  clone(110px, 0, #ccc) /* x, y, color (default = #eb02dd) */

shadow

.picture
  img("unicorn.png", 200px, 200px)
  shadow(10px, 10px, 5px, #000) /*X, Y, dissipation, color (default = #000) */

Versioning

To keep better organization of releases we follow the Semantic Versioning 2.0.0 guidelines.

Contributing

Find on our roadmap the next steps of the project ;)
Want to contribute? Follow these recommendations.

History

See Releases for detailed changelog.

License

MIT License © Afonso Pacifer