JSPM

stylus-skeuomorphic

0.2.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 3
  • Score
    100M100P100Q28794F
  • License MIT

skeuomorphic UI patrs generated by stylus.

Package Exports

  • stylus-skeuomorphic

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (stylus-skeuomorphic) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

stylus-skeuomorphic

header
skeuomorphic UI parts generated by stylus.

Quick Start

Install

npm i sylus-skeuomorphic

Edit

edit index.html and main.styl.

directory structure is...

.
├── index.html
├── main.styl
└── node_modules
    └── stylus-skeuomorphic
        └── stylus
            ├── skeu.styl
            └── theme
                └── gray
                    ├── active.styl
                    ├── hover.styl
                    ├── material.styl
                    └── normal.styl

  1. edit index.html.

    <div class="my-class">OK</div>

  2. edit main.styl as follows.

    $theme_prefix = 'foobar'

// define variables.
$material = './node_modules/stylus-skeuomorphic/stylus/theme/gray/material.styl'
$normal   = './node_modules/stylus-skeuomorphic/stylus/theme/gray/normal.styl'
$hover    = './node_modules/stylus-skeuomorphic/stylus/theme/gray/hover.styl'
$active   = './node_modules/stylus-skeuomorphic/stylus/theme/gray/active.styl'

// make original mixins.
@import './node_modules/stylus-skeuomorphic/stylus/skeu.styl'

// use mixins with @extend syntax.
.my-class
  @extend $foobar_skeu
  &:hover
    @extend $foobar_skeu_hover
  &:active
    @extend $foobar_skeu_active

// more styles...
.my-class
  size 200px 50px
  text-align center
  font 'sans-serif'

Compile

compile main.styl file.
this tutorial require global install stylus and nib.

npm i -g stylus nib
stylus -u nib main.styl

API

these are stylus objects in stylus-skeuomorphic.
you can use these objects in your project.

@import 'stylus-skeuomorphic/stylus/skeu.styl'

Placeholder

with @extend syntax.
(pre) is replaced with $theme_prefix.

$theme_prefix = 'funky'

.my-class
  @extend $funky_skeu

Draw normal state

  • $(pre)_skeu
    draw UI defined by $normal.
    normal

  • $(pre)_skeu_chain
    as chinable both sides.
    chain

  • $(pre)_skeu_chain_l
    as chinable only left side.
    chain left

  • $(pre)_skeu_chain_r
    as chinable only right side.
    chain right

Draw hover state

  • $(pre)_skeu_hover
    draw UI defined by $hover.

  • $(pre)_skeu_chain_hover
    as chinable both sides.

  • $(pre)_skeu_chain_l_hover
    as chinable only left side.

  • $(pre)_skeu_chain_r_hover
    as chinable only right side.

Draw active state

  • $(pre)_skeu_active
    draw UI defined by $active.
    active

Functions

bg_color()

draw color defined by $bg_color to background .
stylus

body
  bg_color()

css

body {
    background: #edded4;
}

circle()

add `border-radius: 50%` CSS style.<br>
![circle](./images/circle.png)

variables

  • $material
    assign the path of material defining file.
    this is loaded in skeu.styl.
  • $normal
    assign the path of normal color defining file.
    this is loaded in skeu.styl.
  • $hover
    assign the path of hover color defining file.
    this is loaded in skeu.styl.
  • $active
    assign the path of active color defining file.
    this is loaded in skeu.styl.
  • $shadow_length
    length of shadow on bottom side.
  • $active_depth
    depth of depressed button when using $(pre)_skeu_active placeholder.

Theme Editing

theme consists of two types of .styl files.
one defines color, ohter defines material.

Color Definition

you should define 5 variables.
```stylus
// theme color
$theme_color = #a9a19c

// modulation config
$lightness_mod  = -38
$saturation_mod = 0
$spin_mod       = -5deg

// text color
$txt_color = #eee
```
+ __`$theme_color`__<br>
    all colors will be generated this color to the original.
+ __`$lightness_mod`__<br>
    set the amount to modulate lightness.<br>
    normally, set this value darker.
+ __`$saturation_mod`__<br>
    set the amount to modulate saturation.
+ __`$spin_mod`__<br>
    set the amount to spin hue.<br>
    you should use 'deg' unit.
+ __`$txt_color`__<br>
    set the text color.

Material Definition

`$duration`, `$texture`, `$texture_param`, `$texture_opacity`, `$bg_color` are optional.
```stylus
$duration        ?=  100ms
$texture         =   'flare'
$texture_param   =   5
$texture_opacity =   .3

// outer background color
$bg_color = #edded4

// $vignette_effect: 0..1
$vignette_effect = .3

// $diffusion: 0..1
$diffusion = .1

// top_reflection
$top_blend    = .25
$top_alpha    = .8
$bottom_blend = .18
$bottom_alpha = .5
```
+ __`$duration`__<br>
    set the duration of CSS transition from a state to another.
+ __`$texture`__<br>
    set the type of texture.
    * __`'image'`__<br>
        paramator: string - image url (e.g. `$texture_param = '../../images/stone.png'`).<br>
        ![texture image](./images/texture_image.png)
    * __`'flare'`__<br>
        paramator: integer - repeated times of horizontal directional changing.
    * __`'v_stripe'`__<br>
        paramator: integer - number of stripes.
    * __`'v_stripe_abs'`__<br>
        paramator: integer - number of pixels of stripe width.
    * __`'h_stripe'`__<br>
        paramator: integer - number of stripes.
    * __`'h_stripe_abs'`__<br>
        paramator: integer - number of pixels of stripe width.
    * __`'tl_stripe'`__<br>
        paramator: integer - number of stripes.
    * __`'tl_stripe_abs'`__<br>
        paramator: integer - number of pixels of stripe width. (e.g. `$texture_param = 2`)<br>
        ![texture top left stripes](./images/texture_tl_stripe.png)
    * __`'tr_stripe'`__<br>
        paramator: integer - number of stripes.
    * __`'tr_stripe_abs'`__<br>
        paramator: integer - number of pixels of stripe width.
+ __`$texture_param`__<br>
    paramator for `$texture`.<br>
    this depends on the type of `$texture`.
+ __`$texture_opacity`__<br>
    opacity of texture.<br>
    can not use when `$texute = 'image'`.
+ __`$image_size`__<br>
    set width and height of image (e.g. `$image_size = '300px 300px'`).<br>
    you can set when `$texute = 'image'`.
+ __`$bg_color`__<br>
    this color is used with `bg_color()` function.
+ __`$vignette_effect`__<br>
    opacity of vignette effect (e.g. `$vignette_effect = .9`).<br>
    ![texture top left stripes](./images/vignette.png)
+ __`$diffusion`__<br>
    opacity of white light diffusion (e.g. `$diffusion = .8`).<br>
    ![texture top left stripes](./images/diffusion.png)
+ top light reflection
    * __`$top_blend`__<br>
        the amount of white light on top side in reflection.
    * __`$top_alpha`__<br>
        hiding power to hide the background on top side in reflection.
    * __`$bottom_blend`__<br>
        the amount of white light on bottom side in reflection.
    * __`$bottom_alpha`__<br>
        hiding power to hide the background on bottom side in reflection.

import theme

assign the path to file into $material, $normal, $hover and $active, then import skeu.styl.

$theme_prefix = 'gray'
$material = './node_modules/stylus-skeuomorphic/stylus/theme/gray/material.styl' // material file
$normal   = './node_modules/stylus-skeuomorphic/stylus/theme/gray/normal.styl'   // color file
$hover    = './node_modules/stylus-skeuomorphic/stylus/theme/gray/hover.styl'    // color file
$active   = './node_modules/stylus-skeuomorphic/stylus/theme/gray/active.styl'   // color file

@import './node_modules/stylus-skeuomorphic/stylus/skeu.styl'

or, you can create an import file, and read it.

import_gray.styl

$theme_prefix = 'gray'
$material     = './node_modules/stylus-skeuomorphic/stylus/theme/gray/material.styl'
$normal       = './node_modules/stylus-skeuomorphic/stylus/theme/gray/normal.styl'
$hover        = './node_modules/stylus-skeuomorphic/stylus/theme/gray/hover.styl'
$active       = './node_modules/stylus-skeuomorphic/stylus/theme/gray/active.styl'

main.styl

@import './import_gray.styl'
@import './node_modules/stylus-skeuomorphic/stylus/skeu.styl'

import multiple themes

import another theme that you want and skeu.styl with using @import keyword.

@import './node_modules/stylus-skeuomorphic/examples/_import_theme/gray.styl'
@import './node_modules/stylus-skeuomorphic/stylus/skeu.styl'

// import another theme...
@import './node_modules/stylus-skeuomorphic/examples/_import_theme/pink.styl'
@import './node_modules/stylus-skeuomorphic/stylus/skeu.styl'

.gray_button
  @extend $gray_skeu
  &:hover
    @extend $gray_skeu_hover
  &:active
    @extend $gray_skeu_active

.pink_button
  @extend $pink_skeu
  &:hover
    @extend $pink_skeu_hover
  &:active
    @extend $pink_skeu_active