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
defaultn
) - whether to encapsulate the model in iframe or render directly on page (to prevent style leaking) - Include data? (
y
/n
defaultn
) - 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 componenttitle
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 HTMLoutline
- 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 toresource.url
)
append_class
load_data
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request