Linux web design tools

It’s been (too many) years since I really flexed my web design muscles with a challenging project. In the years since XHTML transitional was the new kid on the block a lot has changed.
I dipped a toe into HTML5 when it first rolled out, but the uneven way that browsers implemented its rules put me off of using it for a while. Now I’m playing catchup with HTML5, CSS3, Sass, LESS, Compass, jQuery’s and Bootstrap.
Since I use a GNU/Linux system to design and develop, I thought that I’d list the software that I’m currently using in case anyone finds it useful or can recommend any alternatives.

Coding

I mainly design a site using a text editor of some description and for years Bluefish has been my HTML editor of choice.

Bluefish Editor
bluefish

It has code snippets, auto-completion and syntax highlighting for pretty much every language (including my favourite language, Pascal). It’s a great editor but lately I’ve started using…

Adobe Brackets
brackets

An Open Source editor from Adobe, Brackets has made my work so much easier. Live updating a webpage so that I don’t have to continually hit Refresh, showing me a preview of an image and its dimensions when I hover over an image tag, even showing me a colour swatch when I hover over a colour hex value… it just makes coding a page so much easier.
It’s cross-platform and has a load of extensions from PHP SmartHints to a Lorem Ipsum generator.

Koala
koala
I’m still very new to Sass and Compass so I’ve been looking into visual editors. Koala is a cross platform app and I haven’t really explored its features yet. I do use it to compress my CSS files before uploading them though.

Bootstrap
I’m in a kinda love/hate relationship with Twitter Bootstrap at the moment.
I love how all those repetitive tasks associated with coding a site from scratch have been taken care of, and how good a site can look with minimal effort.
On the other hand, I don’t like the idea that I’ve handed off some of the design to a 3rd party, and how anonymous and similar to every other site out there a new project can look.

Basically though, for fast prototyping, Bootstrap is amazing.
I’ve also been using Pingendo, a visual Bootstrap editor, to quickly code my container and column <div>’s.
Pingendo
I’m not sure if I’d try to code an entire site using this tool but to code the skeleton of the site it saves a helluva lot of time.
(for anyone using a Debian based distro and getting an error about libudev when trying to run this program, try creating a symlink using sudo ln -s /lib/i386-linux-gnu/libudev.so.1.3.5 /usr/lib/libudev.so.0

for a 32bit system, or

sudo ln -s /lib/x86_64-linux-gnu/libudev.so.1.3.5 /usr/lib/libudev.so.0
for a 64bit system)

Development

XAMPP
XAMPP
I’ve been using this development environment for years. It installs a LAMP stack (or MAMP or WAMP…) in a folder that allows you to easily run a test webserver for your SQL and PHP code.
No faffing about with dependencies, it’s a quick and simple way to get a web server running on your desktop. I’ve run this on a low powered netbook too with no noticeable problems.

Design

GIMP
gimp
’nuff said.

Inkscape
inkscape

A useful vector graphics editor that some people have used to create stunning artwork. I’ve used this mainly for logos and small graphical elements, although with current web technology heading in its current direction, I’m guessing that CSS will replace the need for vector graphics more and more.

Gcolor2
gcolor2-full
A colour selector, a simple enough tool but really useful for grabbing a colour value from any image on your screen.

There are a couple of websites that I use every so often too, like;
http://www.css3maker.com/
http://daneden.github.io/animate.css/

I’ll keep adding and discarding tools along the way but, with the above, I’ve currently got a pretty good workflow.


One Response to Linux web design tools

  1. Pingback:CyberFilth | Free as in… what now?