반응형
반응형

Stitches: HTML5 sprite sheet maker

Stitches is an easy to use HTML5 sprite sheet generator. Just drag and drop images onto the app and it will generate both the sprite sheet and necessary CSS.

stitches

Homepage: http://draeton.github.io/stitches/
GitHub: https://github.com/draeton/stitches
Docs: http://draeton.github.io/stitches/stitches/doc/stitches.js.html

 

HTML5 Sprite Sheet Generator 

http://draeton.github.io/stitches

 

Stitches

Stitches is an HTML5 sprite sheet generator. The current version is 1.3.5. Documentation is availablehere.

Implementation

After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done:

<link rel="stylesheet" href="css/stitches-1.3.5.min.css">

<script data-main="js/stitches.js" src="js/stitches-1.3.5.min.js"></script>

The sprite sheet generator is automatically created in elements that have the stitches class:

<div class="stitches"></div>

If you choose, any images that are a part of the initial markup will be loaded onto the canvas:

<div class="stitches">
    <img src="img/test/github.png" data-name="github"/>
    <img src="img/test/gmail.png" data-name="gmail"/>
    <img src="img/test/linkedin.png" data-name="linkedin"/>
    <img src="img/test/stackoverflow.png" data-name="stackoverflow"/>
    <img src="img/test/tumblr.png" data-name="tumblr"/>
    <img src="img/test/twitter.png" data-name="twitter"/>
</div>

 

 

 

 

 

 

 

 

 

 

 

 

 

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[JAVASCRIPT] Angular-kickstart: Develop with AngularJS faster  (0) 2014.11.19
[javascript] Vivus: An SVG animation library  (0) 2014.11.19
[HTML5] hash tag 사용시 IE에서 title이 왜곡되는 현상  (0) 2014.11.10
[Charts] Google Charts - Column Chart  (0) 2014.11.10
[javascript] javascript 문구 테스트 - SyntaxHighlighter를 이용  (0) 2014.11.04
반응형

hash tag 사용시 IE에서 title이 왜곡되는 현상

 

IE8에서 문서 제목 변경을 방지하는 a 방법이있다.

그것은 자동으로 URL의 hash를 기반으로 변화하고 있기 때문에 (WWW. #hash)

 

아래의 타이틀을 예를 들어

 

#691 로 hash change 하면 타이틀은 #691로 변경된다.

 

 

더 좋게 바꾸려면 아래와 같이 화면 load 시, 또는 스크립트 호출 후 타이틀을 재입력해주면 된다.

 

 

 

 

 

 

 

 

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[javascript] Vivus: An SVG animation library  (0) 2014.11.19
[HTML] Stitches: HTML5 sprite sheet maker  (0) 2014.11.17
[Charts] Google Charts - Column Chart  (0) 2014.11.10
[javascript] javascript 문구 테스트 - SyntaxHighlighter를 이용  (0) 2014.11.04
[javascript] Walkway.js: Easily animate SVG elements  (0) 2014.11.03
반응형

Motherplate: A bare bones responsive boilerplate

 

Motherplate is a bare bones HTML5, CSS3, and SCSS responsive boilerplate. It doesn’t include any visual styling or components, just bare bones CSS to get started with.

motherplate

Homepage: http://leemunroe.github.io/motherplate/example.html
GitHub: https://github.com/leemunroe/motherplate

 

 

A bare bones responsive SCSS boilerplate for web designers

http://leemunroe.github.io/motherplate/example.html

반응형
저작자표시

'프로그래밍 > Style & Design' 카테고리의 다른 글

[Chart] Open Flash Chart  (0) 2015.01.20
[CSS] Material UI: A Material Design CSS framework  (0) 2014.11.12
[CSS] Flexy Boxes: A flexbox code generator and playground  (0) 2014.10.20
[CSS] Koutu Swiss: A CSS framework for Stylus  (0) 2014.10.08
[HTML5] Bumpkit: A library for the Web Audio API  (0) 2014.09.05
반응형

Bumpkit: A library for the Web Audio API

Bumpkit is a still-in-progress DAW-inspired library for the Web Audio API. It lets you create mixers, sampler instruments, and more.

bumpkit

Homepage: http://jxnblk.github.io/bumpkit/
GitHub: https://github.com/jxnblk/bumpkit

 

Basics

Create a mixer with two tracks

var mixer = bumpkit.createMixer().addTrack().addTrack();

Create a new Sampler instrument and load an audio buffer

var sampler = bumpkit.createSampler().connect(mixer.tracks[0]);

bumpkit.loadBuffer('/audio/clap.mp3', function(buffer) {
  sampler.buffer(buffer);
});


 

 

 

 

반응형
저작자표시

'프로그래밍 > Style & Design' 카테고리의 다른 글

[CSS] Flexy Boxes: A flexbox code generator and playground  (0) 2014.10.20
[CSS] Koutu Swiss: A CSS framework for Stylus  (0) 2014.10.08
[CSS] CSS-Flip: A CSS BiDi flipper  (0) 2014.04.21
[CSS] Code Guide by @mdo: Standards for sustainable HTML and CSS  (0) 2014.03.19
[CSS] Fluidity: Making HTML 100% responsive  (0) 2014.03.17
반응형

Smallworld.js is a utility for generating simple map previews with GeoJSON and HTML5 Canvas. It has no dependencies, and comes with a simple wrapper for use with jQuery and Zepto.smallworld.js

 

Homepage: http://mikefowler.me/smallworld.js/
GitHub: http://github.com/mikefowler/smallworld.js

It's a (small utility for generating a) small world. 

http://mikefowler.me/smallworld.js



smallworld.js is a small utility for generating small world maps. Documentation can be found on its official page.

반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[HTML5] HTML Minifier: Minify your HTML files. HTML 소스 줄여줘요~  (0) 2014.07.25
[HTML5] Can I use?: Up-to-date browser support reference  (0) 2014.07.25
[Mobile] Clank: open source prototyping framework for mobile apps  (0) 2014.07.14
[Framework] Web Starter Kit: Tools for multi-device development  (0) 2014.07.11
[javascript] Intense Image Viewer: Fully full screen images  (0) 2014.07.10
반응형

Web Starter Kit: Tools for multi-device development

Google Developer’s Web Starter Kit is a boilerplate and tooling for multi-device development. It’s responsive, and includes a living component style guide, cross-device synchronization, and live browser reloading.

web starter kit

Homepage: https://developers.google.com/web/starter-kit/
GitHub: https://github.com/google/web-starter-kit
Docs: https://developers.google.com/web/fundamentals/tools/


반응형
저작자표시

'프로그래밍 > Web' 카테고리의 다른 글

[JAVASCRIPT] Smallworld.js: Generate GeoJSON map previews  (0) 2014.07.21
[Mobile] Clank: open source prototyping framework for mobile apps  (0) 2014.07.14
[javascript] Intense Image Viewer: Fully full screen images  (0) 2014.07.10
[HTML5] CoverVid: HTML5 background videos  (0) 2014.07.07
OuiBounce: A small modal library - Modal  (0) 2014.07.07

+ Recent posts

티스토리툴바