Settled on an idea for my Major Project

Posted on by KrooKedUK

I wasn’t happy with any of the Major Project ideas I had initially thought of, so I spent a lot of time trying to think of something better. Looking back now I realise put a lot of pressure on myself to come up with an awesome idea, when really I should have been more relaxed about it. I wanted to create something that would be useful to others in the web design industry and the idea that I have decided to run with, just popped into my head one night.

I had just come in from Rick Munro’s talk over at Tibus (a very good evening thanks to both Rick and the Standardista’s) and was browsing through some random sites online. I came accross a site called Tiny Fluid Grid, which allows you to create a custom grid through a simple UI. I thought, this is great, it’s so simple and works really well. So that was that. I then stumbled accross Launchlist which I had seen before, but never paid much attention to, as I had never needed to use it.

So what has this got to do with my Major Project, you ask? Well, having seen both these online tools in such a short space of time, I thought wouldn’t it be cool if there was a tool which let you create a fully customisable web template using a UI, where you can toggle options on and off (like Launchlist) and move sliders around to select certain values (like Tiny Fluid Grid).

My idea was conceived. Of course like anyone that thinks up a new idea, I asked myself many questions. Is this big enough for my Major Project? How will I achieve this? What will the tool let you do? Is there currently anything out there like this? 

So what will this tool let you do? Well so far I have come up with the following ideas:

  • Ability to create a customised web template through a nice UI
  • It will be based off HTML5 Boilerplate – you will have the ability to add exclude certain sections that you don’t need or want (Will put together a definitive list soon)
  • Ability to include responsive options, like a Fluid grid, Media Queries (Will allow those who don’t have the time to learn this right now to create a responsive site without having to start from scratch)
  • Typography options – Ability to include a baseline grid and define certain typography options
  • Any other options that are suggested to me.

This is a very vague list and I will refine and add to it as I do more research and find out exactly what level of customisation people would like. I plan to ask plenty of Web designers (not hard when I have access to all of the IMD’ers) and some web design studios what they would like to see included.

I have thought a little bit about how I will achieve this and I know that the very basics will rely upon calling snippets of code stored in a MySQL database whenever a certain option is selected, but I haven’t had the time to look into this in more detail. I will be researching this and hassling some very talented developers who should be able to help me figure out the best solution! I will will cover what I find out in a future blog post.

I finally had an idea I liked, but I needed someone to assure me that it was a good idea. I discussed the idea with Nik the next day in the Mac Labs, so it was all fresh in my head. He had positive things to say about it and told me that I should get the project up on GitHub as soon as possible. GitHub has become so popular recently which means I have heard of it, but I do not know much about it, aside from the fact that it is some sort of repositry for version control system Git. This is something I will need to get clued up on and I will look at GitHub in a future blog post.

Is there anything similar out there?

Well, yes and no! There are many great tools out there that let you create customisable templates or grids, but none that offer the level of customisation that I want to offer. Here’s a look at some of the tools I have identified.



Initializr allows you to check boxes which will include certain files and generate a clean customised template based on HTML5 Boilerplate. However it is limited to only being able to include features from HTML5 Boilerplate, whereas I want to use HTML5 Boilerplate as a starting point, strip out unneccessary code and then start adding some of the features I mentioned earlier.

Tiny Fluid Grid

Tiny Fluid Grid

This is a good example to show what I want to create for the UI on the front-end, using sliders and toggles to customise the template. Using this tool you can create a CSS grid and change the Number of Columns, Cutter Percentage and the Minimum and Maximum widths. It is fun to use because of the stylish UI and creates a perfectly customised grid with very little effort from the user.

ZURB CSS Grid Builder

ZURB CSS Grid Builder

This achieves the same goal as the Tiny Fluid Grid and outputs a CSS Grid for the user. However instead of using sliders this relies on the user entering data into input fields which requires more effort and is nowhere near as enjoyable.

HTML5 Boilerplate

HTML5 Boilerplate

I have found out recently that they now offer some level of customisation to allow users to to choose what is included in their template. However this doesn’t go as far as editing too much within the files themselves, it will allow you to include or exclude certain files though.

These tools all offer a certain level of customisation, but they are specific to a certain task. This is where my project differs, it aims to offer customisation of what is included in an HTML or CSS file and will allow the user to define certain settings relating to responsive design, typography and other areas.

So what’s next? Well I need to come up with a name and start thiking about branding. I will also need to consider how the front-end UI will look and feel, and the level of customisation offered. I will cover these areas in future posts.

This entry was posted in Major Project. Bookmark the permalink.