/Developing my own CSS & HTML Framework

  0
Code.

I have talked before on the use of a css framework to make your life as a web designer simpler, faster and better controlled. I looked specifically at InuitCSS, because I believe it's an awesome framework to base your work on, and I still do believe that.

The problem with using a css framework, regardless of which one you choose, is a strange feeling of emptiness. For me it's like playing a minecraft map in creative mode - I can do cool things, but I didn't really have to put in much work to get it done. It's not really cheating, but it's not really yours.

I also found that feature wise, some frameworks has a feature I like, that the other doesn't have, and vice versa. It's lame, I know, but it's important to me that the framework I use has everything I want, in the way I want it. It's a steep requirement, and considering that all the frameworks are free to use, it's a bit doos to expect them to add stuff specifically for you. Oh, and considering that you are yourself a web designer, why are you expecting other people to do this for you in the first place?

So, I decided to write my own framework. It will be based on everything I need in a framework, and nothing that I don't need. Before you think - Fuck, another css framework! - This isn't a project that I expect people to use, other than myself really. I am doing this mostly as a personal challenge, and the result is purely a personal tool that I can use in all my projects going forward.

@Foundation is born!

The very first requirement of my framework is an awesome name, and a pretty cool logo to go with it. This is the designer in me speaking here. I chose @Foundation. For me this is such a simple and descriptive name for a css framework - The @ is a common css symbol, and a framework is (or should be) the foundation on which solid websites are built!

A css framework is a pretty standard thing actually, but there is always this need to add all kinds of non-standard things to it, bloating it up. I thought long and hard on what it is I want my framework to be, and came up with the following:

  • It has to be a standard, Plug and play, quick to use framework. No frills, no bloat, just a straightforward framework.
  • It has to have the common things I like, some cool styling for things I reuse all the time (buttons, table styling, form styling, messages, navigations, tooltips, etc)
  • A common HTML template that contains preconfigured html "recipes" for the things I work with daily

@Foundation

This is the standard, no frills framework which will consist of:

  • A solid grid system
  • A solid type base
  • A solid Responsive Design base
  • A solid reset system
  • A solid form system (based on my own preferred html markup method)
  • A solid base style containing all the html elements

@Foundation Plus

This will be an additional addon to @Foundation which adds styling to common things like

  • Buttons (both forms and a.button)
  • Forms
  • Tooltips (an awesome implementation from Harry Roberts)
  • Rounded corners and other css3 goodies
  • Fancy Tables
  • Perhaps some custom fonts
  • Messages (errors, warnings, etc)
  • Navigation (You really don't need to redo navigation everytime)
  • & more!

@Foundation HTML

I plan to add a general but solid html framework to this too. I tend to use a specific html markup system in all my projects, so this makes sense. It's loosely based on drupal's html output ( I work a lot in drupal), so this framework will be kind of Drupal friendly.

It's going to be a mash up

While I will do all the research, and much of the css will be developed from the ground up, the reality is that a lot of people are doing great work in the field, and it will be a crime not to include some of it.

Harry Roberts for one is doing some really nice work, and I am a big fan of it, so expect some of his stuff in there. A List Apart always has great technical content, and I look forward to dissecting that. Bootstrap, which is a framework from the twitter guys contains some really nice work, some of which would be awesome to use in my own framework.

Usability, UX

I am a big fan of UX, and while still relatively new to the field, I expect some research and work to enter on the framework level. Expect consistency, for one. Responsive design, solid browser support with proper degrading will feature.

Is LESS more?

I have never worked with LESS before, and don't really see the point of it yet. The reason for that is a totally uninformed one, and I wish to change that. So I will do some research on that, and probably get back to you on that!

Version Control

At my office we use SVN religiously for all our projects, and that's great. Everyone is talking GIT nowadays though, and I keep seeing some great projects hosted on GitHub. @Foundation is now also hosted on GitHub, and I will be learning a lot about Git in the process I imagine!

Okay, awesome, but dude, why?

This is going to be a personal challenge to show myself how good I really am, and in the process learn new things, and relearn things that I have been taking for granted for too long.

It will also be used on some large sites, for which a stable css framework was part of spec and planning. I figured that we should just build our own one, which also takes a long time to do, so doing it myself, in own time will allow me to satisfy both my needs!

Plus, it's going to be a jol.

Add new comment

Won't ever be made public. I promise.

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.