# styleshow [![Build Status](https://travis-ci.org/alvinsj/styleshow.svg?branch=master)](https://travis-ci.org/alvinsj/styleshow) [![npm version](https://badge.fury.io/js/styleshow.svg)](https://badge.fury.io/js/styleshow)


CSS to html, boot up a html page to show your css styles.  

e.g. testing/editing css without booting your app. keeping a styles/layouts list for reference.   

**Currently, it's still in development, with limited features.**  

It currently supports:

- Regular css properties, e.g. `color: black;` 
- However, limited selectors, e.g. `.selector`, `input.selector`, `.selector1.selector2`
- `@import` syntax (with [postcss-import](https://github.com/travco/postcss-extend))
- `@extend` syntax (with [postcss-extend](https://github.com/postcss/postcss-import))
- Nested declaration (with [postcss-nested](https://github.com/postcss/postcss-nested))
- Use of `props` declaration
  - setting `el.textContent` with `props.content`
  - adding `<script />` tag with `props.javascript`
- Auto reload page on file changes

## Usage

NPM install

    $ npm install styleshow

Example: Styleshow what's in `show.css`

	$ styleshow show.css 
	
## How it works

It parses your `.css` entry file, boot up a [browserSync](https://github.com/Browsersync/browser-sync) server, then render as html page with ReactJS components accordingly.

### Using `props`
Using `props` declaration, it allows you to set the props in your html/react component.
 
## Example

show.css

```sass
/* supports @import with postcss-import */
@import '../../build/styles/application.css';
@import '../../build/styles/custom.css';

/* Put what you want to show */
.tabs{

	/* supports @extend with postcss-extend */
	@extend .container;
	
  	ul.nav.nav-tabs{
  	
  		/* loading javascript */
  		props: '{"javascript": "http://localhost:3000/tab.js"}';
  		
  		/* dummy class name .-- to differentiate multiple element with same selector */
      	li.--1{ 
          	a{
              	props: '{"content": "Tab 1", "href": "#"}';
          	}
      	}
      	li.--2{
          	a.checked{
              	props: '{"content": "Tab 2", "href": "#"}';
          	}
      	}
      	li.--3{
          	a.done{
              	props: '{"content": "Tab 2", "href": "#"}';
          	}
      	}
  	}
}

```

screenshot

![Example](https://github.com/alvinsj/styleshow/raw/master/screenshot.png?raw=true)


## License

See [LICENSE](https://github.com/alvinsj/styleshow/raw/master/LICENSE?raw=true)