psg-theme-greek-fire
v1.0.0
Published
'Greek Fire': Theme of postcss-style-guide
Downloads
27
Maintainers
Readme
psg-theme-greek-fire
Install
$ npm install psg-theme-greek-fire
Theme
Usage
Dinamic device test
If you want to test a component on different resolutions wrap its HTML in a div
with class gf-device-test
<div class="gf-device-test">
<!-- Your HTML goes here -->
</div>
Then, the theme will include that HTML inside an isolated iframe, which will be accompanied by a toolbar with the following options in order to resize it:
- mobile
- width: 375px
- height: 667px
- mobile (landscape)
- width: 667px
- height: 375px
- tablet
- width: 768px
- height: 1024px
- tablet (landscape)
- width: 1024px
- height: 768px
- 1200px
- width: 1200px
- height: 514px
- 1440px
- width: 1440px
- height: 617px
- auto (default)
- width: 100%
Include additional styles into an iframe
Each iframe will use only your stylesheet by default. However, you can add extra styles using the attribute data-style
:
<div class="gf-device-test" data-style="html, body { padding: 0; margin: 0; background: white }">
<!-- Your HTML goes here -->
<div>
Sample CSS comment with device test
/*
@styleguide
@title media object
The media object is an image to the left, with descriptive content to the right.
```
<div class="media">
<img class="media__img" src="http://placehold.it/64x64" alt="#">
<div class="media__body">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
```
<div class="gf-device-test" data-style="html, body { padding: 0; margin: 0; background: white }">
<div class="media">
<img class="media__img" src="http://placehold.it/64x64" alt="#">
<div class="media__body">
<h2>Lorem ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div>
</div>
*/
Demo
You can try it on this demo
License
MIT © 2016 David Marchena