afonsopacifer / da-vinci-css

:art: Creating shapes and drawings with CSS.

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

da-vinci-css's Issues

Roadmap

Backlog

• texts - Core feature
• rotate - Core feature
• gradient - Core feature
• background position e repeat - Core feature
• Autoprefixer - Build update
• Website #2 - Docs
• Refactor all variables and arguments names - Core update

Doing

Done

Tasks for Release 0.4.0

• Regression testing - Test
  • Create files for test - Test
  • Create Grunt tasks for files - Test
  • Add BackstopJS - Test
  • package.json (Add dependencies and configure npm task) - Test
  • Configure backstop.json - Test
  • Add autoprefixer for phantonJS webkit support - Build update
  • Document all steps for testing - Docs
• travis CI (lint) - Test
• travis CI badge
• Describe the new functions - Docs
  • Edit
    • shadow() (drop-shadow > box-shadow)
• Create all functions - Core
  • Edit
    • shadow() (drop-shadow > box-shadow)
• Lint and refactor - Core
• Write regression tests - Core
• Add images and refactor - Docs
• Fix flip anchor and class name (.picture > .element) in readme - Docs
• Add markup (commented) in plankton demo.
• Update version and release in all files

Tasks for Release 0.3.0

Pixel Art - Enhancement

• Describe the new functions - Docs
  • origin()
  • line()
  • lineX()
  • lineY()
• Create all functions - Core
  • origin()
  • line()
  • lineX()
  • lineY()
• Update grid() (add position: relative;) - Core
• Lint and refactor - Core
• Add images and refactor - Docs

Images - New feature

• Describe the new functions - Docs
• Create img function - Core
• Lint and refactor - Core
• Add images and refactor - Docs
• Update version and release in all files

Tasks for Release 0.2.0 - Pixel Art support

• Describe the new functions - Docs
• Create pixels and p function - Core
• Create grid function - Core
• Lint and refactor - Core
• Create a DEMO
• Add images and refactor - Docs
• Update version and release in all files

Tasks for Release 0.1.0

• Basic Files
• Basic Docs
• Create a da-vinci.styl file (follow the basic docs)
• Update Basic Docs (add px / elemento > element / add default values)
• Create a demo page
• Add image exemples in readme.md
• Add build process with Grunt ot Gulp
  • Compile
  • Lint
  • Live reload

Website

Create path to abstract pixel sequence

For example:

.art {
  a = 10px
  rect(a, a)
  box-shadow:
    p(2, 2, a),
    p(3, 3, a),
    p(4, 4, a);
}

result in:

.art {
  a = 10px
  rect(a, a)
  box-shadow:
    path(2, 4, 2, 4, a); //p(x1, y1, x2, y2, a)
}