Tag Archives: UI

New CityGrid Template for WordPress Search Plugin

I pushed an update for the CityGrid WordPress Directory Plugin earlier today.   I finished porting over the changes to the CityGrid WordPress Search Plugin as well.

Both my WordPress plugins had a pretty basic look and feel, I wanted them to look better. So using the HTML and CSS template I borrowed from CityGrid I added it to both of the CityGrid WordPress Plugins to make them look sharper.

So now both the CityGrid WordPress Directory Plugin and CityGrid WordPress Search Plugin have a default UI template, as well as the ability to switch it and make it look like CityGrid.com.

Next I’m going to add another template or two, then start extending the functionality of each template, allowing WordPress site owners to have as much flexibility when deploying business search or directories using CityGrid Places API.

Twitter UI Bootstrap Generator

I wrote about using the Twitter Bootstrap framework for building local applications last week.

When you are building your application, the default set of styles may not be have exactly the fonts, colors and other characteristics you are looking.

To help you in your development, I found the Twitter Bootstrap Generator, that you can use to quickly choose colors, fonts and other styles your looking.

Another time saving tool to help you rapidly build local web applications.

Using Twitter Bootstrap for your Local Web Application

I’m a web application developer. I can efficiently build web applications, but when it comes to the UI, I know what looks good, but I struggle to actually implement a consistent look and feel.

Usually in a weekend I can throw together a pretty complete app, but when I try to make it look good it can take weeks, and often even kills a project before it get going.

This is why I started using Twitter Bootstrap for all my web applications and prototypes. Twitter Bootstrap is a “simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions”.

In the earlier days of Twitter, engineers used almost any library they were familiar with to meet front-end requirements. Inconsistencies among the individual applications made it difficult to scale and maintain them. Bootstrap began as an answer to these challenges and quickly accelerated during Twitter’s first Hackweek. By the end of Hackweek, they had reached a stable version that engineers could use across the company.

With the help and feedback of many engineers, Bootstrap has grown significantly to encompass not only basic styles, but more elegant and durable front-end design patterns. Providing a collection of CSS and HTML conventions, employing the latest browser techniques to deliver typography, forms, buttons, tables, grids, navigation and many of the common elements you need to deliver a sharp looking web application.

I used Twitter Bootstrap to deploy Hyp3rL0cal, my first set of local web app prototypes in PHP, Python and Ruby, built using the CityGrid Places and Advertising API. I’ve rolled up these prototypes, complete with Twitter Bootstrap as Amazon EC2 AMIs, so anyone can quickly deploy a local directory that looks good.

I highly recommend using Twitter Bootstrap in all your projects, it allows you to focus on what you do best, delivering the next generation of local directory or guide web applications.