npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

stylus-skeuomorphic

v0.4.0

Published

skeuomorphic UI patrs generated by stylus.

Downloads

41

Readme

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',
      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'.

  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',
      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. 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 })