Sculptor

Tool to create style guides and prototype web apps.

node is required to run Bower.

$ gem install sculptor
$ npm install -g bower

Sculptor extends Middleman so all Middleman commands can also be used.

Fetches and installs dependencies and creates project skeleton.

sculptor init project-name

Aliases: i, new, n.

This command will create scaffold for new project and install client dependencies via Bower. Make sure Bower is installed globally (npm install -g bower).

In project root directory run:

sculptor create model-name

Alias c.

Models are sub-project which are contained in directories. Several similar modules can be created in one directory:

sculptor c model-name/variant

If no variant is specified the initial variant is created with the same name as directory

An index file is generated for ech directory.

When createing a new model its path is shown and the following questions asked:

• Title: (optional)- title for the model created
• Description: (optional) - model description
• Stylesheet: (optional) - stylesheet file name, created in the model directory and automatically included in the model
• Use iframe? (y/n default n) - whether to encapsulate the model in iframe or render directly on page (to prevent style leaking)
• Include data? (y/n default n) - whether to include YAML file for model mock data

Runs development server with LiveReload.

sculptor server

Running sculptor without any parameters is aliased to sculptor server.

Generates static version of project in build directory.

sculptor build

The build can be distributed/viewed in standalone mode.

On OSX running build/launch.command afterwards will run Python's SimpleHTTPServer on port 8000 and open browser with project.

Sculptor is using Slim templates internally but should work with other templates supported by Middleman in projects.

• model
  • url (String) - first optional parameter is URL to the page with the component
  • title
  • description
  • pretty {boolean} whether to try to reformat the HTML (e.g. if remote HTML is minified)
  • css - CSS selector to extract from the remote page. If specific element is required it can be selected by providing #<0-based index> at the end of selector separated by space. e.g. img #0 will select the first image.
  • data - local data that can be injected in a local component (partial with .component.slim extension) type of source code used for code highlighting
• model_iframe
• html - Generate source code for HTML
• outline - Generate outline of HTML structure

• include_stylesheets
• include_stylesheet
• include_javascripts
• relative_dir
• resource_file
• resource_dir
• resources_for
  • dir - target directory for resources list (required)
  • ext - filter resources with matching extension (default: 'html')
  • exlude_indexes - whether to exclude directory index files (default: false)
  • sort_by - sort resources by (defaults to resource.url)
• append_class

• load_data

1. Fork it
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create new Pull Request