|Project Name||Stars||Downloads||Repos Using This||Packages Using This||Most Recent Commit||Total Releases||Latest Release||Open Issues||License||Language|
|Frontend Template||27||7 years ago||HTML|
|Simple responsive template|
|Leaven Responsive Menu||10||5 years ago||CSS|
|A responsive, mobile first, accessible navigation proposal for Genesis child themes.|
|:rocket: :triangular_ruler: Demonstration, example code and workflow blueprint for cross browser compatible responsive svg sprites|
|Svg Icons Reseach||5||8 years ago|
|Research on using SVG icons in real projects|
|Dynamic Sprites||4||10 years ago||gpl-2.0||Ruby|
|SASS mixin and sprite generator for responsive sprites|
|Responsive Compass Sprite||3||8 years ago||mit||CSS|
|Some utils for responsive compass sprite.|
|Responsive Css Image Sprites||2||7 years ago||mit|
|How make an image sprite 100% responsive with css only|
|Responsive website icon simple Node API and CLI solution. Support multi-color(symbol) and single color(font) icons.|
|Responsive Assets||2||10 years ago||Ruby|
|Complete and integrated set of tools facilitating development of cross-platform HTML5 projects. It provides everything from enforcing clear asset files structure, automatic sprite maps generation, to detection of desktop, tablet and mobile devices, retina displays, and dynamic (responsive) switching between them at runtime, based on the detected device. Everything seamlessly integrated into your IDE or OS.|
|Responsive Portfolio||1||2 years ago||1||HTML|
|A Bootstrap responsive portfolio|
An example approach to successfully delivery responsive svgs to all browsers - because it was really time to document this.
Work In Progress - Even this readme :)
This repo is meant as a demonstration and blueprint. It is not intended to be published to npm. So you need to clone it manually to your machine.
$ git clone [email protected]:axe312ger/responsive-svg-sprites.git $ cd responsive-svg-sprites $ npm install
The icons which are glued together by svg-sprite can be found in the
icons folder. Feel free to add your own files.
The svg sprite is generated by simply running gulp or entering the following command to your command line.
$ npm run generate
All generated files can be located in the
sprite folder. This includes the sprite itself, a sass file containing a map variable with the aspect ratios of every icon and an example with demonstrations how to use this in an actual project.
You can run the generated example(
sprite/example/) with any kind of webserver. Or just visit the github.io page of this repository. It contains exactly these files.
Want a quick proof that it works? Have a closer look to the cross browser testing screenshots issue.
Beautiful example icons by Oliver Pitsch & Smashing Magazine
This could not even barely work without the work of the following awesome developers: