Submitted by Megan Erin Miller on July 3, 2013 - 9:21 am
I spend a lot of my time theming in the browser, writing CSS and testing ideas. In this blog post, I wanted to share some of my favorite tools for designing and theming.
In-Browser Tools:
- Firebug (developer tools for in-browser testing and live editing of code): https://getfirebug.com/ – INVALUABLE!
- Box Shadow (create box-shadow CSS for different browsers): http://css-tricks.com/snippets/css/css-box-shadow/
- Border Radius generator (create border-radius CSS for different browsers: http://border-radius.com/
- CSS gradient generator (UI for creating CSS gradients): http://www.colorzilla.com/gradient-editor/
- Web color picker (web-based color picker tool): http://www.colorpicker.com/
- Hex Color Tool (lighten/darken Hex Color codes by percentage to get shades of a color): http://hexcolortool.com/
Web References:
- CSS reference (the definitive reference for CSS): http://www.w3schools.com/cssref/
- Bootstrap reference (for all your Bootstrap classes and markup): http://twitter.github.io/bootstrap/
- Font Awesome reference (for awesome icons): http://fortawesome.github.io/Font-Awesome/
Desktop Tools:
- Little Ipsum (create lorem ipsum text): http://littleipsum.com/
- Frank DeLoupe (pick colors from any pixel on your desktop screen): www.jumpzero.com/frank/
- Anvil for Mac (easy, one-click local dev environment): http://anvilformac.com/
- Balsamiq (wireframing software with built-in UI pattern libraries): http://www.balsamiq.com/ (also available online)
- Creately (great tool for creating site maps): http://creately.com/ (also available online)
- Sublime Text (beautiful code editor): http://www.sublimetext.com/
- Adobe Photoshop, Illustrator, etc. (duh): http://www.adobe.com
Do you have any favorite tools for designing and theming? I'd love to hear from you in the comments.
Categories:
