VBlog

Tag: Workflow

Component (or pattern) libraries are a way of designing and building websites in a modular fashion, breaking up the UI into small, reusable chunks that can then later be assembled in a variety of ways to build anything from larger components right up to whole pages.

From the Fractal.build introduction page

A Gulp task to easily generate and use Sprite images

Using sprites can significantly improve a webpage’s performance, we should definetly use them in all of our projects… But building sprites can be a pain.

This small Gulp task is meant to make it a lot easier to both build and use sprites. It does two things:

  1. Combine all the image contained in a folder into a unified sprite PNG file
  2. Generate CSS rules to easily include those images in a webpage.

The task:

gulp.task('sprite', function () {
    var spriteData = gulp.src('source_img/*.png') // Source images
        .pipe(spritesmith({
            imgName: 'sprite.png', // Name of the final sprite
            imgPath: 'sprite.png', // Path to the final sprite
            cssName: 'sprite.css', // Name of the CSS file that will be generated
            cssTemplate: 'sprite.mustache' // Path to the mustache template (used to build the CSS file)
        }));

    var imgStream = spriteData.img
        .pipe(gulp.dest('.')); // Path to the final sprite

    return cssStream = spriteData.css
        .pipe(gulp.dest('.')); // Path to the generated CSS file
});

Example of generated sprite:

sprite

Example of CSS rules generated by the task:

.sprite {
    background: url("sprite.png") top left no-repeat;
    display: inline-block;
    vertical-align: middle;
    background-size: calc(512px/2) calc(384px/2);
}

.sprite-box {
    background-position: calc(-128px/2) calc(0px/2);
    width: calc(128px/2);
    height: calc(128px/2);
}
.sprite-browser {
    background-position: calc(-256px/2) calc(-128px/2);
    width: calc(128px/2);
    height: calc(128px/2);
}

Example of HTML using those classes to include images:

<div class="sprite sprite-box"></div>
<div class="sprite sprite-browser"></div>

This Gulp task has proven very useful to our team, it’s now included by default in all of our projects. If you’d like to grab the entire code or contribute to it, it’s available on my Github.

Jon Dobrowolski published a very interesting article about how he writes User Stories for his team, what it has done for them, and how to make sure it works in other teams.

Copyright © 2018 VBlog

Theme by Anders NorenUp ↑