Skip to content Skip to navigation

Everyday tools for design and theming

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:

Web References:

Desktop Tools:

Do you have any favorite tools for designing and theming? I'd love to hear from you in the comments.

Categories: 

Comments

For reference material, I always recommend the Mozilla Developer Network (developer.mozilla.org). Their CSS reference is at https://developer.mozilla.org/en-US/docs/Web/CSS.

Also, check out Chrome Dev Tools (https://developers.google.com/chrome-developer-tools/) as an alternative to the already awesome Firebug. FF is still a memory hog for me, so Chrome tends to be my goto development browser.

I'd also recommend MDN for CSS, and also most other front-end development topics - w3schools is not always a good resource. This site explains why information from the w3schools site can be questionable: http://www.w3fools.com/

If you like using Balsamiq for mockups and wireframes, this set of Drupal CMS components can be handy if you're going into that level of detail: https://mockupstogo.mybalsamiq.com/projects/web/Drupal%20CMS%20Components

Hi Sarah, thanks for the info, and especially thanks for the Drupal-specific Balsamiq download! That is very cool.

I second the recommendation for MDN (and the warning about W3Schools below). I normally add 'mdn' to the search string for CSS and JS searches - that usually brings MDN results to the top, and pushes W3Schools results down.

I love firebug. But I also use inspect element with chrome. Its good to use for cross browser testing because it allows you to switch between different browsers. This includes iPad and Android.

Hello,

Thanks for this great post, i am a beginner and i need a good info for my new blog.

Other ipsum generators: hipsters ( http://hipsteripsum.me ) and (my favorite) bacon ( http://baconipsum.com/?paras=5&type=all-meat&start-with-lorem=1 )

To get the pixel width and height of any elements on a webpage use Measureit https://addons.mozilla.org/en-US/firefox/addon/measureit/ (firefox in browser tool)

Yeah I love the inspect element on chrome, I find personally firefox a little slow so only use it for testing purposes really

The URL resource of Bootstrap should be changed to http://getbootstrap.com/

Foundation is 2nd after Bootstrap, I think you can add them http://foundation.zurb.com/

https://bootstrapmade.com

Thanks for sharing this. There are many other free tools which can assist the development process.
http://www.designrazor.net/category/tools/

A couple other awesome color tools that come to mind: http://coolors.co/ for palettes and http://htmlcolorcodes.com/ for color codes.

Awesome post. Lots of free tools are available which can help the development process. Keep it up.