stylus-skeuomorphic v0.4.0

stylus-skeuomorphic

skeuomorphic UI parts generated by stylus.

Quick Start

Installation

$ npm i stylus sylus-skeuomorphic

Usage

1. make config or use presets with skeu-config function.

   config = {
     name: 'gray',
     material: {
       duration: 100ms,
       texture: {
         type: 'flare',
         times: 5,
         opacity: 0.2
       },
       bg_color: white,
       vignette_effect: 0.1,
       diffusion: 0.1,
       top: {
         blend: 0.25,
         alpha: 0.8
       },
       bottom: {
         blend: 0.15,
         alpha: 0.5
       }
     },
     normal: {
       theme_color: #aaa,
       lightness_mod: -25,
       saturation_mod: 0,
       spin_mod: 0deg,
       txt_color: white
     },
     hover: {
       theme_color: #999,
       lightness_mod: -37,
       saturation_mod: 0,
       spin_mod: 0deg,
       txt_color: #222
     },
     active: {
       theme_color: #888,
       lightness_mod: -40,
       saturation_mod: 0,
       spin_mod: 0deg,
       txt_color: #222
     }
   }

   or

   config = skeu-config('gray')

   preset types in 'gray' | 'pink' | 'purple' | 'yellow' | 'green' | 'blue' | 'red'.

2. edit main.styl as following.

   @import 'stylus-skeuomorphic'
   
   // config as the previous section.
   //
   // config = ...
   
   stylus-skeuomorphic(config)
   
   isolate-all = skeu-gray.isolate-all
   .my-class
     { isolate-all }
   
   // this meaning is same as following...
   // isolate-normal = skeu-gray.isolate.normal
   // isolate-hover  = skeu-gray.isolate.hover
   // isolate-active = skeu-gray.isolate.active
   // .my-class
   //   { isolate-normal }
   //   &:hover
   //     { isolate-hover }
   //   &:active
   //     { isolate-active }
   
   // more styles...
   .my-class
     size 200px 50px
     text-align center
     font 'sans-serif'

Compile

compile main.styl file.

$(npm bin)/stylus -u stylus-skeuomorphic main.styl
# if stylus installed with global
stylus -u stylus-skeuomorphic main.styl

Draw normal state

• isolate-normal = skeu-{name}.isolate.normal

• chain-normal = skeu-{name}.chain.normal as chainable both sides.

• chain-left-normal = skeu-{name}.chain-left.normal as chinable only left side.

• chain-right-normal = skeu-{name}.chain-right.normal as chinable only right side.

Draw hover state

• isolate-hover = skeu-{name}.isolate.hover

• chain-hover = skeu-{name}.chain.hover as chinable both sides.

• chain-left-hover = skeu-{name}.chain-left.hover as chinable only left side.

• chain-right-hover = skeu-{name}.chain-right.hover as chinable only right side.

Draw active state

• isolate-active = skeu-{name}.isolate.active chain-active = skeu-{name}.chain.active chain-left-active = skeu-{name}.chain-left.active chain-right-active = skeu-{name}.chain-right.active

Config

name

define variable as skeu-{name} in global.

preset = skeu-config('pink')
override = {
  name: 'foobar'
}
config = merge(preset, override)

stylus-skeuomorphic(config)

isolate-all = skeu-foobar.isolate-all
.my-class
  { isolate-all }

material

preset = skeu-config('pink')
override = {
  material: {
    duration: 100ms,
    texture: {
      type: 'flare',
      times: 5,
      opacity: 0.2
    },
    bg_color: white,
    vignette_effect: 0.1,
    diffusion: 0.1,
    shadow_length: 0px,
    active_depth: 1px,
    top: {
      blend: 0.25,
      alpha: 0.8
    },
    bottom: {
      blend: 0.15,
      alpha: 0.5
    }
  }
}
config = merge(preset, override)
stylus-skeuomorphic(config)

normal, hover, active

preset = skeu-config('pink')
override = {
  normal: { // hover, active has same attributes.
    theme_color: #9f9791,
    lightness_mod: -38,
    saturation_mod: -0,
    spin_mod: -5deg,
    txt_color: #eee
  }
}
config = merge(preset, override)
stylus-skeuomorphic(config)

Functions

circle()

add border-radius: 50% CSS style.

Theme Editing

Color Definition

you should define 5 variables.

• theme_color all colors will be generated this color to the original.
• lightness_mod set the amount to modulate lightness. normally, set this value darker.
• saturation_mod set the amount to modulate saturation.
• spin_mod set the amount to spin hue. you should use 'deg' unit.
• txt_color set the text color.

Material Definition

• duration set the duration of CSS transition from a state to another.
• texture
  • type set the type of texture.
    • 'image'
    • 'flare'
    • 'v_stripe'
    • 'v_stripe_abs'
    • 'h_stripe'
    • 'h_stripe_abs'
    • 'tl_stripe'
    • 'tl_stripe_abs'
    • 'tr_stripe'
    • 'tr_stripe_abs'
  • src source URL of image. used in image.
  • size set width and height of image (e.g. '300px 300px'). used in image.
  • times set repeat times (e.g. 5). used in flare | v_stripe | v_stripe_abs | h_stripe | h_stripe_abs | tl_stripe | tl_stripe_abs | tr_stripe | tr_stripe_abs.
  • opacity opacity of texture(e.g. .2). used in flare | v_stripe | v_stripe_abs | h_stripe | h_stripe_abs | tl_stripe | tl_stripe_abs | tr_stripe | tr_stripe_abs.
• bg_color
• vignette_effect opacity of vignette effect (e.g. .9).
• diffusion opacity of white light diffusion (e.g. .8).
• shadow_length
• active_depth
• top
  • blend the amount of white light on top side in reflection.
  • alpha hiding power to hide the background on top side in reflection.
• bottom
  • blend the amount of white light on bottom side in reflection.
  • alpha hiding power to hide the background on bottom side in reflection.

import theme

making theme in JSON format as following.

{
  "name": "'blue'",
  "material": {
    "duration": "100ms",
    "texture": {
      "type": "'tl_stripe'",
      "times": 9,
      "opacity": 0.2
    },
    "bg_color": "#33aadd",
    "vignette_effect": 0.3,
    "diffusion": 0,
    "top": {
      "blend": 0.18,
      "alpha": 0.8
    },
    "bottom": {
      "blend": 0.18,
      "alpha": 0.5
    }
  },
  "normal": {
    "theme_color": "#33aadd",
    "lightness_mod": -48,
    "saturation_mod": -60,
    "spin_mod": "0deg",
    "txt_color": "#c33"
  },
  "hover": {
    "theme_color": "#33aadd",
    "lightness_mod": -48,
    "saturation_mod": -60,
    "spin_mod": "0deg",
    "txt_color": "#f33"
  },
  "active": {
    "theme_color": "#33aadd",
    "lightness_mod": -48,
    "saturation_mod": -60,
    "spin_mod": "0deg",
    "txt_color": "#077"
  }
}

and use json() function.

config = json('path/to/theme/blue.json', { hash: true })