Welcome to design’s documentation!

Contents:

Design

Design is a command-line tool that generates various common web design elements: borders, patterns, textures, gradients, etc.

Installation

At the command line:

$ easy_install design

Or, if you have virtualenvwrapper installed:

$ mkvirtualenv design
$ pip install design

Usage

Still Pre-Alpha

This isn’t ready to use yet, but you could imagine something like this:

from colors import rgb
from design import buttons

buttons.make_arrow_button(
    width=120,
    height=30,
    color=rgb(255, 129, 190),
    push_depth=8,
    glow_on_hover=True
)

The above would result in these files being generated:

  • img/arrow.png
  • css/arrow.css (Or maybe a Compass file. Haven’t decided yet.)
  • js/arrow.js
  • arrow.html (Demo of the arrow in action.)

Ideas/feedback? File an issue!

Contributing

Contributions are welcome!

Submitting Feedback

The best way to send feedback is to file an issue at https://github.com/audreyr/design/issues.

If you are reporting a bug, please include:

  • Your operating system name and version.
  • Any details about your local setup that might be helpful in troubleshooting.
  • Detailed steps to reproduce the bug.

If you are proposing a feature:

  • Explain in detail how it would work.
  • Keep the scope as narrow as possible, to make it easier to implement.
  • Remember that this is a volunteer-driven project, and that contributions are welcome :)

Getting Started

Here’s how to set up design for local development.

  1. Fork the design repo on GitHub.

  2. Clone your fork locally:

    $ git clone git@github.com:your_name_here/design.git
    
  3. Install your local copy into a virtualenv. Assuming you have virtualenvwrapper installed, this is how you set up your fork for local development:

    $ mkvirtualenv design
    $ cd design/
    $ python setup.py develop
    
  4. Create a branch for local development:

    $ git checkout -b name-of-your-bugfix-or-feature
    

Now you can make your changes locally.

  1. When you’re done making changes, check that your changes pass the tests and flake8:

    $ python -m unittest discover tests
    $ flake8 design
    $ flake8 tests
    $ flake8 examples
    
  2. Commit your changes and push your branch to GitHub:

    $ git add .
    $ git commit -m "Your detailed description of your changes."
    $ git push origin name-of-your-bugfix-or-feature
    
  3. Submit a pull request through the GitHub website.

Pull Request Guidelines

Before you submit a pull request:

  1. TODO

Credits

Development Lead

Contributors

  • Éric Araujo (@merwok)

History

0.1.2 (2013-07-11)

  • Cleanup. Fixes to pass tests.

0.1.1 (2013-07-11)

  • Tiny setup.py fixes.

0.1.0 (2013-07-11)

  • First release on PyPI.

design

design Package

design Package

borders Module

borders

Functions for creating border pattern graphics.

design.borders.circles(width=12, height=12, color=<RGBColor red: 255, green: 255, blue: 255>)[source]

Draws a repeatable circle border pattern.

design.borders.circles_pil(width, height, color)[source]

Implementation of circle border with PIL.

design.borders.circles_pycairo(width, height, color)[source]

Implementation of circle border with PyCairo.

clouds Module

clouds

Functions for creating cloud graphics.

design.clouds.draw_circle(ctx, x, y, radius, cairo_color)[source]

Draw a circle. :param radius: radius in pixels :param cairo_color: normalized rgb color

design.clouds.draw_cloud(width=140, height=60, color=<RGBColor red: 255, green: 255, blue: 255>)[source]

Draw a cloud with the given width, height, and color.

gradients Module

gradients

Functions for creating gradient graphics.

Note

CSS3 gradients are better than image gradient strips in most cases. See http://www.colorzilla.com/gradient-editor/

design.gradients.vertical_strip(width=10, height=100, color=<RGBColor red: 100, green: 100, blue: 100>, subtlety=0.1)[source]

Draws a subtle vertical gradient strip.

design.gradients.vertical_white(width=10, height=100, subtlety=0.1)[source]

Draws a subtle vertical gradient strip: white with varying alpha.

Indices and tables