Transformicons: Animated icons, symbols and buttons using SVG and CSS. Inspired by the article from Sara Soueidan and the work of Bennett Feely.
Filed under animationShow All
What's a transformicon?
It's an animated symbol/button/icon that morphs using a combination of SVG, CSS and HTML.
We also provide a builder that gives developers the ability to select their preferred Transformicons and output for finer control.
What browsers do you support?
IE10+, Chrome 36+, Safari 6+, Firefox 30+, Opera 22+, iOS 7+, Android 4+, Chrome for Android 38+
Each intended platform and browser is double and triple checked using BrowserStack. BrowserStack is a cloud-based cross-browser testing tool that enables developers to test their websites across various browsers on different operating systems and mobile devices.
All of our documentation has been written in markdown and can be directly viewed on our site or under our docs directory of this repo. Feel free to reach out for help in the issue tracker making sure to title your issue as descriptive as possible. Please make sure you've also checked older issues that may relate to your question first before filing in order to avoid bogging down the issue tracker.
If you would like to contribute to the Transformicons project, please make sure that anything feature related is isolated to a new branch and titled with the name of the feature being developed.
Local installation is dead simple. We use all local files and directories to run this project. This ensures that you, the developer, need not install anything directly or globally to your system. Also, take note we use libsass for preprocessing all of our Sass code.
$ npm install
Start a server and watch Sass files
$ npm start
Since a Sass coding guidelines document has been established by Hugo, it only seems fitting to abide loosely by it's suggestions. The http://sass-guidelin.es is what we strive towards as we write Sass and we hope you do the same. Enough said.
You'll find all our working files in the
site/templates/includes/tconsdirectory. We use assemble to build our markup so make sure you're never editing a file with the
.htmlextension. Assemble files use the
.hbsfile extension. These are the files you should be editing instead.
Before Filing a Report
- Make an isolated demo
- List your setup and explain in detail the steps to follow in order to reproduce your bug.
Objects submitted to Transformicons must abide by the following guidelines in order to be accepted into the library…
- Fully Tested.
- Proportions must be a maximum of 40px wide and no more than 40px tall.
- Make sense to users and yourself.
- If your Transformicon is truly a
buttonplease surround the object in a
buttontag otherwise use a
div. See our documentation for examples.
- Provide custom control over color and appearance for traits such as border-radius. This way authors can control the visual aspect to match their design.
- Featured resource in Codrops Collective #154
- Daily top 10 feature on Product Hunt
- Featured Tool in CSS Weekly