iwasasuperhero

Twitter's Boostrap is an unbelievable resource that I'm sure most have at least looked at by now. It is a CSS design system with some great javascript plugins included. It makes creating a really great interface not only fast but fun. I have played around with Bootstrap since the first release and knew immediately that I would use it for those projects that need a simple and clean interface.

Groundwork is a PHP MVC framework created by John Hoover. It is extremely light weight and dead simple to use. It was developed as a starting point for creating web apps. It lets you jump right into the heart of your web app and get a working version up with little effort. I've used it several times and it provides a solid foundation for any project. It is open source and available on GitHub.

At work we manage two digital billboards in town and that gave me a change to develop two web apps to manage dynamic content on those boards. Both of these apps needed to be done quickly and provide a simple and easy to use interface. It gave me the perfect chance to finally use Bootstrap and Groundwork. The first app was for internal use and does a few things including managing contracts for clients on the board and lets us manage dynamic media via an xml feed. We are able to schedule each content with publish and unpublish dates along with selecting what days of the week it should be displayed.

The second app was for a local TV network to display latest headlines on the digital boards. They needed a clean admin that would allow them to easily add new headlines and manage those already on the board. Nothing fancy, just a simple table of current headlines and a small form to add and edit those headlines. The app then serves up an xml file that the board checks every 60 seconds. Since they are managing these headlines outside of the board software we provided them with a preview of how the headline would display on the board with the media.

Neither of these apps had a difficult list of features as both were fairly simple compared to the projects we normally work on. However using Bootstrap for the interface meant not spending a few hours designing, coding and browser testing our own. Groundwork provided a light weight framework that meant I could jump straight into the features these apps needed. Both proved to be valuable resources and make creating these small web apps simple and fun. Both of these apps were done before Bootstrap v2 was released which has so much more baked right in that I’m already working on another project using it.

The internet is full of HTML/CSS boilerplates, frameworks, and barebones projects, however, this one is mine. About five years ago I slowly started building what I called my HTML/CSS Barebones. It started as a collection of code that I used in every website that I developed. It was never meant to be a framework but rather a group of common selectors that I always used. This worked out great for awhile. I copy over the style.css for each project and go from there. The problem was keeping it updated.

Originally I hardly ever kept it updated, it was easy to duplicate and get to work. It had a few bugs and really needed to be brought up to speed with HTML5 and the latest CSS3. After a break from doing client sites while working for Digimedia I figured it was time to turn my outdated little barebones into a full project and actually maintain it. Thus Drought was born. First it was time to bring the default HTML up to speed with the new HTML5 tags, which I had already been using but adding them on a per project basis. The CSS basically had a complete rewrite from my initial v1 with all the great standards and best practices that I had picked up over the previous years. It was finally a worth HTML/CSS barebone to start each project with.

About two years ago I released v2 and put it up on GitHub. I wasn't looking for people to use it, as just like other frameworks didn't fit me, I knew everybody had their own style and standards they used. When I started at Crane | West it meant getting back to what I love which is working with clients and developing web sites. Drought came in extremely useful for all of us as the perfect starting point for each project. I kept the project independent on GitHub to maintain but we rolled it in to our internal CMS which meant every website for the past two years have started from this project. Together with John Hoover, we had put together exactly what worked best for us. A few months later along came H5BP which changed it all. They started putting together a set of best practices which has turned out to be an amazing resource. Drought currently pulls plenty from H5BP.

Of course Drought is much more then a boilerplate. It contains some default HTML and CSS for a two column website with a header, footer, content area and sidebar. In my case this allows me to jump directly into the design of the site by altering a few widths, margins, colors and setting some backgrounds. It currently includes a CSS reset, default styles for most selectors you would need in a content area and sidebar, ARIA roles are being used along with HTML5 elements and doctype. The head has default meta tags for Facebook, IE Apps, iPhone and of course keywords and description. jQuery and modernizr are included by default, humans.txt is ready for all the humans working on the project and 960 grid images are set as the body background for working with a grid. I know this project won't work for everybody, I'm not even sure it will work for anybody else but it works for me. It is open source so feel free to adapt it to your own or just get inspired to create your own. Just remember to not let it sit and get old, stay on top of it, keep it updated, follow projects like H5BP and always keep improving it along with each project you do.

Drought has been at v2 for awhile and although it has had plenty of changes the past year or two including ARIA roles and some CSS clean up, it still has plenty of changes coming. I plan to drop the CSS reset and adopt Necolas' normalize.css instead. I would also like to move the CSS over to LESS as well as providing a basic responsive grid. I don't plan for this to be a CSS toolkit like Bootstrap but I would like to include more selectors for typical items like alerts, tables, buttons and form elements. Those items would remain mostly unstyled like the rest of the CSS but having them there ready to style is the goal. I hope to get these improvements added and get v3 pushed out pretty soon.

As I said earlier, the internet is full of these projects but I felt like sharing what I use. If you're interested then check out https://github.com/jamesfleeting/Drought for the source.