node package manager

stylus-skeuomorphic

stylus-skeuomorphic

header
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',
      times5,
      opacity0.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'.

  1. 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
    normal

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

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

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

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
    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',
      times5,
      opacity0.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.
circle

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'
        texture image
      • 'flare'
      • 'v_stripe'
      • 'v_stripe_abs'
      • 'h_stripe'
      • 'h_stripe_abs'
      • 'tl_stripe'
      • 'tl_stripe_abs'
        texture top left stripes
      • '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).
    texture top left stripes
  • diffusion
    opacity of white light diffusion (e.g. .8).
    texture top left stripes
  • 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 })