Monday, March 4, 2013

An introduction to front-end frameworks

bootstrap screengrab

Front-end frameworks can be great or awful, depending on what you're trying to do. They're great if you need to get something basic up-and-running quickly. But if you're building something more intricate and you want more control over the specifics of the layout, front-end frameworks add unnecessary heft.

What is a front-end framework?


Front-end frameworks come in many variations. There are the minimalist types, like Semantic or Unsemantic, and there are the more robust types, like Foundation and the famous Bootstrap. And then there are lists with a bunch more.



Basically, a front-end framework is like a template with lots of options for laying out your web pages. Almost all of them are grid-based, meaning they help you put your content in a grid. Few of them offer actual design themes as most of them are simply grids for your content and design. They're usually illustrated by a jumble of blocks with spaces between them, because, well, they're just grids.

Why use a front-end framework?


A front-end framework can reduce the time it takes for you to take your website from nothing to something. That "something" might not be much, though. Aside from speed, they can often help keep you code semantic (unless you're using Unsemantic, of course), uniform, and predictable.

Those are valuable attributes for a website. Semantic code is best practice and means you're sticking to industry standards. Uniformity of layout methods means a future developer, or even a future you, will know what to expect regarding layout for the entire source code, which means less frustration. Predictability means you won't be surprised by unexpected layout issues like unruly floats or large images wrecking your max-widths.

Downsides of using a front-end framework


Nothing is perfect and no tool will solve all your problems. While there are plenty of benefits to using a front-end framework, there are some nominal downsides.

  1. If you're implementing a new grid, it will take some time to learn the system, the selectors that drive the grid, and the logic the original developer used when laying everything out. The longer you stick with a single front-end framework, the better you'll know the system and the faster you'll be able to implement and customize it.

  2. There's is a risk of slipping into copy/paste mode. It's easy to lean on the grid too much, thus reducing your control over the layout and knowledge of your own website's source.

  3. A bug in the framework means a bug in your website. Whenever you use someone else's code, you're also inheriting their bugs. But, this is the case with any reused code, including plugins, frameworks, libraries, etc.


Should a beginner use a front-end framework?


No. If you don't already have a very solid understanding of tableless CSS and grid systems, using a framework will stagnate your learning in this area. You will, invariably, resort to copy/paste mode to get anything done.

As a beginner, the best thing you can do is write your own CSS to get your website laid out how you want it. Then have a developer-friend review your code and give you feedback on ways to improve. Using a front-end framework steals your ability to experiment, make mistakes, improve, and use those improvements next time.

I personally never got used to using a front-end framework. I really like having full control and knowledge of the website I'm building. I want to be able to quickly make a layout change without worrying about the grid someone else built. And I really don't like futzing with other people's CSS to make it work for me.

Of course, this is all opinion. If you've used front-end frameworks and have a different opinion, please let me know in the comments. Or if I've left something out, gotten something wrong, or totally missed the mark, call me out in the comments. There is no pride or ego at New Method.

4 comments: