ic

image-css

generator css and scss templates for images

Showing:

Popularity

Downloads/wk

0

GitHub Stars

4

Maintenance

Last Commit

5yrs ago

Contributors

2

Package

Dependencies

2

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

generator css and scss templates for images

Build Status Build status NPM version Coverage Status

Examples

var imagecss = require("css-image");
var files = [{
  width: 400,
  height: 300,
  file: "t.png"
}];
var result = imagecss(files ,{
  css: true,
  scss: true,
  retina: true,
  squeeze: 2,
  root: "root"
})

result is

.img_t{ 
  width: 400px;
  height: 300px; 
  background-image: url(root/t.png); 
  background-size: 400px 300px; 
} 
@media (min-device-pixel-ratio: 2) and (min-resolution: 192dpi){ 
  .img_t{ 
    width: 400px; 
    height: 300px; 
    background-image: url(root/t-50pc.png); 
    background-size: 400px 300px; 
  } 
} 
.img_t-s2{ 
  width: 200px; 
  height: 150px; 
  background-image: url(root/t.png); 
  background-size: 200px 150px; 
} 
@mixin img_t(){ 
  width: 400px; 
  height: 300px; 
  background-image: url(root/t.png); 
  background-size: 400px 300px; 
  @media (min-device-pixel-ratio: 2) and (min-resolution: 192dpi){ 
    width: 400px; 
    height: 300px; 
    background-image: url(root/t-50pc.png); 
    background-size: 400px 300px; 
  } 
} 
$img_t__width: 400px; 
$img_t__height: 300px; 
$img_t__path: 'root/t-50pc.png'; 
@mixin img_t-s2(){ 
  width: 200px; 
  height: 150px; 
  background-image: url(root/t.png); 
  background-size: 200px 150px; 
} 
$img_t-s2__width: 200px; 
$img_t-s2__height: 150px;
$img_t-s2__path: 'root/t.png'; 

Options

  • root: path to folder where images locate

    type: String
    default: ""
    example:

      file: `test/image.png`  
      root: `images`  
      result: `images/test/image.png`
    
  • css: generate css

    type: Boolean default: false
    example:

    .img_t{ 
      width: 400px;
      height: 300px; 
      background-image: url(root/t.png); 
      background-size: 400px 300px; 
    } 
    
  • scss: generate scss

    type: Boolean
    default: false
    example:

    @mixin img_t(){ 
      width: 400px; 
      height: 300px; 
      background-image: url(root/t.png); 
      background-size: 400px 300px; 
    }
    
  • retina: generate media-query for retina images, file must locates in the same folder with the same name with retina postfix

    type: Boolean|String
    default: false
    example:
    for css

    .img_t{ 
      width: 400px;
      height: 300px; 
      background-image: url(root/t.png); 
      background-size: 400px 300px; 
    } 
    @media (min-device-pixel-ratio: 2) and (min-resolution: 192dpi){ 
      .img_t{ 
        width: 400px; 
        height: 300px; 
        background-image: url(root/t-50pc.png); 
        background-size: 400px 300px; 
      } 
    } 
    

    for scss

      @mixin img_t(){ 
      width: 400px; 
      height: 300px; 
      background-image: url(root/t.png); 
      background-size: 400px 300px; 
      @media (min-device-pixel-ratio: 2) and (min-resolution: 192dpi){ 
        width: 400px; 
        height: 300px; 
        background-image: url(root/t-50pc.png); 
        background-size: 400px 300px; 
      } 
    } 
    $img_t__width: 400px; 
    $img_t__height: 300px; 
    $img_t__path: 'root/t.png'; 
    
  • squeeze: squeeze image in squeeze times

    type: Int
    default: 1
    example: squeeze=2
    for css

    .img_t{ 
      width: 400px;
      height: 300px; 
      background-image: url(root/t.png); 
      background-size: 400px 300px; 
    } 
    .img_t-s2{ 
      width: 200px; 
      height: 150px; 
      background-image: url(root/t.png); 
      background-size: 200px 150px; 
    } 
    

    for scss

    @mixin img_t(){ 
      width: 400px; 
      height: 300px; 
      background-image: url(root/t.png); 
      background-size: 400px 300px; 
    } 
    $img_t__width: 400px; 
    $img_t__height: 300px; 
    $img_t__path: 'root/t.png';
    @mixin img_t-s2(){ 
      width: 200px; 
      height: 150px; 
      background-image: url(root/t.png); 
      background-size: 200px 150px; 
    } 
    $img_t-s2__width: 200px; 
    $img_t-s2__height: 150px;
    $img_t-s2__path: 'root/t.png';
    
  • separator: separator for generating names

    type: string
    default: "_"

  • prefix: prefix for generating names

    type: string
    default: "img_"

ChangeLog

  • 0.2.1 add image_path variable to sass mode allow empty prefix
  • 0.1.0 rename css-image
  • 0.0.2 add separator option
  • 0.0.1 Basic functionality

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
No reviews found
Be the first to rate

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial