Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tyom/sculptor
Tool to create style guides and prototype web apps
https://github.com/tyom/sculptor
Last synced: 2 days ago
JSON representation
Tool to create style guides and prototype web apps
- Host: GitHub
- URL: https://github.com/tyom/sculptor
- Owner: tyom
- License: mit
- Created: 2014-05-21T13:04:42.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-03-16T18:31:22.000Z (over 9 years ago)
- Last Synced: 2024-03-14T23:07:21.049Z (8 months ago)
- Language: CSS
- Size: 505 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Sculptor
Tool to create style guides and prototype web apps.
## Installation
node is required to run Bower.
```
$ gem install sculptor
$ npm install -g bower
```
## Usage
Sculptor extends Middleman so all Middleman commands can also be used.
### Initiate new project
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`).
### Create new model
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
### Running test server
Runs development server with LiveReload.
```
sculptor server
```
Running `sculptor` without any parameters is aliased to `sculptor server`.
### Building the gallery
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 template helpers
Sculptor is using Slim templates internally but should work with other templates supported by Middleman in projects.
### Model helpers
* `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
### Resource helpers
* `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`
### Data helpers
* `load_data`
## Contributing
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